От автора: так много новых направлений, усовершенствуется каждый год, что совсем нелегко поспевать за индустрией. Дизайнеры вебсайтов и разработчики пользовательских интерфейсов глубоко прониклись новейшими свойствами CSS3, устанавливая максимальную браузерную поддержку и находя необычные хаки. Но все еще существуют не получившие должного внимания великолепные фрагменты кода CSS2.
В данной статье я хочу представить вам 50 полезных любому веб-профессионалу отрывков кода CSS2/CSS3. Они идеально подходят для хранения в предпочитаемой вами интегрированной среде разработки IDE, или даже в небольшом файле CSS. Так или иначе, я уверен, что дизайнеры и разработчики смогут найти применение некоторым фрагментам из этой подборки.
1. CSS Reset
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
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; outline: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html { height: 101%; } body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, sans-serif; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } strong { font-weight: bold; } table { border-collapse: collapse; border-spacing: 0; } img { border: 0; max-width: 100%; } p { font-size: 1.2em; line-height: 1.0em; color: #333; } |
Базовые браузерные сбросы CSS – из тех самых простых фрагментов кода, которые можно отыскать онлайн. Это – мой собственный пользовательский отрывок, основанный на кодах Эрика Майера (Eric Meyer). Я включил немного кода для адаптивных изображений и установил все центральные элементы на border-box, что позволяет соответственно выровнять размеры полей и отступов.
2. Классический CSS Clearfix
|
1 2 3 4 5 |
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clearfix { display: inline-block; } html[xmlns] .clearfix { display: block; } * html .clearfix { height: 1%; } |
Данный код clearfix годами вращался в Сети в среде самых находчивых веб-разработчиков. Вам требуется применить этот класс к контейнеру, содержащему «плавающие» элементы. Так гарантируется, что любой последующий контент не станет свободно перемещаться, а будет помещен в стек и сброшен.
3. Обновленный в 2011г. Clearfix
|
1 2 3 4 5 |
.clearfix:before, .container:after { content: ""; display: table; } .clearfix:after { clear: both; } /* IE 6/7 */ .clearfix { zoom: 1; } |
Насколько я знаю, существенной разницы в визуализации между более новой и классической версией нет. Оба этих класса эффективно очищают плавающие элементы, а также обязаны работать во всех современных браузерах и даже устаревшем Internet Explorer 6-8.
4. Кроссбраузерная прозрачность
|
1 2 3 4 5 6 |
.transparent { filter: alpha(opacity=50); /* internet explorer */ -khtml-opacity: 0.5; /* khtml, old safari */ -moz-opacity: 0.5; /* mozilla, netscape */ opacity: 0.5; /* fx, safari, opera */ } |
Некоторые новые свойства CSS3 способствовали мнению о том, что их можно применять где угодно. К несчастью, непрозрачность – один из примеров, где CSS все еще требует некоторой незначительной доработки. Добавление свойства filter должно изящно управиться с любой более старой версией IE.
5. Шаблон CSS Blockquote
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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; } |
Блочные цитаты на своем вебсайте нужны не каждому. Но я полагаю, что они – великолепный элемент HTML для выделения цитат или повторяющегося содержимого внутри блогов или веб-страниц. Этот базовый отрывок CSS предлагает блочным цитатам стиль по умолчанию, и они, таким образом, не кажутся тусклыми и примитивными.
6. Персональные закругленные углы
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
#container { -webkit-border-radius: 4px 3px 6px 10px; -moz-border-radius: 4px 3px 6px 10px; -o-border-radius: 4px 3px 6px 10px; border-radius: 4px 3px 6px 10px; } /* альтернативный синтаксис введен в каждую строку */ #container { -webkit-border-top-left-radius: 4px; -webkit-border-top-right-radius: 3px; -webkit-border-bottom-right-radius: 6px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 6px; -moz-border-radius-bottomleft: 10px; } |
Большинство разработчиков знакомы с синтаксисом закругленных углов CSS3. А как вам нравится назначение для каждого угла разных значений? Сохраните этот кодовый фрагмент и никогда больше не столкнетесь с этой проблемой! Я включил как сжатую версию, так и более длинную базовую, где каждый радиус угла разделяется на разное свойство.
7. Общие медизапросы
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
/* Смартфоны (книжная и альбомная ориентация) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Стили */ } /* Смартфоны (альбомная ориентация) ----------- */ @media only screen and (min-width : 321px) { /* Стили */ } /* Смартфоны (книжная ориентация) ----------- */ @media only screen and (max-width : 320px) { /* Стили */ } /* iPad’ы (книжная и альбомная ориентация) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Стили */ } /* iPad’ы (альбомная ориентация) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Стили */ } /* iPad’ы (книжная ориентация) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Стили */ } /* Десктопы и лэптопы ----------- */ @media only screen and (min-width : 1224px) { /* Стили */ } /* Большие экраны ----------- */ @media only screen and (min-width : 1824px) { /* Стили */ } /* iPhone 4 ----------- */ @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) { /* Стили */ } |
Этот великолепный шаблон можно найти на CSS-Tricks среди прочих фрагментов медиазапросов. Однако я скопировал их пример полностью, что включает множество реальных мобильных устройств. Эти коды предназначены даже для устройств на основе retina, использующих min-device-pixel-ratio.
8. Современные архивы шрифтов
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
/* serif на базе шрифта Times New Roman */ font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif; /* Современный serif на базе шрифта Georgia */ font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif; /*Более традиционный serif на базе шрифта Garamond */ font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif; /*sans serif на базе шрифта Helvetica/Arial */ font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; /*sans serif на базе шрифта Verdana */ font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif; /*sans serif на базе шрифта Trebuchet */ font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif; /*Более «тяжеловесный» sans serif */ font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif; /*Равноширинный шрифт */ font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace; |
Тяжело отыскать среди собственных шрифтовых архивов CSS идею для создания новых веб-страниц. Надеюсь, этот фрагмент сможет облегчить страдания и подкинуть вам для начала несколько шаблонов. Если нужны еще примеры, поищите на CSS Font Stacks, одном из моих любимых ресурсов.
9. Традиционное выделение текста
|
1 2 3 |
::selection { background: #e2eae2; } ::-moz-selection { background: #e2eae2; } ::-webkit-selection { background: #e2eae2; } |
Некоторые новые веб-браузеры на своей странице позволяют вам назначать цвет выделения. По умолчанию он установлен на голубой, но можно выбрать любое значение цвета согласно собственной фантазии. Этот кодовый отрывок включает традиционный ::selection наряду с вендорными префиксами для Webkit’а и Mozilla.
10. Замена текста H1 логотипом
|
1 2 3 4 5 6 7 |
h1 { text-indent: -9999px; margin: 0 auto; width: 320px; height: 85px; background: transparent url("images/logo.png") no-repeat scroll; } |
Впервые я обратил внимание на эту методику, когда та была применена в старой разметке на Digg. Вы можете установить тэг H1, в котором, кроме прочего, для SEO есть название вашего вебсайта в открытом тексте. Но, применив CSS, можно переместить этот текст так, чтобы тот не был виден, и заменить его на обычное изображение-логотип.
11. Polaroid Image Border
|
1 2 3 4 5 6 7 8 9 10 |
img.polaroid { background:#000; /*Смените его на фоновое изображение или удалите*/ border:solid #fff; border-width:6px 6px 20px 6px; box-shadow:1px 1px 5px #333; /* Стандартное размытие на 5px. Для пущей глубины увеличьте его */ -webkit-box-shadow:1px 1px 5px #333; -moz-box-shadow:1px 1px 5px #333; height:200px; /* Установите на высоту своего изображения или нужного div’а*/ width:200px; /* Установите на ширину своего изображения или нужного div’а */ } |
Применение этого простого фрагмента позволит вам применить к своим изображениям классы .polaroid. Так получается эффект старинной фотографии с широкой белой рамкой и легкими тенями блока. Вам понадобится изменить значения ширины/высоты, чтобы те соответствовали размерам вашего изображения и разметке вебсайта.
12. Псевдоклассы для ссылок
|
1 2 3 4 |
a:link { color: blue; } a:visited { color: purple; } a:hover { color: red; } a:active { color: yellow; } |
Большинство разработчиков CSS знают о стилях ссылок и эффектах :hover. Но я хотел бы включить этот небольшой фрагмент в качестве справки для новичков. У ссылки есть четыре состояния по умолчанию, а также несколько других элементов HTML. Держите этот отрывок под рукой, пока не запомните самые малоизвестные из них.
13. Необычные цитаты CSS3
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
.has-pullquote:before { /* Сбросьте показатели. */ padding: 0; border: none; /* Содержимое */ content: attr(data-pullquote); /* Вынесение вправо, модульные поля на основе масштаба. */ float: rightright; width: 320px; margin: 12px -140px 24px 36px; /* Коррекция базовой линии */ position: relative; top: 5px; /* Типографская разметка (высота линии в 30px равняется 25% пошагового межстрочного интервала) */ font-size: 23px; line-height: 30px; } .pullquote-adelle:before { font-family: "adelle-1", "adelle-2"; font-weight: 100; top: 10px !important; } .pullquote-helvetica:before { font-family: "Helvetica Neue", Arial, sans-serif; font-weight: bold; top: 7px !important; } .pullquote-facit:before { font-family: "facitweb-1", "facitweb-2", Helvetica, Arial, sans-serif; font-weight: bold; top: 7px !important; } |
Цитаты pullquote отличаются от блочных цитат blockquote тем, что извлекаются из блога или новостной статьи. Они часто ссылаются на цитируемый текст из статьи, и поэтому слегка отличаются от блочных цитат. У этого класса есть несколько основных свойств по умолчанию наряду с тремя уникальными семействами шрифтов.
14. Полноэкранные фоны при помощи CSS3
|
1 2 3 4 5 6 7 |
html { background: url('images/bg.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } |
Должен отметить, что этот код не будет нормально работать в старых браузерах, не поддерживающих синтаксис CSS3. Однако если требуется быстрое решение, а вы не беспокоитесь о поддержке старых браузеров, то это самый лучших фрагмент кода, который только можно найти! Отлично подходит для добавления в фон вашего вебсайта больших фотографий, при этом сохраняет их размер и фиксирование при прокрутке.
15. Вертикально центрированное содержимое
|
1 2 3 4 5 |
.container { min-height: 6.5em; display: table-cell; vertical-align: middle; } |
Применив автоматическую технику margin: 0 auto, можно легко вставить содержимое в центр своей страницы по горизонтали. Однако вертикальный контент поддерживать гораздо труднее, особенно принимая во внимание полосы прокрутки и прочее. Но это чистое CSS-решение, которое будет безупречно работать и без JavaScript’а.
16. Примените вертикальные полосы прокрутки
|
1 |
html { height: 101% } |
Когда содержимое страницы не заполняет всю высоту окна браузера, никакие полосы прокрутки вам не нужны. Однако изменение его размеров заставит их появиться и добавить лишние 10-15 px к ширине окна, вытесняя контент страницы. Данный отрывок кода гарантирует, что элемент HTML всегда окажется чуть выше браузера, что заставит полосы прокрутки оставаться на месте.
17. Шаблон градиентов CSS3
|
1 2 3 4 5 6 7 8 9 |
#colorbox { background: #629721; background-image: -webkit-gradient(linear, left top, left bottom, from(#83b842), to(#629721)); background-image: -webkit-linear-gradient(top, #83b842, #629721); background-image: -moz-linear-gradient(top, #83b842, #629721); background-image: -ms-linear-gradient(top, #83b842, #629721); background-image: -o-linear-gradient(top, #83b842, #629721); background-image: linear-gradient(top, #83b842, #629721); } |
Градиенты CSS3 – еще одна поразительная область новых спецификаций. Многие вендорные префиксы трудно запомнить, так что этот фрагмент кода обязан сэкономить вам немного времени каждого проекта.
18. Шаблон @Font-Face
|
1 2 3 4 5 6 7 8 9 10 11 12 |
@font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* Режимы, совместимые с IE9 */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff') format('woff'), /* Современные браузеры */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Устаревший iOS */ } body { font-family: 'MyWebFont', Arial, sans-serif; } |
Вот еще один кусочек кода CSS3, который нелегко запоминается. С помощью @font-face можно внедрить в вебсайт свои собственные файлы TTF/OTF/SVG/WOFF и сгенерировать пользовательские семейства шрифтов. Применяйте в будущем этот шаблон на своих проектах в качестве основного примера.
19. Связанные элементы CSS3
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
p { position:relative; z-index:1; padding: 10px; margin: 10px; font-size: 21px; line-height: 1.3em; color: #fff; background: #ff0030; -webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5); -moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5); box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10,10,0,.5); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } p:before { content: ""; position: absolute; z-index: -1; top: 3px; bottom: 3px; left :3px; right: 3px; border: 2px dashed #fff; } p a { color: #fff; text-decoration:none; } p a:hover, p a:focus, p a:active { text-decoration:underline; } |
20. Черно-белые полосы в CSS3
|
1 2 3 |
tbody tr:nth-child(odd) { background-color: #ccc; } |
Возможно, лучше всего применить черно-белые полосы в таблице данных. При просмотре 40 или 50 строк пользователю сложно точно определить, какая ячейка в каком ряду находится. Применив черно-белые полосы по умолчанию, можно определить нечетные строки с разными цветам фона.
21. Необычный амперсанд &
|
1 2 3 4 5 |
.amp { font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif; font-style: italic; font-weight: normal; } |
Этот класс будет применен к одному элементу, обернутому вокруг символа амперсанда в содержимом страницы. Для выделения знака & он возьмет классические шрифты serif и курсив. Опробуйте этот код на демо-странице и посмотрите, понравится ли вам дизайн.
22. Абзацы с «фонарем»
|
1 2 3 4 5 6 7 8 |
p:first-letter{ display: block; margin: 5px 0 0 5px; float: left; color: #ff3366; font-size: 5.4em; font-family: Georgia, Times New Roman, serif; } |
Обычно врезанные в текст буквы вы видите в печатной среде, такой как газеты и книги. Тем не менее, этот эффект весьма изящно смотрится на веб-странице или в блоге, где в разметке достаточно места. Это правило CSS применяется ко всем абзацам, но на основе отдельного класса или ID его употребление можно ограничить.
23. Внутренняя тень блока CSS3
|
1 2 3 4 5 |
#mydiv { -moz-box-shadow: inset 2px 0 4px #000; -webkit-box-shadow: inset 2px 0 4px #000; box-shadow: inset 2px 0 4px #000; } |
Свойство box-shadow внесло огромные изменения в наши методы построения вебсайтов. Тени блока можно нарисовать почти в каждом элементе, и все они обычно отлично выглядят. Этот фрагмент кода относится к внутренней тени, создать которую гораздо труднее, но иногда она выглядит просто безупречно.
24. Внешняя тень блока CSS3
|
1 2 3 4 5 |
#mydiv { -webkit-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52); -moz-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52); box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52); } |
Помимо внутренних теней CSS3 я также хочу представить код внешней тени. Обратите внимание, что третье число в нашем синтаксисе представляет расстояние до размытия, тогда как четвертое – его ширину. Узнать больше об этих значениях можно на W3Schools.
25. Треугольные маркеры списка
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
ul { margin: 0.75em 0; padding: 0 1em; list-style: none; } li:before { content: ""; border-color: transparent #111; border-style: solid; border-width: 0.35em 0 0.35em 0.45em; display: block; height: 0; width: 0; left: -1em; top: 0.9em; position: relative; } |
Верите или нет, но с применением одного лишь CSS3 действительно возможно сгенерировать маркеры треугольной формы. Это классная методика, которая смотрится потрясающе в уважаемых браузерах. Единственное возможное препятствие – отсутствие поддержки альтернативных методов.
26. Фиксированная ширина центрированной разметки
|
1 2 3 4 |
#page-wrap { width: 800px; margin: 0 auto; } |
Я знаю, ранее уже упоминалось о том, как установить горизонтальное позиционирование. Хочу вернуться обратно к короткому фрагменту кода горизонтального позиционирования, который идеально применим к разметкам с фиксированной шириной.
27. Текст в колонках CSS3
|
1 2 3 4 5 6 7 8 9 |
#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; } |
В разметке вебсайтов колонки CSS3 смотрятся хорошо, но как разделить текст на основе стилей колонок? Применяйте этот фрагмент для размещения любого количества колонок, встраиваемых в абзацы, где текст будет равномерно распределен на базе номера колонки.
28. Фиксированный нижний колонтитул CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
#footer { position: fixed; left: 0px; bottom: 0px; height: 30px; width: 100%; background: #444; } /* 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'); } |
В реальности это гораздо удобнее, чем кажется, а применить к вебсайту фиксированный нижний колонтитул довольно просто. Такие колонтитулы прокручиваются вместе с пользователем и могут содержать полезную информацию о вашем сайте или контактные детали. В идеале применять его нужно лишь в тех случаях, когда он действительно добавляет веса пользовательскому интерфейсу.
29. Решение проблемы прозрачности PNG в IE6
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.bg { width:200px; height:100px; background: url(/folder/yourimage.png) no-repeat; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='/folder/yourimage.png',sizingMethod='crop'); } /* метод 1px gif */ img, .png { position: relative; behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none", this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')", this.src = "images/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace ('url("','').replace('")',''), this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')", this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)); } |
Использование внутри вебсайтов прозрачных изображений стало обычным делом. Оно началось с gif-изображений, но развилось до alpha-прозрачных PNG’ов. К сожалению, более старые версии Internet Explorer никогда не поддерживали прозрачность. Решить эту проблему должно добавление этого короткого фрагмента CSS.
30. Кроссбраузерная минимальная высота
|
1 2 3 4 5 |
#container { min-height: 550px; height: auto !important; height: 550px; } |
Разработчики, которым пришлось работать с min-height, знают все о его ненадежной поддержке. С ней идеально справляются многие новые браузеры, однако Internet Explorer и старые версии Firefox испытывают реальные затруднения. Этот набор кода должен гарантировать исправление всех связанных с ней багов.
31. Подсветка input-ов CSS3
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
input[type=text], textarea { -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; outline: none; padding: 3px 0px 3px 3px; margin: 5px 1px 3px 0px; border: 1px solid #ddd; } input[type=text]:focus, textarea:focus { box-shadow: 0 0 5px rgba(81, 203, 238, 1); padding: 3px 0px 3px 3px; margin: 5px 1px 3px 0px; border: 1px solid rgba(81, 203, 238, 1); } |
Мне действительно нравится этот базовый пользовательский класс CSS3 за то, как он переписывает поведение браузера по умолчанию. О раздражающих очертаниях input-ов пользователи Chrome и Safari знают все. Добавление этих свойств в свою таблицу стилей определит новый вид основных элементов input.
32. Стили ссылок на основе идентификатора типа файла
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/* внешние ссылки */ a[href^="//"] { padding-right: 13px; background: url('external.gif') no-repeat center rightright; } /* адреса электронной почты */ a[href^="mailto:"] { padding-right: 20px; background: url('email.png') no-repeat center rightright; } /* pdf */ a[href$=".pdf"] { padding-right: 18px; background: url('acrobat.png') no-repeat center rightright; } |
Довольно малоизвестный клочок CSS, но я люблю его за креативность! С помощью селекторов CSS вы можете определить тип файла своих ссылок и выполнить иконки как фоновые изображения. Они могут включать различные протоколы (HTTP, FTP, IRC, mailto) или просто сами типы файлов (mp3, avi, pdf).
33. Внедрение оборачивания кода
|
1 2 3 4 5 6 7 |
pre { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } |
Обычные тэги pre применяются для отображения больших порций кода в разметке. Это – предварительно форматированный текст типа того, что можно видеть в Notepad или Textedit, за исключением того, что вы часто будете замечать, как длинные строки производят полосы прокрутки по горизонтали. Эта группа CSS заставит все тэги pre оборачивать код, а не вылезать за пределы контейнера.
34. Указывающий курсор над теми элементами, которые можно щелкнуть
|
1 2 3 |
a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer { cursor: pointer; } |
Существует множество элементов HTML, на которые по умолчанию можно щелкать, и которые не всегда отображают иконку указателя-«руки». С помощью этого набора селекторов CSS можно, использовав класс .pointer, внедрить применение указателя к большому количеству ключевых элементов наряду с любыми прочими объектами.
35. Тень блока для страницы
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
body:before { content: ""; position: fixed; top: -10px; left: 0; width: 100%; height: 10px; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8); -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8); box-shadow: 0px 0px 10px rgba(0,0,0,.8); z-index: 100; } |
Она может не показаться полезной разработчикам, кроме некоторого эстетического момента. Но мне этот эффект действительно нравится, и он определенно уникален! Просто примените этот код CSS к элементу body и сверху веб-страницы у вас будет отражаться темная ниспадающая тень.
36. «Облако» с текстом CSS3
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
.chat-bubble { background-color: #ededed; border: 2px solid #666; font-size: 35px; line-height: 1.3em; margin: 10px auto; padding: 10px; position: relative; text-align: center; width: 300px; -moz-border-radius: 20px; -webkit-border-radius: 20px; -moz-box-shadow: 0 0 5px #888; -webkit-box-shadow: 0 0 5px #888; font-family: 'Bangers', arial, serif; } .chat-bubble-arrow-border { border-color: #666 transparent transparent transparent; border-style: solid; border-width: 20px; height: 0; width: 0; position: absolute; bottom: -42px; left: 30px; } .chat-bubble-arrow { border-color: #ededed transparent transparent transparent; border-style: solid; border-width: 20px; height: 0; width: 0; position: absolute; bottom: -39px; left: 30px; } |
При обсуждении применения облаков с текстом на ум приходит множество идей пользовательского интерфейса. Они удобны для комментариев в споре, создании досок объявлений или отображении цитируемого текста. Просто добавьте следующие классы в свою таблицу стилей.
37. Заголовки по умолчанию H1-H5
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
h1,h2,h3,h4,h5{ color: #005a9c; } h1{ font-size: 2.6em; line-height: 2.45em; } h2{ font-size: 2.1em; line-height: 1.9em; } h3{ font-size: 1.8em; line-height: 1.65em; } h4{ font-size: 1.65em; line-height: 1.4em; } h5{ font-size: 1.4em; line-height: 1.25em; } |
Я предложил вам много простого синтаксиса, включая сброс CSS и несколько перезагрузок элементов HTML. Этот шаблон включает стили по умолчанию всех основных элементов заголовка по порядку от H1 до H5. Вы также можете решить добавить H6, но я никогда не видел вебсайта, в котором бы применялись все шесть вложенных заголовков.
38. Фоновый шум из чистого CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
body { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAA 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 bgAAAABJRU5ErkJggg==); background-color: #0094d0; } |
Дизайнеры долгое время отмечали в вебсайтах применение этого эффекта, хотя обычно применяется повтор мозаичных изображений с alpha-прозрачностью. Однако для создания совершенно новых изображений можно ввести в CSS код Base64. Тот же случай, как в вышеприведенном отрывке, когда над фоном body генерируется небольшая шумовая текстура, или же можно создать пользовательский шумовой фон на NoiseTextureGenerator.
39. Упорядочение бесконечного списка
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
ol.chapters { list-style: none; margin-left: 0; } ol.chapters > li:before { content: counter(chapter) ". "; counter-increment: chapter; font-weight: bold; float: left; width: 40px; } ol.chapters li { clear: left; } ol.start { counter-reset: chapter; } ol.continue { counter-reset: chapter 11; } |
Думаю, это не суперпопулярный фрагмент, но он имеет своих поклонников среди разработчиков. Могут возникнуть ситуации, когда вам понадобится продолжить список элементов, но разделить его на два отдельных элемента UL. Рассмотрите вышеприведенный код – в нем имеется удивительное решение исключительно на основе CSS.
40. Всплывающие подсказки CSS при проведении мышью
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
a { border-bottom:1px solid #bbb; color:#666; display:inline-block; position:relative; text-decoration:none; } a:hover, a:focus { color:#36c; } a:active { top:1px; } /* Стили всплывающих подсказок */ a[data-tooltip]:after { border-top: 8px solid #222; border-top: 8px solid hsla(0,0%,0%,.85); border-left: 8px solid transparent; border-right: 8px solid transparent; content: ""; display: none; height: 0; width: 0; left: 25%; position: absolute; } a[data-tooltip]:before { background: #222; background: hsla(0,0%,0%,.85); color: #f6f6f6; content: attr(data-tooltip); display: none; font-family: sans-serif; font-size: 14px; height: 32px; left: 0; line-height: 32px; padding: 0 15px; position: absolute; text-shadow: 0 1px 1px hsla(0,0%,0%,1); white-space: nowrap; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } a[data-tooltip]:hover:after { display: block; top: -9px; } a[data-tooltip]:hover:before { display: block; top: -41px; } a[data-tooltip]:active:after { top: -10px; } a[data-tooltip]:active:before { top: -42px; } |
На вебсайтах применяется множество всплывающих подсказок с открытым исходным кодом на основе jQuery. Но всплывающие подсказки на основе CSS очень редки, и это – один из моих любимых фрагментов. Просто скопируйте его в свою таблицу стилей, и с помощью новых атрибутов данных HTML5 можно установить текст всплывающей подсказки через data-tooltip.
41. Темно-серые закругленные кнопки
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
.graybtn { -moz-box-shadow:inset 0px 1px 0px 0px #ffffff; -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff; box-shadow:inset 0px 1px 0px 0px #ffffff; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #d1d1d1) ); background:-moz-linear-gradient( center top, #ffffff 5%, #d1d1d1 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d1d1d1'); background-color:#ffffff; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; border:1px solid #dcdcdc; display:inline-block; color:#777777; font-family:arial; font-size:15px; font-weight:bold; padding:6px 24px; text-decoration:none; text-shadow:1px 1px 0px #ffffff; } .graybtn:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d1d1d1), color-stop(1, #ffffff) ); background:-moz-linear-gradient( center top, #d1d1d1 5%, #ffffff 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d1d1d1', endColorstr='#ffffff'); background-color:#d1d1d1; } .graybtn:active { position:relative; top:1px; } |
В качестве еще одного полезного для веб-разработчиков шаблона я включил этот простейший класс кнопок CSS3. Я применяю соответствующее цвету имя класса .graybtn, но не говорю, что вы не сможете изменить стили на более подходящие для вашего вебсайта. Чтобы подобрать похожие оттенки в различных цветовых диапазонах, сверьтесь со значениями цветового круга.
42. Отобразите на распечатанной веб-странице URL’ы
|
1 2 3 4 5 |
@media print { a:after { content: " [" attr(href) "] "; } } |
Если вы занимаетесь новостным сайтом или ресурсом с большим количеством материала для печати, возможно, это один из самых великолепных фрагментов кода, какой вы только сможете отыскать. Ссылки вашей страницы будут выглядеть и отображаться в точности как обычно. Однако при распечатывании ваши пользователи смогут видеть текст ссылки вместе с полным URL’ом гиперссылки. Это удобно, когда посетителю нужно получить доступ к странице, на которую вы ссылаетесь, но он не может видеть URL в обычном печатном документе.
43. Отключите в мобильной версии Webkit подсветку
|
1 2 3 4 5 6 7 8 |
body { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } |
В зависимости от опыта вашей работы с мобильными устройствами этот кусок кода может не оказаться очень полезным. Но при получении доступа к мобильным вебсайтам в Safari и прочих браузерных движках на базе Webkit вы заметите, что при касании элемента его окружает серый блок. Просто примените к своему вебсайту эти стили, и он должен удалить все исходные подсветки мобильного браузера.
44. Узор CSS3 «горошек»
|
1 2 3 4 5 |
body { background: radial-gradient(circle, white 10%, transparent 10%), radial-gradient(circle, white 10%, black 10%) 50px 50px; background-size: 100px 100px; } |
Я был слегка ошарашен, когда впервые обнаружил этот фрагмент кода онлайн. Но это действительно интересный метод генерирования «на лету» шаблонов BG с помощью одного CSS3. По умолчанию я нацелился на элемент body, а вы можете применить его к любому контейнеру div своей страницы.
45. Шаблон узора CSS3 «клетка»
|
1 2 3 4 5 6 7 |
body { background-color: white; background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black); background-size: 100px 100px; background-position: 0 0, 50px 50px; } |
Как в вышеприведенном примере с «горошком», можно создать полностью бесшовный шаблон «шахматной доски». Этот метод требует чуть больше синтаксиса для своей работы, но безупречно смотрится во всех браузерах, поддерживающих CSS3. Также можно сменить значения цвета с черно-белого на любые подходящие к цветовой схеме вашего вебсайта.
46.Ленточка Github
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
.ribbon { background-color: #a00; overflow: hidden; /* верхний левый угол */ position: absolute; left: -3em; top: 2.5em; /* вращение против часовой стрелки на 45 градусов */ -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); /* тень */ -moz-box-shadow: 0 0 1em #888; -webkit-box-shadow: 0 0 1em #888; } .ribbon a { border: 1px solid #faa; color: #fff; display: block; font: bold 81.25% 'Helvetiva Neue', Helvetica, Arial, sans-serif; margin: 0.05em 0 0.075em 0; padding: 0.5em 3.5em; text-align: center; text-decoration: none; /* тень */ text-shadow: 0 0 0.5em #444; } |
Так как я часто пользуюсь Github, этот фрагмент кода просто снес мне крышу. Вы можете быстро создавать на страницах своего сайта угловые ленточки, как на Github, с помощью свойств CSS3 transform. Оно идеально для популярных на Github плагинов с открытым исходным кодом или кодовых блоков. Также отлично подходит для демо-версий HTML/CSS/JS, если у вас активирован Github repo.
47. Сжатые свойства шрифтов CSS
|
1 2 3 |
p { font: italic small-caps bold 1.2em/1.0em Arial, Tahoma, Helvetica; } |
Основная причина, по которой веб-разработчики не всегда применяют сжатые свойства шрифтов, в том, что не каждая установка нужна. Но понимание этой стенографии может сэкономить вам много времени и места в таблицах стилей. Держите этот фрагмент под рукой на случай, если захотите сократить форматирование стилей шрифтов.
48. Эффект загиба бумажной страницы
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
ul.box { position: relative; z-index: 1; /* мешает падению тени за контейнером с фонами */ overflow: hidden; list-style: none; margin: 0; padding: 0; } ul.box li { position: relative; float: left; width: 250px; height: 150px; padding: 0; border: 1px solid #efefef; margin: 0 30px 30px 0; background: #fff; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; } ul.box li:before, ul.box li:after { content: ''; z-index: -1; position: absolute; left: 10px; bottom: 10px; width: 70%; max-width: 300px; /* избегайте вращения, вызывающего при большой ширине контейнера уродливый вид */ max-height: 100px; height: 55%; -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); -webkit-transform: skew(-15deg) rotate(-6deg); -moz-transform: skew(-15deg) rotate(-6deg); -ms-transform: skew(-15deg) rotate(-6deg); -o-transform: skew(-15deg) rotate(-6deg); transform: skew(-15deg) rotate(-6deg); } ul.box li:after { left: auto; right: 10px; -webkit-transform: skew(15deg) rotate(6deg); -moz-transform: skew(15deg) rotate(6deg); -ms-transform: skew(15deg) rotate(6deg); -o-transform: skew(15deg) rotate(6deg); transform: skew(15deg) rotate(6deg); } |
Этот эффект загиба страницы можно применить почти к любому контейнеру, содержащему контент вебсайта. Я тут же подумал о среде изображений и текста с цитатами, но на самом деле это может быть что угодно.
49. Мерцающие ссылки
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
a { color: #00e; } a:visited { color: #551a8b; } a:hover { color: #06e; } a:focus { outline: thin dotted; } a:hover, a:active { outline: 0; } a, a:visited, a:active { text-decoration: none; color: #fff; -webkit-transition: all .3s ease-in-out; } a:hover, .glow { color: #ff0; text-shadow: 0 0 10px #ff0; } |
Текстовые тени CSS3 предлагают уникальный метод создания стилей типографской разметки вашего вебсайта. В особенности этот фрагмент является великолепным источником пользовательских креативных ссылок с эффектом мерцания при проведении мышью. Я сомневаюсь, что его можно элегантно провернуть на большинстве сайтов, но если набраться терпения и красиво его сделать, вы обязательно впечатлите своих посетителей.
50. Особенный демонстрационный баннер CSS3
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
.featureBanner { position: relative; margin: 20px } .featureBanner:before { content: "Featured"; position: absolute; top: 5px; left: -8px; padding-right: 10px; color: #232323; font-weight: bold; height: 0px; border: 15px solid #ffa200; border-right-color: transparent; line-height: 0px; box-shadow: -0px 5px 5px -5px #000; z-index: 1; } .featureBanner:after { content: ""; position: absolute; top: 35px; left: -8px; border: 4px solid #89540c; border-left-color: transparent; border-bottom-color: transparent; } |
Для повторения этого эффекта в других браузерах вам бы понадобилось установить фоновое изображение. Но в поддерживающих CSS3 движках можно сгенерировать динамичные баннеры, свисающие с края оберток контента, и все это без изображений! Они хорошо смотрятся, будучи привешенными к продуктам электронной коммерции, изображениям-миниатюрам, видеопревью или статьям блогов, и это лишь некоторые из идей.
Дополнительно
Вот еще несколько опубликованных ранее статей, способных вас заинтересовать:
Назад к основам CSS: объясняем терминологию (CSS Back to Basics: Terminology Explained)
Заключительные мысли
Язык стилей пользовательского интерфейса вебсайтов дорос до инспектора Всемирной паутины. W3C выпустил общедоступные спецификации HTML5 и CSS3, полагая их языками по умолчанию для конструирования вебсайтов. Как опытные, так и начинающие разработчики должны порадоваться этой подборке и, надеюсь, отыскать для себя полезные фрагменты кода.
Читатели могут скопировать и сохранить любой из этих фрагментов кода без атрибуции. Почти все выпущенные сейчас коды CSS имеют лицензии с открытым исходным кодом и предлагаются бесплатно на основании публикации. Я не говорю, что предлагаю все возможные коды CSS, которые могли бы вам понадобиться, но надеюсь, что очень к этому близок! Если у вас есть идеи или вопросы по поводу этой подборки, не стесняйтесь поделиться с нами внизу в области для комментариев.
Автор: Jake Rocheleau
Источник: //www.hongkiat.com/
Редакция: Команда webformyself.
Комментарии (2)