Базовые стили и полезные 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(https://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">

Автор: grokru

Источник