Освіжаємо в памяті CSS: рамки

16

Від автора: звичайно, ви знайомі з рамками. Є в них щось нове для впровадження? Б’юся об заклад, у цій статті знайдеться досить багато, про що ви і не знали!

Для створення заокруглених кутів можна застосовувати не тільки CSS3, але і «старигана» CSS можна примусити показати довільні фігури. Вірно, що в минулому до відкриття цих технік при демонстрації кіл або стрілок-вказівників можна було вдатися до застосування абсолютно позиціонованих фонових зображень. На щастя – по мірі того, як ми з радістю все більше віддаляємося від photoshop’у – це вже не той випадок.

Основи

Ви напевно знайомі з самим звичним використанням рамок.

border: 1px solid black;

Вищенаведений код застосовує до елемента рамку в 1px. Просто і легко, але можна модифікувати синтаксис ще трохи.

border-width: thick;
border-style: solid;
border-color: black;

Додатково до передачі border-width певного значення як альтернативу можна використовувати три ключових слова: thin, medium і thick.

Освіжаємо в памяті CSS: рамки

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

Можливо, вам потрібно змінити колір рамки при проведенні користувачем мишею над певним елементом. Застосування стенографічним форми письма потребує повторення піксельних значень.

.box {
border: 1px solid red;
}
.box:hover {
border: 1px solid green;
}

Більш витончений і КОРОТКИЙ підхід – це направлено доопрацювати властивість border-color.

.box {
border: 1px solid red;
}
.box:hover {
border-color: green;
}

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

Border-Radius

border-radius — улюблене дитя CSS3 – перше нове властивість, яке отримало широке розповсюдження в співтоваристві. У перекладі це означає, що, крім Internet Explorer 8 і його попередніх версій, всі браузери можуть відображати округлені кути.

До цього було необхідно вживати префікси виробника для Webkit і Mozilla, щоб правильно застосовувати стилі.

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

Однак зараз можна, не боячись, відкинути вендорные варіанти виробника і просто вдатися до прийнятої формі: border-radius.

Освіжаємо в памяті CSS: рамки

Як і слід очікувати, також можна визначати власні значення для кожної сторони блоку.

Освіжаємо в памяті CSS: рамки

border-top-left-radius: 20px;
border-top-right-radius: 0;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 0;

У наведеному вище коді установка border-top-right-radius і border-bottom-left-radius на нуль буде зайвою, якщо елемент не успадковує значень, які слід запускати повторно.

Що дуже схоже на margin або padding, ці установки можна стиснути при необхідності до одного властивості.

/* top left, top, right, bottom right, bottom left */
border-radius: 0 20px 30px 0;

В якості прикладу (і як часто це роблять веб-дизайнери) форму лимона можна відтворити за допомогою CSS властивості border-radius, як тут:

.lemon {
width: 200px; height: 200px;
background: #F5F240;
border: 1px solid #F0D900;
border-radius: 10px 150px 30px 150px;
}

Освіжаємо в памяті CSS: рамки

Вище базового рівня

Багато дизайнери із задоволенням дотримуються знань, позначених у цьому розділі; однак існує безліч способів розширити кругозір!

Множинні рамки

Існує безліч прийомів, до яких можна звернутися при постановці завдання застосування до елемента множинних рамок.

Border-Style

У той час як solid, dashed і dotted – найбільш вживані значення властивості border-style, є кілька інших, включаючи groove ridge, які можуть виявитися корисними.

border: 20px groove #e3e3e3;

Або у вигляді звичайної запису:

border-color: #e3e3e3;
border-width: 20px;
border-style: groove;

Освіжаємо в памяті CSS: рамки

Хоча це, поза сумнівом, зручно, насправді ефекти ребристість або борозенок не є множинними рамками.

Outline

Найпопулярніша техніка створення двох рамок – це скористатися перевагами властивості outline.

.box {
border: 5px solid #292929;
outline: 5px solid #e3e3e3;
}

Освіжаємо в памяті CSS: рамки

Хоча цей метод відмінно працює, він обмежений двома рамками. Якщо ж потрібно створити пошарове, градиентоподобный ефект, необхідний інший підхід.

Псевдоелементи

Коли недостатньо методу outline, альтернативні підхід – скористатися перевагами псевдоелемент :before :after, і застосувати до створеного контенту будь-які необхідні додаткові рамки.

.box {
width: 200px; height: 200px;
background: #e3e3e3;
position: relative;
border: 10px solid green;
}
/* Create two boxes with the same width of the container */
.box:after, .box:before {
content: «;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
.box:after {
border: 5px solid red;
outline: 5px solid yellow;
}
.box:before {
border: 10px solid blue;
}

Освіжаємо в памяті CSS: рамки

Це, можливо, не самий елегантний підхід, але він безумовно працює. Єдине застереження – дуже легко сплутати порядок, в якому застосовуються кольору рамок. Часто для застосування правильного поєднання потрібен певний рівень «здогадок і перевірок».

Box-Shadow

«Розумний» спосіб створення нескінченної кількості рамок – скористатися параметром spread властивості CSS3 box-shadow.

.box {
border: 5px solid red;
box-shadow:
0 0 0 5px green,
0 0 0 10px yellow,
0 0 0 15px orange;
}

Освіжаємо в памяті CSS: рамки

В даному випадку ми розумно застосовуємо box-shadow таким чином, який не обов’язково мався на увазі при первісному написанні специфікації.

Встановивши компоненти x, y, і blur на 0, можна використовувати значення spread для створення надійних рамок в потрібних місцях. Так як box-shadow через використання коми можна складати в стек, кількість можливих рівнів нескінченно.

Ця техніка доволі симпатично виглядає в попередніх версіях. В старих браузерах, не розпізнають властивість box-shadow, воно просто зобразить одиночну червону рамку в 5px.

Пам’ятайте: дизайн не зобов’язаний бути однаковим у всіх браузерах. Пишіть CSS для більшості сучасних браузерів, а потім відповідно забезпечте підходящий альтернативний варіант.

Змінюємо кути

Додатково до передачі одного значення до border-radius, можна забезпечити як альтернативу два розділених слешем /– для визначення унікальних значень як для горизонтального, так і вертикального радіусів. Наприклад…

border-radius: 50px / 100px; /* горизонтальний радіус, вертикальний радіус */

…еквівалентно:

border-top-left-radius: 50px 100px;
border-top-right-radius: 50px 100px;
border-bottom-right-radius: 50px 100px;
border-bottom-left-radius: 50px 100px;

Цей метод особливо корисний, коли потрібно зімітувати легкий, продовжений завиток замість загального округленого кута. Наприклад, наступний код дозволяє нам дещо відійти від квадратної фігури, отримавши в результаті більш закручений, «паперовий» ефект.

.box {
width: 200px; height: 200px;
background: #666;
border-top-left-radius: 15em 1em;
border-bottom-right-radius: 15em 1em;
}

Освіжаємо в памяті CSS: рамки

Фігури CSS

Можливо саме акуратне застосування рамок – коли вони з розумом застосовуються до елементів з нульовою висотою та шириною. Збиває з пантелику, а? Давайте наочно подивимося.

До кількох наступних прикладів візьміть наступну розмітку…

…і наступні основні стилі:

.box {
width: 200px;
height: 200px;
background: black;
}

Демонструється найчастіше приклад при показі того, як можуть використовуватися в проекті фігури CSS– створення обов’язкового покажчика-стрілки.

Щоб зрозуміти, як за допомогою CSS формується стрілка, потрібно призначити до кожної сторони унікальний border-color (колір рамки), а потім зменшити значення width і height контейнера до 0.

Приймемо div з класом arrow як контейнер:

.arrow {
width: 0; height: 0;
border-top: 100px solid red;
border-right: 100px solid green;
border-bottom: 100px solid blue;
border-left: 100px solid yellow;
}

Як показано на початку цього розділу, більш чистий синтаксис вийде, якщо не застосовувати всеохоплюючу стенографічний версію:

.arrow {
width: 0; height: 0;
border: 100px solid;
border-top-color: red;
border-right-color: green;
border-bottom-color: blue;
border-left-color: yellow;
}

Навіть можна далі зменшити її, згрупувавши значення кольорів.

.arrow {
width: 0; height: 0;
border: 100px solid;
border-color: red green blue yellow;
}

Освіжаємо в памяті CSS: рамки

Цікаво, вірно? Якщо повернутися назад, то тут присутня ідеальний здоровий глузд. Це єдиний можливий спосіб вирівняти кольору, допустивши width і height для контейнера, рівні нулю. А що, якщо тепер ми встановимо всі кольори рамки, крім синьої боку, на прозорі?

.arrow {
width: 0; height: 0;
border: 100px solid;
border-bottom-color: blue;
}

Освіжаємо в памяті CSS: рамки

Відмінно! Але створення div а .arrow лише для додавання на сторінку стрілки не здається гарною семантичної ідеєю. Замість того псевдоелементи можна використовувати, щоб застосувати стрілку-покажчик до або після пов’язаного елемента.

Створення «словесного міхура»

Для створення «словесного бульбашки» на 100% з CSS почнемо з розмітки.

Hi there!

Далі потрібно застосувати трохи основних стилів.

.speech-bubble {
position: relative;
background-color: #292929;
width: 200px;
height: 150px;
line-height: 150px; /* vertically center */
color: white;
text-align: center;
}

Освіжаємо в памяті CSS: рамки

Покажчик-стрілка буде застосовуватися з допомогою псевдоэлемента after.

.speech-bubble:after {
content: «;
}

Псевдоелементи :before :after можна застосовувати для вставки створеного контенту або перед, або після вмісту елемента.

На даному етапі це всього лише справа відтворення стрілки і розміщення її в потрібному місці. Ми почнемо з абсолютного позиціонування контенту, знову встановивши width і height, і застосувавши кольору рамки.

.speech-bubble:after {
content: «;
position: absolute;
width: 0;
height: 0;
border: 10px solid;
border-color: red green blue yellow;
}

Освіжаємо в памяті CSS: рамки

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

.speech-bubble:after {
content: «;
position: absolute;
width: 0;
height: 0;
border: 10px solid;
border-top-color: red;
}

Освіжаємо в памяті CSS: рамки

При створенні фігур CSS з-за того, що ми не можемо застосовувати властивість width для визначення ширини стрілки-покажчика, має бути натомість використано властивість border-width. У цьому випадку стрілка повинна бути трохи більше; так що border-width потрібно збільшити до 15px. Також ми розмістимо стрілку внизу по центру контейнера, застосувавши відповідно властивості top і left.

.speech-bubble:after {
content: «;
position: absolute;
width: 0;
height: 0;
border: 15px solid;
border-top-color: red;
top: 100%;
left: 50%;
}

Освіжаємо в памяті CSS: рамки

Майже готовий; на остаточному етапі слід доопрацювати колір стрілки, щоб він став таким же, як фон контейнера. Також потрібно модифікувати розташування, щоб врахувати ширину рамок (15px). А поки ми тут, також застосуємо легкий border-radius, щоб контейнер був більш схожим на «міхур».

.speech-bubble {
/* … інші стилі */
border-radius: 10px;
}
.speech-bubble:after {
content: «;
position: absolute;
width: 0;
height: 0;
border: 15px solid;
border-top-color: #292929;
top: 100%;
left: 50%;
margin-left: -15px; /* відрегулюйте по ширині рамки */
}

Освіжаємо в памяті CSS: рамки

Непогано, так? Абстрагируйте цей код на кілька класів багаторазового застосування, і ви готові до всіх майбутніх проектів.

/*
Speech Bubbles
Usage: Apply a class of .speech-bubble and .speech-bubble-DIRECTION

Hi there

*/
.speech-bubble {
position: relative;
background-color: #292929;
width: 200px;
height: 150px;
line-height: 150px; /* вертикально по центру */
color: white;
text-align: center;
border-radius: 10px;
font-family: sans-serif;
}
.speech-bubble:after {
content: «;
position: absolute;
width: 0;
height: 0;
border: 15px solid;
}
/* додайте стрілку */
.speech-bubble-top:after {
border-bottom-color: #292929;
left: 50%;
bottom: 100%;
margin-left: -15px;
}
.speech-bubble-right:after {
border-left-color: #292929;
left: 100%;
top: 50%;
margin-top: -15px;
}
.speech-bubble-bottom:after {
border-top-color: #292929;
top: 100%;
left: 50%;
margin-left: -15px;
}
.speech-bubble-left:after {
border-right-color: #292929;
top: 50%;
right: 100%;
margin-top: -15px;
}

Освіжаємо в памяті CSS: рамки

Бонус: краще вертикальне центрування

Зворотною стороною застосування line-height для вертикального центрування тексту є те, що ви обмежені однією єдиною рядком. Якщо для тексту потрібно дві або більше рядка, висота кожної буде занадто великий. Розумне рішення – це встановити display для table на «словесний бульбашка», а display для table-cell на абзац, огортаючий текст. Потім це дозволить нам вирівняти текст відповідно посередині.

Тут текст.

Далі модифікований CSS.

.speech-bubble {
/* інші стилі */
display: table;
}
.speech-bubble p {
display: table cell;
vertical-align: middle;
}

Освіжаємо в памяті CSS: рамки

Якщо посилання на display: table оживляють жахливі спогади про старомодних розмітках на основі таблиць, не турбуйтеся. Ці властивості цілком відносяться до стилю, в якому має демонструватися елемент.

Ми не обмежені трикутниками; CSS здатне породжувати будь-які види фігур – навіть сердечка і знаки біологічної небезпеки!

Освіжаємо в памяті CSS: рамки

.biohazard {
width: 0; height: 0;
border: 60px solid;
border-radius: 50%;
border-top-color: black;
border-bottom-color: black;
border-left-color: yellow;
border-right-color: yellow;
}

Короткі підсумки

Хоча вірно те, що синтаксис звичайного border: 1px solid black пройшов довгий шлях, якщо ми кмітливі, то зможемо створити безліч корисних ефектів, іконок і фігур. Хто б міг подумати, що рамки виявляться таким потужним інструментом? Головне – пам’ятати, що стилі для звичайних фігур або «словесних бульбашок» повинні створюватися тільки один раз, а потім абстрагуватися до практичних класів для майбутнього застосування.