Вітаю всіх читачів цієї публікації. Сьогодні я розповім вам, як створюється подвійна рамка CSS-інструментами. Ви ознайомитеся з такими властивостями, як border та outline, а також дізнаєтесь, які функції вони виконують.

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

Border та його можливості

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

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

Звичайно ж кожен розробник «грає» з існуючими елементами веб-мов на свій розсуд, тому варіантів використання може бути безліч.

Border передбачає можливість визначення стилю, товщини та кольору меж як для всіх сторін одночасно, так і для конкретної області. Для цього необхідно додати назву сторони з дефісом. Наприклад, border-bottom.

Стиль кордонів може бути зовсім різним:

• пунктирна (dashed)
• точкова (dotted)
• суцільна (solid)
• подвійна (double)
• об'ємна (groove, outset, ridge, inset) лінії

Outline та його можливості

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

І все ж таки існують інші відмінності. Так, outline не впливає на розташування об'єкта серед іншого контенту та не змінює його товщини, що не можна сказати про попередню властивість.

До того ж даний css-елемент не має особливої ​​гнучкості. Вказані верстальником значення застосовуються до всіх сторін зовнішньої рамки та працювати тільки з однією стороною не вдасться.

Як і border, у поточному властивості можна встановлювати різний стиль кордонів. Причому їх найменування такі самі, як і попередньому елементі css.

Що таке псевдоелементи і для чого вони можуть стати в нагоді

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

Отже, псевдоелементи потрібні для форматування області елементів, для якої в дереві документа не існує будь-яких селекторів або визначень.

Не плутайте із псевдокласами. Вони у свою чергу форматують існуючі селектори та елементи.

У сучасних правилах визначення псевдоелементів використовується подвійна двокрапка (: after). Однак, якщо ви використовуєте просто «:», то валідатор пропустить код і не видасть помилки.

На сьогоднішній день існує безліч псевдоелементів. Нижче в таблиці я перерахував найпопулярніші.

Хочу відзначити якусь особливість застосування перших двох псевдоелементів: вони взаємодіють разом із властивістю, у якому і прописується сам текст – content.

Практична частина

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

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

Нагадаю, що це можна реалізувати за допомогою такої якості, як box-shadow. Для нього можна вказати до п'яти значень, які відповідатимуть відповідно за горизонтальне зрушення, вертикальне зрушення, радіус розмиття, розтягнення тіні та її колір.

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

З повагою, Роман

Рамки мають різноманітне застосування, наприклад, як декоративний елемент або відділення двох об'єктів. CSS надає безліч варіантів використання рамок.

Товщина рамки

Товщина рамки визначається властивістю border-width, яка може мати значення thin, medium і thick, чи числове значення в пікселах. На малюнку показано цю систему:

Колір рамки

Властивість border-color визначає колір рамки. Значення – нормальні значення кольору, наприклад: "#123456", "rgb(123,123,123)" або "yellow".

Типи рамок

Існують різні типирамок. Нижче показано вісім типів рамки та їх інтерпретація в Internet Explorer 5.5. Всі приклади показані кольором "gold" та товщиною "thick", але можуть, природно, виводитися іншим кольором та товщиною.

Значення none або hidden можна використовувати, якщо ви не хочете відображати рамку.

Приклади визначення рамок

Три розглянуті вище властивості можна об'єднати в кожному елементі і, відповідно, встановлювати різні рамки. Для ілюстрації поглянемо на документ, де визначено різні рамки для

,

,

і

Результат, можливо, не настільки вражаючий, але він демонструє деякі можливості:

H1 ( border-width: thick; border-style: dotted; border-color: gold; ) h2 ( border-width: 20px; border-style: outset; border-color: red; ) p ( border-width: 1px; border-style: dashed; border-color: blue; ) ul ( border-width: thin; border-style: solid; border-color: orange; )

Можна також встановити спеціальні властивості для верхнього, нижнього, правого та лівого краю рамки. Ось як це робиться:

H1 ( border-top-width: thick; border-top-style: solid; border-top-color: red; border-bottom-width: thick; border-bottom-style: solid; border-bottom-color: blue; border-right-width: thick; border-right-style: solid; border-right-color: green; border-left-width: thick; border-left-style: solid; border-left-color: orange;

Скорочений запис

Як і для багатьох інших властивостей, можна об'єднати кілька властивостей в одну, використовуючи слово border. Приклад:

P ( border-width: 1px; border-style: solid; border-color: blue; )

можна об'єднати в:

P ( border: 1px solid blue; )

Резюме

У цьому уроці ви познайомилися з безмежними можливостями CSS під час використання рамок.

У наступному уроці ми розглянемо, як визначати розміри в боксовій моделі – height та width.

Опис

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

Синтаксис

Значення

Значення border-width визначає товщину межі. Для керування її видом надається кілька значень border-style. Їх назви та результат дії представлений на рис. 1.

Рис.1. Стилі рамок

border-color встановлює колір кордону, значення може бути у будь-якому допустимому для CSS форматі.

Уherit успадковує значення батька.

HTML5 CSS2.1 IE Cr Op Sa Fx

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. У вас є анім з мінімальним веніям, які не виконані практики ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

У цьому прикладі навколо шару додається подвійна межа. Результат показано на рис. 2.



Рис. 2. Застосування якості border

Об'єктна модель

document.getElementById("elementID ").style.border

Браузери

Браузер Internet Explorer до шостої версії включно при товщині межі 1px відображає dotted як dashed. При товщині 2px та вище значення dotted працює коректно. Ця помилка виправлена ​​в IE7, але тільки для всіх меж товщиною 1px. Якщо одна з меж блоку має товщину 2px і вище, то IE7 значення dotted перетворюється на dashed .

Internet Explorer до версії 7.0 включно не підтримує значення inherit.

Стиль кордону в різних браузерахможе дещо різнитися при використанні значень groove, ridge, inset або outset.

Влад Мержевич

З допомогою CSSможна додати рамку до елемента декількома способами. В основному, звичайно ж, застосовується властивість border, як найбільш універсальна, а також outline і, як не дивно, box-shadow, основне завдання якого - створення тіні. Далі розглянемо ці методи та їх різницю між собою.

Властивість outline

Найпростіша властивість для створення рамок. Має ті ж параметри, що і border, але суттєво відрізняється від нього деякими деталями:

• outline виводиться навколо елемента (border усередині);
• outline не впливає на розміри елемента (border додається до ширини та висоті елемента);
• outline можна встановити тільки навколо елемента повністю, але не на окремих сторонах (border можна використовувати для будь-якої сторони або всіх відразу);
• на outline не діє радіус заокруглення, заданий властивістю border-radius (на border діє).

Виникає питання - у яких випадках потрібен outline , коли його роль, незважаючи на перераховані відмінності, цілком бере він border ? Ситуацій не так багато, але вони зустрічаються:

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

Різнокольорові рамки

Треба розуміти, що outline жодною мірою не замінює border і може існувати разом з ним, як показано в прикладі 1.

Приклад 1. Створення рамки

У цьому прикладі навколо елемента додається чорна рамка, яка відокремлена від фону білою облямівкою (мал. 1).

Рис. 1. Рамка навколо елемента

Рамка під час використання:hover

При додаванні рамки через border відбувається збільшення ширини елемента, що досить помітно при поєднанні border та псевдокласу: hover. Є два способи, як це перемогти. Найпростіше - замінити border на outline, яке, як ми знаємо, не впливає на розміри елемента (приклад 2).

Приклад 2. Рамка під час наведення

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

Приклад 3. Рамка під час наведення

Рамка навколо полів форми

У деяких браузерах (Chrome, Safari, останні версії Opera) навколо полів форми при отриманні фокусу відображається невелика кольорова рамка (мал. 2). Щоб її прибрати, достатньо додати до властивості outline значення none , як показано в прикладі 4.

Рис. 2. Рамка навколо полів

Приклад 4. Забираємо рамку

Рамки через box-shadow

Хоча властивість box-shadow призначена для додавання тіні навколо елемента, за його допомогою можна створювати рамки, причому такі, які неможливо зробити через border або outline . Все завдяки тому, що число тіней може бути необмеженим, параметри яких перераховуються через кому.

Щоб отримати рамку, перші три параметри слід задати нульовими, вони відповідають за положення тіні та її розмиття. Четвертий параметр у разі відповідає за товщину кордону, а п'ятий встановлює колір рамки. Для другої рамки четвертий параметр дорівнює сумі товщини двох рамок.

У прикладі 4 показано додавання двох рамок та однієї межі праворуч за допомогою однієї властивості box-shadow.

Приклад 4. Використання box-shadow

Результат даного прикладупоказано на рис. 3.



Рис. 3. Рамки, створені властивістю box-shadow

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

І так, припустимо, що навколо якогось елемента потрібно зробити рамку. Наприклад, створимо заголовокі довкола нього зробимо рамку.

Параметри, що характеризують рамку: 1) Товщина рамки, 2) Стиль рамки та 3) Колір рамки. І давайте по порядку:

• 1. Товщина рамки: border-width: 2px;
• 2. Стиль рамки: border-style: solid;
• 3. Колір рамки: border-color: #ff0000;

Які бувають стилі рамок у CSS? Нижче наведено всі доступні стилі рамок:



• dotted – Це точкова рамка.
• dashed - Це пунктирна рамка
• solid - Це суцільна рамка
• double - Це подвійна рамка
• groove - Об'ємний вигляд
• ridge - Об'ємний вигляд
• inset - Об'ємний вигляд
• outset - Об'ємний вигляд

Тепер у нас є все, щоб створити рамку навколо заголовка.

HTML

Створення рамки навколо заголовка.

І сам стиль для рамки.

H2( border-width: 2px; border-style: solid; border-color: #FF0000; )

В результаті навколо створеного заголовка з'явилася суцільна рамка червоного кольору завтовшки 2px.

Рамка формується із чотирьох сторін: Верхній, Правою, Нижнійі Лівийі, оскільки в нас зазначена властивість border , то браузер за промовчанням малює всі чотири сторони рамки. Таким чином, якщо потрібно задати рамку тільки з якоїсь однієї сторони, то використовуються приставки, що вказують сторону, де створити рамку.

• top – Верх.
• right - Право
• bottom - Низ
• left - Ліворуч

Таким чином якщо ми хочемо рамку зробити тільки знизу абзацу тобто підкреслити його до кожної властивості border додаємо приставку bottom . В результаті вийде наступна структура коду.

H2( border-bottom-width: 2px; border-bottom-style: double; border-bottom-color: #FF0000; )


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

H2( border-bottom-width: 2px; border-bottom-style: double; border-bottom-color: #FF0000; border-top-width: 2px; border-top-style: double; border-top-color: # FF0000;

Тепер заголовок обводиться червоною рамкою зверху і знизу. Аналогічно можна зробити для інших сторін.

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



На малюнку вище представлена ​​структура скороченого запису, де вказується властивість border і як значення, через пробіл, вказується ширина рамки - border-width , стиль рамки - border-style та колір рамки - #ff0000 .

Тобто браузер, побачивши такий скорочений запис border: 2px solid #ff0000; , також створить рамку з усіх чотирьох сторін заголовка. Ось такий короткий запис еквівалентний тому запису, що ми використовували вище (де застосовувалося три властивості).

Якщо за допомогою короткого запису потрібно вказати рамку тільки з одного боку, то до властивості додаємо простаку вказівну сторону, з якої створити рамку.

H2( border-top:2px solid #ff0000; )

Ось так, за допомогою короткого запису робиться рамка з верху, де так само вказані товщина, стиль і колір рамки.

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