Это также может быть достигнуто с помощью CSS3,  однако такой метод он не работает в IE9.

p:first-child:first-letter { float: left; color: #903; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }

7. Липкий футер 

Создайтe липкий футер для сайта. Данное решение работает во  всех основных браузерах, включая Google Chrome и IE8.

CSS

/* 
Sticky Footer Solution 
by Steve Hatcher  

http://stever.ca 

http://www.cssstickyfooter.com 

*/  

* {margin:0;padding:0;}   

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */  

html, body {height: 100%;}  

#wrap {min-height: 100%;}  

#main {overflow:auto;  
    padding-bottom: 150px;}  /* must be same height as the footer */  

#footer {position: relative;  
    margin-top: -150px; /* negative value of footer height */  
    height: 150px;  
    clear:both;}   

/*Opera Fix*/  
body:before {/* thanks to Maleika (Kohoutec)*/  
content:' ';  
height:100%;  
float:left;  
width:0;  
margin-top:-32767px;/* thank you Erik J - negate effect of float*/  
}  

/* IMPORTANT 

You also need to include this conditional style in the  of your HTML file to feed this style to IE 6 and lower and 8 and higher. 

<!--[if !IE 7]> 
<style type="text/css"> 
        #wrap {display:table;height:100%} 
    </style> 

< ![endif]--> 

*/ 

HTML

div id="wrap">  

    <div id="main">  

    </div>  

</div>  

<div id="footer">  

</div> 

8. Техника замены изображений

Удобный способ замены элементов страницы с изображением на текст.

a.replacement
 {
 background: url(dotted-border.png) no-repeat;
 height: 44px;
 width: 316px;
 display: block;
 text-indent: -9999px;
 overflow: hidden;  /*Add this line to the image replacement method*/
 }

Или еще один способ:

.ir { font: 0/0 a; text-shadow: none; color: transparent;  }

9. Установите размер шрифта 62,5% для более легкого преобразование в em

Если вы хотите создать адаптивную разметку, вы должны использовать еm вместо пикселей или точек. Устанавливая размер шрифта 62,5%, вы можете легко подобрать значения шрифта для em ( 1/10 значения пикселя ).

body {
 font-size: 62.5%; /* font-size 1em = 10px */
 }
 p {
 font-size: 1.2em; /* 1.2em = 12px */
 }

10. 3D текст при помощи CSS3

Используя свойства тени, вы сможете легко создать 3D текст с помощью только CSS.

p.threeD
 {
 text-shadow:
 -1px 1px 0 #ddd,
 -2px 2px 0 #c8c8c8,
 -3px 3px 0 #ccc,
 -4px 4px 0 #b8b8b8,
 -4px 4px 0 #bbb,
 0px 1px 1px rgba(0,0,0,.4),
 0px 2px 2px rgba(0,0,0,.3),
 -1px 3px 3px rgba(0,0,0,.2),
 -1px 5px 5px rgba(0,0,0,.1),
 -2px 8px 8px rgba(0,0,0,.1),
 -2px 13px 13px rgba(0,0,0,.1)
 ;
 }

Смотрите демонстрацию

11. Перенос длинных URL-адресов и текстового содержимого

Этот прием обрежет длинные строки текста,  сохранив при этом все нужные элементы на своих местах

pre {
 white-space: pre;           /* CSS 2.0 */
 white-space: pre-wrap;      /* CSS 2.1 */
 white-space: pre-line;      /* CSS 3.0 */
 white-space: -pre-wrap;     /* Opera 4-6 */
 white-space: -o-pre-wrap;   /* Opera 7 */
 white-space: -moz-pre-wrap; /* Mozilla */
 white-space: -hp-pre-wrap;  /* HP Printers */
 word-wrap: break-word;      /* IE 5+ */
 }

Смотрите демонстрацию

12. Выделите цитаты

Сделайте цитаты запоминающимися, переместив их вправо или влево.

.pullquote {
 width: 300px;
float: right;
 margin: 5px;
font-family: Georgia, «Times New Roman», Times, serif;
 font: italic bold #ff0000 ; }

13. CSS3 -прозрачность

Используя свойство прозрачности, можно создать многослойную текстуру фона.

div.L1 { background:#036; opacity:0.2; height:20px; }
 div.L2 { background:#036; opacity:0.4; height:20px; }
 div.L3 { background:#036; opacity:0.6; height:20px; }
 div.L4 { background:#036; opacity:0.8; height:20px; }
 div.L5 { background:#036; opacity:1.0; height:20px; }

14. Выделите ссылки, которые открываются в новом окне

Этот код позволяет легко различать ссылки, которые открываются в новом окне браузера.

a[]:before,
 a[]:before {
 margin:0 5px 0 0;
 padding:1px;
 outline:1px solid #333;
 color:#333;
 background:#ff9;
 font:12px "Zapf Dingbats";
 content: "\279C";
 }

15. @ font-face

Кросс-браузерный CSS-код, который позволяет подключить любой шрифт.

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

16. Повернуть изображение

Код CSS, который позволяет переворачивать изображение. Это особенно полезно, если вы хотите, чтобы перевернуть значки, например стрелки.

img {
 -moz-transform: scaleX(-1);
 -o-transform: scaleX(-1);
 -webkit-transform: scaleX(-1);
 transform: scaleX(-1);
 filter: FlipH;
 -ms-filter: "FlipH";
 }

17. Красивые Цитаты

Аккуратный способ украсить ваши цитаты, чтобы добавить им немного оригинальный стиль и сделать их запоминающимися.

blockquote {
 background:#f9f9f9;
 border-left:10px solid #ccc;
 margin:1.5em 10px;
 padding:.5em 10px;
 quotes:"\201C"«\201D»"\2018"«\2019»;
 }
 blockquote:before {
 color:#ccc;
 content:open-quote;
 font-size:4em;
 line-height:.1em;
 margin-right:.25em;
 vertical-align:-.4em;
 }
 blockquote p {
 display:inline;
 }

18. CSS-хаки для браузеров

Большой список хаков для  браузеров, которые помогут убедиться, что ваш веб-сайт выглядит нормально во всех браузерах.

/***** Selector Hacks ******/
 /* IE6 and below */
 * html #uno  { color: red }
 /* IE7 */
 *:first-child+html #dos { color: red }
 /* IE7, FF, Saf, Opera  */
 html>body #tres { color: red }
 /* IE8, FF, Saf, Opera (Everything but IE 6,7) */
 html>/**/body #cuatro { color: red }
 /* Opera 9.27 and below, safari 2 */
 html:first-child #cinco { color: red }
 /* Safari 2-3 */
 html[xmlns*=""] body:last-child #seis { color: red }
 /* safari 3+, chrome 1+, opera9+, ff 3.5+ */
 body:nth-of-type(1) #siete { color: red }
 /* safari 3+, chrome 1+, opera9+, ff 3.5+ */
 body:first-of-type #ocho {  color: red }
 /* saf3+, chrome1+ */
 @media screen and (-webkit-min-device-pixel-ratio:0) {
 #diez  { color: red  }
 }
 /* iPhone / mobile webkit */
 @media screen and (max-device-width: 480px) {
 #veintiseis { color: red  }
 }
 /* Safari 2 - 3.1 */
 html[xmlns*=""]:root #trece  { color: red  }
 /* Safari 2 - 3.1, Opera 9.25 */
 *|html[xmlns*=""] #catorce { color: red  }
 /* Everything but IE6-8 */
 :root *> #quince { color: red  }
 /* IE7 */
 *+html #dieciocho {  color: red }
 /* Firefox only. 1+ */
 #veinticuatro,  x:-moz-any-link  { color: red }
 /* Firefox 3.0+ */
 #veinticinco,  x:-moz-any-link, x:default  { color: red  }
 /* FF 3.5+ */
 body:not(:-moz-handler-blocked) #cuarenta { color: red; }
 /***** Attribute Hacks ******/
 /* IE6 */
 #once { _color: blue }
 /* IE6, IE7 */
 #doce { *color: blue; /* or #color: blue */ }
 /* Everything but IE6 */
 #diecisiete { color/**/: blue }
 /* IE6, IE7, IE8 */
 #diecinueve { color: blue\9; }
 /* IE7, IE8 */
 #veinte { color/*\**/: blue\9; }
 /* IE6, IE7 -- acts as an !important */
 #veintesiete { color: blue !ie; } /* string after ! can be anything */
 /* IE8, IE9 */
 #anotherone  {color: blue\0/;} /* must go at the END of all rules */

19. Изменяем цвет выделения для текста

Измените цвет выделенного текста, добавив следующие стили:

::selection {
 background: #ffb7b7; /* Safari */
 color: #ffffff;
 }
 ::-moz-selection {
 background: #ffb7b7; /* Firefox */
 color: #ffffff;
 }

20. Несколько фоновых изображений

С помощью этого кода можно добавить нескольких фоновых изображений .

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

Мы надеемся, что вам понравился наш  пост, и  вы  нашли здесь что-то полезное для себя. Если Вы знаете о любых других полезных приёмах CSS, которые вы часто используете, пожалуйста, поделитесь ими с нами в комментариях.

Больше css-сниппетов вы можете найти на сайте snipplr

По материалам  noupe