Главная > CSS/Style Sheets > Полезные CSS-сниппеты для арсенала программистов

Полезные CSS-сниппеты для арсенала программистов


5 марта 2012, 14:20. Разместил: Design FactoRy
CSS – это красивый язык, но он тоже может иногда вводить в ступор. Конкретные CSS-решения могут не работать в определенных браузерах (все сразу подумали о IE), и на исправления подобных ситуаций может уйти достаточное количество времени.

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

Полезные CSS-сниппеты для арсенала программистов

Код

01. Сброс браузерных стилей от Криса Потита (Chris Poteet)

Сброс настроек стилей, по умолчанию выставленных в браузере, позволяет вам избежать различий в генерации одного и того же контента. Хотя данный сниппет от Криса Потита и не будет работать в IE версии 6, мы считаем, что это не страшно, так как данную версию браузера использует лишь 1% интернет-пользователей на территории США.

    /* 

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: baselinebaseline;
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;
}

02. Сброс браузерных стилей от Эрика Майера (Eric Meyer)

Данный сниппет считается одним из самых популярных. Ему даже нашлось применение в 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: baselinebaseline;
}
/* 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;
}

03. Создание двойной границы с помощью CSS3

Отличный метод, в рамках которого за счет параметра box-shadow можно создать иллюзию присутствия второй линии границы.

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;

04. Изогнутые углы

Данный 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 {
rightright: -50px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}

/* Bottom Corner Effect */

.bottombottom-corners:after,
.bottombottom-corners:before {
background: #e6e6e6;
content: '';
height: 50px;
position: absolute;
bottombottom: -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);
}
.bottombottom-corners:after {
left: -50px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.bottombottom-corners:before {
rightright: -50px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}

05. CSS для спецификации iPad

Возможность изменения основной разметки на экранах iPad.

@media only screen and (device-width: 768px) {  
/* For general iPad layouts */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
/* For portrait layouts only */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
/* For landscape layouts only */
}

06. Стилизация ссылки в зависимости от формата файла

Короткий 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;
}

07. Буквица

Отличный кросс-браузерный сниппет, позволяющий создавать эффект буквицы.

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

08. «Липкий» подвал на CSS

Очень полезный код. Такое решение будет работать во всех современных браузерах, включая 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>

09. Техника замены изображения

Отличный способ заменять текст на странице изображением. Сниппет изначально был предложен как решение другой проблемы, в браузере Firefox, так как там была замечена точечная граница, идущая по левой стороне экрана.

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*/
}

10. Конвертация размера текста тела документа в 62,5% для удобной установки размеров в em-формате

Дабы получить более гибкую верстку, специалисты рекомендуют использовать формат em вместо пикселей. Установив размер шрифта на 62,5% вы без труда сможете выставлять размеры в формате em.

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

11. Вертикальное центрирование текста

Если вы выставляете параметр line-height одинаковым с размером его родительского элемента, то вы можете без труда центрировать текст по вертикальному направлению.

div { width:100px; height:100px; }  
div p { line-height:100px; }

12. Создание трехмерного текста при помощи CSS3

Используя параметр text-shadow, вы без труда сможете создать иллюзию трехмерного текста при помощи лишь кода 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)
;
}

13. Оборачиваем длинные URL и большие объемы текста посредством CSS

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

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

14. Забавный знак &

Теперь у вас есть возможность выделить на странице знаки & с помощью данного простенького сниппета. Просто измените font-family на тот, который требуется вам.

.amp {  
font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif;
font-style: italic;
font-weight: normal;
}

15. Выделение цитат для облегчения процесса чтения

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

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

16. Закругленные углы вокруг изображений

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

img {  
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
}

17. Предварительный загрузчик изображений

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

img  
{
background: url(img/preloader.gif) no-repeat 50% 50%;
}

18. Уровень плотности отображения на CSS3

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

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

19. Выделение ссылок, открывающихся в новых окнах

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

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

20. Пуленепробиваемый синтаксис @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');
}

21. Поворот изображений

Данный CSS-сниппет позволит вам поворачивать изображения. Очень полезный эффект, если у вас на странице используются пиктограммы, которые могут быть направлены в разные стороны (например, стрелки).

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

22. Адрес электронной почты в виде изображения

Легкий способ быстрого добавления изображения вместо указанных адресов электронной почты.

a[href^="mailto:"] {  
background: url(images/email.png) no-repeat rightright top;
padding-right:10px;
}

23. Красивые цитатники

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

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

24. Браузерные 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: blue9; }

/* IE7, IE8 */
#veinte { color/***/: blue9; }

/* 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 */

25. Изменяем стандартный цвет выделения текста в блоге

Теперь у вас есть возможность поменять цвет, которым выделяется текст.

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

26. Clearfix

Возможность без труда очищать плавающие элементы за счет создания класса очистки CSS.

.clearfix:after {  
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}

.clearfix { display: inline-block; }

/* start commented backslash hack */
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

27. Скрываем текст логотипа

Подружите ваш логотип с SEO с помощью данного сниппета, предназначенного для тэга H1. Он позволяет вам скрывать текст логотипа на странице, но делает его видимым для поисковых систем.

h1 {  
text-indent:-9999px;
margin:0 auto;
width:400px;
height:100px;
background:transparent url("images/logo.jpg") no-repeat scroll;
}

28. Сброс всех цветов текста и фона

Теперь вы можете сбросить все установленные цвета. Данный сниппет позволят вам быстро и просто вернуть все к черному тексту и белому фону, что позволяет в дальнейшем изменять цвета по собственному усмотрению.

* {  
color: black !important;
background-color: white !important;
background-image: none !important;
}

29. Множественные фоновые изображения

Данный сниппет позволит вам реализовать интересный эффект с множественными фоновыми изображениями.

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

30. Линейная градация

Данный CSS-код позволит вам создать линейную градацию в качестве фона любого элемента. Данный метод работает во всех современных браузерах, хотя возможно и не будет правильно отображен в более ранних версиях IE.

background-image: -webkit-linear-gradient(top, #F0ECE8 0%, #D8D3C8 100%);  
background-image: -moz-linear-gradient( top, #F0ECE8 0%, #D8D3C8 100%);
background-image: -o-linear-gradient( top, #F0ECE8 0%, #D8D3C8 100%);
background-image: linear-gradient( top, #F0ECE8 0%, #D8D3C8 100%);
background-image: -webkit-gradient(linear, left top, left bottombottom, color-stop(0, #F0ECE8), color-stop(1, #D8D3C8) );
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#F0ECE8?, endColorstr=’#D8D3C8?,GradientType=0 );

Надеемся, что вам понравилась наша сегодняшняя подборка, и вы найдете нечто действительно полезное. Возможно, мы упустили что-то интересное. И если у вас на примете есть такие пункты, пожалуйста, поделитесь ими с нами и другими читателями! Спасибо!
Вернуться назад