Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Полезные css-сниппеты

3 мая 2012 | Опубликовано в css | 6 Комментариев »

CSS—простой и понятный язык, но у него также есть подводные камни. Например, иногда решения CSS не работают в некоторых браузерах (например, в Internet Explorer, если кто не знал :-) ).

К счастью, есть большое количество  CSS-снипетов  в интернете, которые помогают решить основные проблемы. В этой статье мы собрали 20  CSS-приёмов, которые могут облегчить вам процесс написания кода.

1. Сброс стилей от Криса Потита

Сброс стилей  CSS  позволяет устранить браузерные отличия. Недостаток стилей для сброса кода от  Криса Proteet в том, что он не работает в IE6.

Reset Default Browser Styles
 - Place first in the listing of external style sheets for cascading.
 - Be sure to explicitly set margin/padding styles.
 - Styles are not reset that have to do with display (block, inline) are not reset.
 By: Chris Poteet & various influences
 */
 * {
vertical-align: baseline;
 font-family: inherit;
 font-style: inherit;
 font-size: 100%;
 border: none;
 padding: 0;
 margin: 0;
 }
 body {
 padding: 5px;
 }
 h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {
 margin: 20px 0;
 }
 li, dd, blockquote {
 margin-left: 40px;
 }
 dt {
 font-weight: bold;
 }
 table {
 border-collapse: collapse;
 border-spacing: 0;
 }

2. Сброс стилей от Эрика Мейера

Сброс стилей от Эрика Мейера является одним из наиболее популярных CSS-снипеттов. Он также используется в  в Blueprint CSS Framework .

/* http://meyerweb.com/eric/tools/css/reset/
 v2.0 | 20110126
 License: none (public domain)
 */
 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;
 }

3. Несколько границ в CSS3

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

box-shadow:
 0 0 0 2px #000,
 0 0 0 3px #999,
 0 0 0 9px #fa0,
 0 0 0 10px #666,
 0 0 0 16px #fd0,
 0 0 0 18px #000;

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

4. Завернутые Уголки

При помощи этого кода CSS можно создать интересный эффект «завёрнутых углов», который используется на странице Gravatar .

div.tucked-corners {
 background: #f6f6f6;
 height: 380px;
 margin: 50px auto;
 padding: 10px;
 position: relative;
 width: 580px;
 -webkit-box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
 -moz-box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
 box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
 }
 span.tucked-corners {
 background: #c4453c;
 display: block;
 height: 380px;
 position: relative;
 width: 580px;
 -webkit-box-shadow: inset 0 0 10px hsla(0,0%,0%,.25);
 -moz-box-shadow: inset 0 0 10px hsla(0,0%,0%,.25);
 box-shadow: inset 0 0 10px hsla(0,0%,0%,.25);
 }
 /* Top Corner Effect */
 .top-corners:after,
 .top-corners:before {
 background: #e6e6e6;
content: ' ';
 height: 50px;
 position: absolute;
 top: -25px;
 width: 100px;
 z-index: 10;
 -webkit-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
 -moz-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
 box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
 }
 .top-corners:after {
 left: -50px;
 -webkit-transform: rotate(-45deg);
 -moz-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 -o-transform: rotate(-45deg);
 transform: rotate(-45deg);
 }
 .top-corners:before {
 right: -50px;
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(45deg);
 }
 /* Bottom Corner Effect */
 .bottom-corners:after,
 .bottom-corners:before {
 background: #e6e6e6;
content: ' ';
 height: 50px;
 position: absolute;
 bottom: -25px;
 width: 100px;
 -webkit-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
 -moz-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
 box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
 }
 .bottom-corners:after {
 left: -50px;
 -webkit-transform: rotate(-135deg);
 -moz-transform: rotate(-135deg);
 -ms-transform: rotate(-135deg);
 -o-transform: rotate(-135deg);
 transform: rotate(-135deg);
 }
 .bottom-corners:before {
 rightright: -50px;
 -webkit-transform: rotate(135deg);
 -moz-transform: rotate(135deg);
 -ms-transform: rotate(135deg);
 -o-transform: rotate(135deg);
 transform: rotate(135deg);
 }

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

5. Стиль ссылок в зависимости от формата файла

Короткий фрагмент CSS, который меняет стиль внешних ссылок для отправки по электронной почте и ссылок для PDF-документов.

   /* external links */
 a[href^="http://"]{
 padding-right: 20px;
background: url(external.gif) no-repeat center right;
 }
 /* emails */
 a[href^="mailto:"]{
 padding-right: 20px;
background: url(email.png) no-repeat center right;
 }
 /* pdfs */
 a[href$=".pdf"]{
 padding-right: 20px;
background: url(pdf.png) no-repeat center right;

6. Буквицы

Кроссбаузерный код, который позволяет выделить  первые буквы абзаца.

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

Это также может быть достигнуто с помощью 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




Комментарии

  1. Xtray
    Thumb up Thumb down 0

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

    На эту тему есть хорошая статья на Хабре: habrahabr.ru/post/139311/

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

    ...

    float: rightright;

    ...

    Опечатка?

    Имхо, к каждому сниппету нехватает описания, в каких браузерах он работает.

    Elena Ответ:

    Thumb up Thumb down 0

    да, опечатка, спасибо, что заметили %) Учтём все пожелания.

  2. Alee
    Thumb up Thumb down 0

    Хорошая статья, спасибо.Нашел для себя пару полезностей)

    Кстати, вопрос не совсем по теме(возник после описания к Сброс стилей от Криса Потита), кто-нибудь еще верстает под IE6??

    Сам всегда делаю кроссбраузерную верстку, но на 6й ие уже давным давно забил, и каких-то проблем в связи с этим еще не возникало ни разу.

    Тем более по последним статистическим данным им пользуется менее 2% пользователей.

    Xtray Ответ:

    Thumb up Thumb down 0

    Увы, но процент ИЕ6 может колебаться в зависимости от тематики сайта... К примеру на сайтах it-тематики, ИЕ6, наверно, вообще не встречается в логах, а на сайтах с какой-нибудь бухгалтерской инфой или что-то типа того, где посетители сами не разбираются в софте, и в штате нет таких спецов — количество машин ИЕ6 может и 20% превышать... Имхо.

    Xtray Ответ:

    Thumb up Thumb down +1

    Нашел хорошую, вроде как, статистику: www.openstat.ru/counter:m...rt/browser/#1807

    Alee Ответ:

    Thumb up Thumb down 0

    именно этой статистикой и пользуюсь)