Интернет магазин шабонов
Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

12 Полезных CSS-кодов для WEB-Разработчиков

Дата добавления: 21.01.2014 - 20:05
Добавил: Buger
Количество просмотров: 886
Количество комментариев: 0
Рейтинг материала: 5.0 / 2
12 Полезных CSS-кодов для WEB-Разработчиков
БЕСПЛАТНО
Для скачивания файлов, необходима авторизация или регистрация на нашем ресурсе.
рейтинг 5.0
/
голосов 2
Согласно Wikipedia, Cascading Style Sheets (CSS) - это язык таблицы стилей, используемый для описания внешнего вида и форматирования документов, написанных на языках разметки. Как наиболее часто используемый для стиля, веб-страниц и интерфейсов, написанных на HTML и XHTML, язык может быть применен к любому виду XML-документа, включая обычный XML, SVG и XUL.

В этой статье мы представляем 12 CSS фрагментов и хаков, которые помоут решить многие наиболее часто используемые и, порой, неприятные CSS задачи. Данные CSS коды будут не только помогать вам, но и повысят ваши навыки разработки на один шаг вперед.
Мы надеемся, что вы найдете для себя удобные и полезные для ваших задачь.
Наслаждайтесь !!

Центрирование изображения по вертикали и горизонтали в контейнере
Код
<!-- Разметка: -->
<div class="wraptocenter"><span></span><img src="..." alt="..."></div>
     
<!-- CSS код: -->

<style type="text/css">
    .wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: ...;
    height: ...;
    }
    .wraptocenter * {
    vertical-align: middle;
    }
    /*\*//*/
    .wraptocenter {
      display: block;
    }
    .wraptocenter span {
      display: inline-block;
      height: 100%;
      width: 1px;
    }
    /**/
    </style>
    <!--[if lt IE 8]><style>
    .wraptocenter span {
    display: inline-block;
    height: 100%;
    }
    </style><![endif]-->

Медиа запросы для всех основных устройств
Код
/* Смартфоны (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Смартфоны (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Смартфоны (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Список веб-безопасных шрифтов
Код
•  font-family: Arial, Helvetica, sans-serif;
•  font-family: 'Arial Black', Gadget, sans-serif;
•  font-family: 'Bookman Old Style', serif;
•  font-family: 'Comic Sans MS', cursive;
•  font-family: Courier, monospace;
•  font-family: 'Courier New', Courier, monospace;
•  font-family: Garamond, serif;
•  font-family: Georgia, serif;
•  font-family: Impact, Charcoal, sans-serif;
•  font-family: 'Lucida Console', Monaco, monospace;
•  font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
•  font-family: 'MS Sans Serif', Geneva, sans-serif;
•  font-family: 'MS Serif', 'New York', sans-serif;
•  font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
•  font-family: Symbol, sans-serif;
•  font-family: Tahoma, Geneva, sans-serif;
•  font-family: 'Times New Roman', Times, serif;
•  font-family: 'Trebuchet MS', Helvetica, sans-serif;
•  font-family: Verdana, Geneva, sans-serif;
•  font-family: Webdings, sans-serif;
•  font-family: Wingdings, 'Zapf Dingbats', sans-serif;

Чистый градиентный CSS текст
Код
/* CSS text gradients */
h2[data-text] {
position: relative;
}
h2[data-text]::after {
content: attr(data-text);
z-index: 10;
color: #e3e3e3;
position: absolute;
top: 0;
left: 0;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,1)),
}

Как сделать выпадающее меню начальной загрузки расширить при наведении
Код
ul.nav li.dropdown:hover ul.dropdown-menu{
 display: block;
}

/* if you want to hide the arrow */
a.menu:after, .dropdown-toggle:after {
 content: none;
}

Сброс стилей от Eric Mayer
Код
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
    display: block;
}
    body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
    blockquote, q {
    quotes: none;
}
    blockquote:before, blockquote:after,
    q:before, q:after {
    content: '';
    content: none;
}
    table {
    border-collapse: collapse;
    border-spacing: 0;
}

Изменение цвета в скрытом списке
Код
ul li {
    color: black;
    list-style-type: none;
}

ul li:before {
    color: red;
    float: left;
    margin: 0 0 0 -0.89em;
    font-size: 2em;
    content: '\2022';
}

CSS прилипание Фиксированного Footer'a

Код
#footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}
/* IE 6 */
* html #footer {
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

Код блока quote на css
Код
blockquote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote p {
  display: inline;
}

CSS Hooks User Submitted Posts
Код
@charset "UTF-8";
/*
    User Submitted Posts - CSS Stylesheet

http://perishablepress.com/user-submitted-posts/

    Notes: complete list of CSS hooks for the submission form @ http://m0n.co/e
    This is a complete CSS skeleton of all elements and hooks in the submission form.
    Use what you need and then delete any empties to lighten the file.
*/
div#user-submitted-posts {}
div#user-submitted-posts form {}
div#user-submitted-posts fieldset {}
div#user-submitted-posts fieldset label {}
div#user-submitted-posts fieldset input {} /* excludes submit button */

div#user-submitted-posts input {}
div#user-submitted-posts label {}
div#user-submitted-posts textarea {}
div#user-submitted-posts select {}
div#user-submitted-posts option {}

.usp-input {}
.usp-textarea {}

form#usp_form {}

fieldset.usp-name {}
fieldset.usp-url {}
fieldset.usp-title {}
fieldset.usp-tags {}
fieldset.usp-category {}
fieldset.usp-content {}

fieldset.usp-captcha {}
div#user-submitted-posts fieldset.usp-captcha input {}

fieldset.usp-images {}
fieldset.usp-images label {}
div#user-submitted-posts input.usp-clone {}

div#usp-upload-message {}
div#user-submitted-image {}
a#usp_add-another {}

fieldset#coldform_verify {}
div#usp-submit {}

div#usp-error-message {}
div#usp-success-message {}

div.usp-input-error {}
div.usp-input-error span {}

div.usp_text-editor {}
.usp-rich-textarea {}


Комментарии в CSS
Код
body {
 font-size: 62.5% /* 1em = 10px */
}

CSS3 Mixins
Код
/*****
SCSS CSS 3 Property Maxin v 0.1
by Dele O
 *******/

@mixin rounded($radius: 10px) {
  border-radius: $radius;
 -moz-border-radius: $radius;
 -webkit-border-radius: $radius;
}


@mixin roundedSides($topLeft, $topRight, $bottomRight, $bottomLeft) {
  -moz-border-radius-topleft: $topLeft;
  -moz-border-radius-topright: $topRight;
  -moz-border-radius-bottomright: $bottomRight;
  -moz-border-radius-bottomleft: $bottomLeft;
  border-top-left-radius:$topLeft;
  border-top-right-radius: $topRight;
  border-bottom-right-radius: $bottomRight;
  border-bottom-left-radius: $bottomLeft;
}


@mixin shadow( $off-y, $off-x, $blur, $color){
  -moz-box-shadow: $off-y $off-x $blur $color; /* FF3.5+ */
  -webkit-box-shadow:  $off-y $off-x $blur $color; /* Saf3.0+, Chrome */
  box-shadow:  $off-y $off-x $blur $color; /* Opera 10.5, IE9 */
}

@mixin gradient($baseColor, $toColor){
  background-color:$baseColor;
  background-image: -moz-linear-gradient(top, $baseColor, $toColor); /* FF3.6 */
  background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, $baseColor),color-stop(1, $toColor));  /* Saf4+, Chrome */
  background-image: linear-gradient(top,$baseColor, $toColor);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='$baseColor', EndColorStr='$toColor'); 
}


@mixin trasition($property, $duration:0.3s, $function: ease-out){
  -moz-transition: $property $durations $function;  /* FF3.7+ */
  -o-transition: $property $durations $function;  /* Opera 10.5 */
  -webkit-transition: $property $durations $function;  /* Saf3.2+, Chrome */
  transition: $property $durations $function;
}


@mixin transform($scale, $rotate, $trans-x, $trans-y, $skew-x, $skew-y){
  -moz-transform: scale($scale) rotate($rotate) translate($trans-x, $trans-y) skew(skew-x, skew-y);
  -webkit-transform: scale($scale) rotate($rotate) translate($trans-x, $trans-y) skew(skew-x, skew-y);
  -o-transform: scale($scale) rotate($rotate) translate($trans-x, $trans-y) skew(skew-x, skew-y);
  -ms-transform: scale($scale) rotate($rotate) translate($trans-x, $trans-y) skew(skew-x, skew-y);
  transform: scale($scale) rotate($rotate) translate($trans-x, $trans-y) skew(skew-x, skew-y);
}



Источник: Не указан
Добавлять комментарии могут только зарегистрированные пользователи.