50 фрагментів CSS корисних кожному дизайнеру

18

Від автора: так багато нових напрямів, вдосконалюється кожен рік, що зовсім нелегко встигати за індустрією. Дизайнери вебсайтів і розробники інтерфейсів глибоко перейнялися новітніми властивостями CSS3, встановлюючи максимальну браузерну підтримку і знаходячи незвичайні хакі. Але усе ще існують не отримали належної уваги чудові фрагменти коду CSS2.

50 фрагментів CSS корисних кожному дизайнеру

У даній статті я хочу представити вам 50 корисних будь-якого веб-професіоналу уривків коду CSS2/CSS3. Вони ідеально підходять для зберігання в обраній вами інтегрованому середовищі розробки IDE, або навіть в невеликому файлі CSS. Так чи інакше, я впевнений, що дизайнери і розробники зможуть знайти застосування деяким фрагментам з цієї збірки.

1. CSS Reset

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, назва, 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.2 em; line-height: 1.0 em; color: #333; }

Базові браузерні скиди CSS – з тих самих простих фрагментів коду, які можна відшукати онлайн. Це – мій власний користувальницький уривок, заснований на кодах Еріка Майєра (Eric Meyer). Я включив трохи коду для адаптивних зображень і встановив всі центральні елементи на border-box, що дозволяє відповідно вирівняти розміри полів і відступів.

2. Класичний CSS Clearfix

.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

.clearfix:before, .container:after { content: «»; display: table; }
.clearfix:after { clear: both; }
/* IE 6/7 */
.clearfix { zoom: 1; }

Наскільки я знаю, суттєвої різниці у візуалізації між більш новою версією класичної немає. Обидва ці класу ефективно очищають плаваючі елементи, а також зобов’язані працювати у всіх сучасних браузерах і навіть застарілому Internet Explorer 6-8.

4. Кросбраузерна прозорість

.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

blockquote {
background: #f9f9f9;
border-left: 10px solid #ccc;
margin: 1.5 em 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. Персональні закруглені кути

#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. Загальні медизапросы

/* Смартфони (книжкова й альбомна орієнтація) ———— */
@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. Сучасні архіви шрифтів

/* 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. Традиційне виділення тексту

::selection { background: #e2eae2; }
::-moz-selection { background: #e2eae2; }
::-webkit-selection { background: #e2eae2; }

Деякі веб-браузери на своїй сторінці дозволяють вам призначати колір виділення. За умовчанням він встановлений на блакитний, але можна вибрати будь-яке значення кольору згідно власної фантазії. Цей кодовий уривок включає традиційний ::selection поряд з вендорными префіксами для Webkit’а і Mozilla.

10. Заміна тексту H1 логотипом

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

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. Псевдокласи для посилань

a:link { color: blue; }
a:visited { color: red; }
a:hover { color: red; }
a:active { color: yellow; }

Більшість розробників CSS знають про стилі посилань і ефекти :hover. Але я хотів би включити цей невеликий фрагмент в якості довідки для новачків. У посилання є чотири стани за замовчуванням, а також кілька інших елементів HTML. Тримайте цей уривок під рукою, поки не запам’ятаєте найбільш відомі з них.

13. Незвичайні цитати CSS3

.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

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. Вертикально центрированное вміст

.container {
min-height: 6.5 em;
display: table cell;
vertical-align: middle;
}

Застосувавши автоматичну техніку margin: 0 auto, можна легко вставити вміст у центр своєї сторінки по горизонталі. Однак вертикальний контент підтримувати набагато важче, особливо беручи до уваги смуги прокрутки та інше. Але це чисте CSS-рішення, яке буде бездоганно працювати і без JavaScript’а.

16. Застосуйте вертикальні смуги прокрутки

html { height: 101% }

Коли вміст сторінки заповнює всю висоту вікна браузера, ніякі смуги прокручування вам не потрібні. Однак зміна його розмірів змусить їх з’явитися і додати зайві 10-15 px до ширини вікна, витісняючи контент сторінки. Даний уривок коду гарантує, що елемент HTML завжди виявиться трохи вище браузера, що змусить смуги прокручування залишатися на місці.

17. Шаблон градієнтів CSS3

#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

@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

p {
position:relative;
z-index:1;
padding: 10px;
margin: 10px;
font-size: 21px;
line-height: 1.3 em;
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

tbody tr:nth-child(odd) {
background-color: #ccc;
}

Можливо, краще всього застосувати чорно-білі смуги в таблиці даних. При перегляді 40 або 50 рядків користувачеві складно точно визначити, яка клітинка в якому ряду знаходиться. Застосувавши чорно-білі смуги за замовчуванням, можна визначити непарні рядки з різними кольорами фону.

21. Незвичайний амперсанда &

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

Цей клас буде застосовано до одного елемента, обернутому навколо символу амперсанда вміст сторінки. Для виділення знаку & він візьме класичні шрифти serif і курсив. Випробуйте цей код на демо-сторінці і подивіться, чи сподобається вам дизайн.

22. Абзаци з «ліхтарем»

p:first-letter{
display: block;
margin: 5px 0 0 5px;
float: left;
color: #ff3366;
font-size: 5.4 em;
font-family: Georgia, Times New Roman, serif;
}

Зазвичай врізані в текст букви ви бачите в друкованій середовищі, такий як газети і книги. Тим не менш, цей ефект досить витончено виглядає на веб-сторінці або в блозі, де в розмітці достатньо місця. Це правило CSS застосовується до всіх абзаців, але на основі окремого класу або ID його вживання можна обмежити.

23. Внутрішня тінь блоку CSS3

#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

#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. Трикутні маркери

ul {
margin: 0.75 em 0;
padding: 0 1em;
list-style: none;
}
li:before {
content: «»;
border-color: transparent #111;
border-style: solid;
border-width: 0.35 em 0 0.35 em 0.45 em;
display: block;
height: 0;
width: 0;
left: -1em;
top: 0.9 em;
position: relative;
}

Вірите чи ні, але із застосуванням одного лише CSS3 дійсно можливо згенерувати маркери трикутної форми. Це класна методика, яка виглядає приголомшливо в шановних браузерах. Єдине можливе перешкода – відсутність підтримки альтернативних методів.

26. Фіксована ширина центрованої розмітки

#page-wrap {
width: 800px;
margin: 0 auto;
}

Я знаю, раніше вже згадувалося про те, як встановити горизонтальне позиціонування. Хочу повернутися назад до короткого фрагмента коду горизонтального позиціонування, який ідеально застосуємо до розмітками з фіксованою шириною.

27. Текст у колонках CSS3

#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

#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

.bg {
width:200px;
height:100px;
background: url(/folder/yourimage.png) no-repeat;
_background:none;
_filter:програми: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.вузла == «IMG» && this.src.toLowerCase().indexOf(‘.png’)>-1?(this.runtimeStyle.backgroundImage = «none»,
this.runtimeStyle.filter = «програми: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 = «програми:DXImageTransform.Microsoft.AlphaImageLoader(src='» + this.origBg + «‘, sizingMethod=’crop’)»,
this.runtimeStyle.backgroundImage = «none»)),this.pngSet=true));
}

Використання всередині вебсайтів прозорих зображень стало звичайною справою. Воно почалося з gif-зображень, але розвинулося до alpha-прозорих PNG’ів. На жаль, більш старі версії Internet Explorer ніколи не підтримували прозорість. Вирішити цю проблему має додавання цього короткого фрагмента CSS.

30. Кросбраузерна мінімальна висота

#container {
min-height: 550px;
height: auto !important;
height: 550px;
}

Розробники, яким довелося працювати з min-height, знають все про його ненадійною підтримки. З нею ідеально справляються багато нові браузери, проте Internet Explorer і старі версії Firefox відчувають реальні труднощі. Цей набір коду повинен гарантувати виправлення всіх пов’язаних з нею багів.

31. Підсвічування input-ів CSS3

input[type=text], textarea {
-webkit-transition: all 0.30 s ease-in-out;
-moz-transition: all 0.30 s ease-in-out;
-ms-transition: all 0.30 s ease-in-out;
-o-transition: all 0.30 s 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. Стилі посилань на основі ідентифікатора типу файлу

/* зовнішні посилання */
a[href^=»http://»] {
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. Впровадження огортання коду

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. Вказує курсор над тими елементами, які можна клацнути

a[href], input[type=’submit’], input[type=’image’], label[for], select, button, .pointer {
cursor: pointer;
}

Існує безліч елементів HTML, на які за замовчуванням можна клацати, і які не завжди відображають іконку покажчика-«руки». За допомогою цього набору CSS селекторів можна, використавши клас .pointer, впровадити застосування покажчика до великої кількості ключових елементів поряд з будь-якими іншими об’єктами.

35. Тінь блоку сторінки

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

.chat-bubble {
background-color: #ededed;
border: 2px solid #666;
font-size: 35px;
line-height: 1.3 em;
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

h1,h2,h3,h4,h5{
color: #005a9c;
}
h1{
font-size: 2.6 em;
line-height: 2.45 em;
}
h2{
font-size: 2.1 em;
line-height: 1.9 em;
}
h3{
font-size: 1.8 em;
line-height: 1.65 em;
}
h4{
font-size: 1.65 em;
line-height: 1.4 em;
}
h5{
font-size: 1.4 em;
line-height: 1.25 em;
}

Я запропонував вам багато простого синтаксису, включаючи скидання CSS і кілька перезавантажень елементів HTML. Цей шаблон включає стилі за замовчуванням до усіх основних елементів заголовка по порядку від H1 до H5. Ви також можете вирішити додати H6, але я ніколи не бачив вебсайту, в якому б застосовувалися всі шість вкладених заголовків.

38. Фоновий шум з чистого CSS

body {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAA
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
bgAAAABJRU5ErkJggg==);
background-color: #0094d0;
}

Дизайнери довгий час відзначали в вебсайтах застосування цього ефекту, хоча зазвичай застосовується повтор мозаїчних зображень з альфа-прозорість. Однак для створення абсолютно нових зображень можна ввести в CSS код Base64. Той же випадок, як у вищенаведеному уривку, коли над фоном body генерується невелика шумова текстура, або ж можна створити користувальницький шумовий фон на NoiseTextureGenerator.

39. Упорядкування нескінченного списку

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 при проведенні мишею

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-color 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-color 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-color 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. Темно-сірі закруглені кнопки

.graybtn {
-moz-box-shadow:inset 1px 0px 0px 0px #ffffff;
-webkit-box-shadow:inset 1px 0px 0px 0px #ffffff;
box-shadow:inset 1px 0px 0px 0px #ffffff;
background:-webkit-gradient( linear, left, top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #d1d1d1) );
background:-moz-linear-gradient( top center, #ffffff 5%, #d1d1d1 100% );
filter:програми: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( top center, #d1d1d1 5%, #ffffff 100% );
filter:програми:DXImageTransform.Microsoft.gradient(startColorstr=’#d1d1d1′, endColorstr=’#ffffff’);
background-color:#d1d1d1;
}
.graybtn:active {
position:relative;
top:1px;
}

В якості ще одного корисного для веб-розробників шаблону я включив цей найпростіший клас кнопок CSS3. Я застосовую відповідає кольору ім’я класу .graybtn, але не кажу, що ви не зможете змінити стилі на більш підходящі для вашого вебсайту. Щоб підібрати схожі відтінки в різних колірних діапазонах, звіртеся зі значеннями колірного кола.

42. Відобразіть на роздрукованій веб-сторінці и ДО

@media print {
after a: {
content: «[» attr(href) «] «;
}
}

Якщо ви займаєтеся новинним сайтом або ресурсом з великою кількістю матеріалу для друку, можливо, це один із самих чудових фрагментів коду, який ви тільки зможете знайти. Посилання вашої сторінки будуть виглядати і відображатися в точності як зазвичай. Однак при роздруку ваші користувачі зможуть бачити текст посилання разом з повним ДО ом гіперпосилання. Це зручно, коли відвідувачу потрібно отримати доступ до сторінки, на яку ви посилаєтеся, але він не може бачити URL в звичайному друкованому документі.

43. Вимкніть в мобільній версії Webkit підсвічування

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 «горошок»

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 «клітка»

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

.ribbon {
background-color: #a00;
overflow: hidden;
/* верхній лівий кут */
position: absolute;
left: -3em;
top: 2.5 em;
/* обертання проти годинникової стрілки на 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.05 em 0 0.075 em 0;
padding: 0.5 em 3.5 em;
text-align: center;
text-decoration: none;
/* тінь */
text-shadow: 0 0 0.5 em #444;
}

Так як я часто користуюся Github, цей фрагмент коду просто зніс мені дах. Ви можете швидко створювати на сторінках свого сайту кутові стрічки, як на Github, з допомогою властивостей CSS3 transform. Воно ідеально для популярних на Github плагінів з відкритим вихідним кодом або кодових блоків. Також відмінно підходить для демо-версій HTML/CSS/JS, якщо у вас активований Github repo.

47. Стислі властивості шрифтів CSS

p {
font: italic small-caps bold 1.2 em/1.0 em Arial, Tahoma, Helvetica;
}

Основна причина, з якої веб-розробники не завжди застосовують стислі властивості шрифтів, в тому, що не кожна установка потрібна. Але розуміння цієї стенографії може заощадити вам багато часу і місця в таблицях стилів. Тримайте цей фрагмент під рукою на випадок, якщо захочете скоротити стилів форматування шрифтів.

48. Ефект загину паперової сторінки

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. Мерехтливі посилання

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

.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, які могли б вам знадобитися, але сподіваюся, що до цього близький! Якщо у вас є ідеї чи питання з приводу цієї збірки, не соромтеся поділитися з нами внизу в області для коментарів.