Базовые стили и полезные CSS-сниппеты — 2

Продолжение предыдущей подборки полезных CSS-сниппетов, которые помогут ускорить процесс разработки.

1. Стилизация

Эта конструкция поможет стилизовать ссылки в зависимости от ее типа:

/* внешние ссылки */ a[href^="http://"]{ 	padding-right: 20px; 	background: url(external.gif) no-repeat center right; }  /* email */ a[href^="mailto:"]{ 	padding-right: 20px; 	background: url(email.png) no-repeat center right; }  /* pdf */ a[href$=".pdf"]{ 	padding-right: 20px; 	background: url(pdf.png) no-repeat center right; } 

Можно добавить в начале текста буквицу — специальную большую букву, как в книгах:

p:first-letter{    display:block;    margin:5px 0 0 5px;    float:left;    color:#000;    font-size:60px;    font-family:Georgia; } 

Простое решение закругления углов:

.round{    -moz-border-radius: 10px;    -webkit-border-radius: 10px;    border-radius: 10px; /* future proofing */    -khtml-border-radius: 10px; /* for old Konqueror browsers */ } 

Несколько фоновых изображений вместе:

#multiple-images {    background: url(image_1.png) top left no-repeat,    url(image_2.png) bottom left no-repeat,    url(image_3.png) bottom right no-repeat; } 

Подсветка выделенного текста:

::selection {    color: #000000;    background-color: #FF0000; }  ::-moz-selection {    color: #000000;    background: #FF0000; } 

2. Расширение функционала

Правильное универсальное использование @font-face:

@font-face {     font-family: 'MyFontFamily';     src: url('myfont-webfont.eot?') format('eot'),          url('myfont-webfont.woff') format('woff'),          url('myfont-webfont.ttf')  format('truetype'),          url('myfont-webfont.svg#svgFontName') format('svg');     } 

Фиксированный подвал сайта:

#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'); } 

Мультиколоночность:

#columns-3 {    text-align: justify;    -moz-column-count: 3;    -moz-column-gap: 12px;    -moz-column-rule: 1px solid #c4c8cc;    -webkit-column-count: 3;    -webkit-column-gap: 12px;    -webkit-column-rule: 1px solid #c4c8cc; } 

3. Фиксы

Убираем скроллбар текстового поля в Internet Explorer:

textarea{ 	overflow:auto; } 

Улучшение совместимости с Internet Explorer:

<!--[if IE]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> 

Min-height в Internet Explorer:

.box {    min-height:500px;    height:auto !important;    height:500px; } 

Кроссбраузерный inline-block:

li {         width: 200px;         min-height: 250px;         border: 1px solid #000;         display: -moz-inline-stack;         display: inline-block;         vertical-align: top;         margin: 5px;         zoom: 1;         *display: inline;         _height: 250px; } 

CSS3

Всплывающая подсказка на CSS3:

a {   color: #900;   text-decoration: none; }    a:hover {   color: red;   position: relative; }    a[title]:hover:after {   content: attr(title);   padding: 4px 8px;   color: #333;   position: absolute;   left: 0;   top: 100%;   white-space: nowrap;   z-index: 20px;   -moz-border-radius: 5px;   -webkit-border-radius: 5px;   border-radius: 5px;   -moz-box-shadow: 0px 0px 4px #222;   -webkit-box-shadow: 0px 0px 4px #222;   box-shadow: 0px 0px 4px #222;   background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);   background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc)); } 

Размер фонового изображения на CSS3:

body {   background: #000 url(http://birdoflight.files.wordpress.com/2009/10/frida-kahlo-1.jpg) center center fixed no-repeat;   -moz-background-size: cover;   background-size: cover; }    @media only all and (max-width: 1024px) and (max-height: 768px) {   body {        -moz-background-size: 1024px 768px;     background-size: 1024px 768px;   } } 

Размытый текст на CSS3:

.blur {    color: transparent;    text-shadow: 0 0 5px rgba(0,0,0,0.5); } 

Трехмерный текст на CSS3:

h1 {   text-shadow: 0 1px 0 #ccc,                0 2px 0 #c9c9c9,                0 3px 0 #bbb,                0 4px 0 #b9b9b9,                0 5px 0 #aaa,                0 6px 1px rgba(0,0,0,.1),                0 0 5px rgba(0,0,0,.1),                0 1px 3px rgba(0,0,0,.3),                0 3px 5px rgba(0,0,0,.2),                0 5px 10px rgba(0,0,0,.25),                0 10px 10px rgba(0,0,0,.2),                0 20px 20px rgba(0,0,0,.15); }  

5. Адаптивный дизайн

Мета-теги для дизайна с адаптивной версткой, необходимы для корректного отображения сайта на устройствах с разными размерами экранов:

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="HandheldFriendly" content="true">