Створення рамок засобами CSS. Подвійна рамка css стилями: вчимося використовувати властивості border і outline Css подвійна рамка

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

Ця властивість дозволяє легко робити неймовірні штуки, для яких раніше було потрібно від 3-х до 8-ми картинок і маніпуляції з розміткою.

Upd:У Firefox працюють починаючи з 29-ї версії.

Розмір картинки дорівнює товщині рамки. Колір і стиль рамки ігноруються.

Якщо задати тільки border-image-source, картинка заповнить собою куточки, не знаючи що їй робити далі:

Border: 80px solid transparent; border-image: url ( "http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_XL.png");

Border-image-slice

Важлива властивість, яка визначає розмір шматка зображення, яке заповнить кути рамки. Решта частини будуть використані для заповнення простору між кутами за алгоритмом, заданим в border-image-repeat.

Можливі значення:

<проценты>- розраховуються щодо розміру зображення. Горизонтальні щодо ширини, вертикальні - щодо висоти.<числа>- пікселі (для растрового зображення) або координати (для векторного). Одиниці виміру не вказуються. fill - ключове слово, яке доповнює попередні значення. Якщо воно задано, зображення не обрізається внутрішнім краєм рамки, а заповнює також область всередині рамки. Дуже корисно для округлих рамок.

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

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

Border: 80px solid transparent; border-image: url ( "http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); border-image-slice: 100;

Border-image-repeat

Властивість визначає як будуть заповнюватися проміжки між кутами.

Можливі значення: stretch - розтягує заповнює ділянку картинки. Значення за замовчуванням; repeat - повторює заповнює ділянку, при цьому видно місця стиків з кутовий картинкою; round - заповнює проміжок між кутами. Може бути помітний стик в середині боку. Саме акуратне дію. space - діє схоже на repeat. Різниці не виявила.

Можна задати два значення відразу, перше відповідатиме за поведінку картинки у верхній і нижній рамці, друге - за ліву і праву.

Border-image: url ( "http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); border-image-slice: 100; border-image-repeat: repeat;

Зліва repeat, праворуч round.

Якщо рамка складна і сторони погано стикуються між собою, stretch спрацює коректніше, ось приклад.

Border-image-width

border-image-width

Властивість управляє шириною видимої частини рамки, масштабує її. Якщо це значення більше ширини border-width, картинка рамки заползет під вміст, навіть якщо не задано властивість fill.

Можливі значення:<длина>- значення в px або em;<%>- значення у відсотках щодо розміру зображення;<числа>- числове значення, на яке множиться border-width auto - ключове слово. Якщо воно задано, значення дорівнює відповідному border-image-slice. Якщо підходящого розміру немає, використовується значення border-width, при цьому картинка заповнює весь кут рамки, заповзаючи під контент. Трохи дивно працює.

Border: 60px solid transparent; border-image: url ( "http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); border-image-slice: 80; border-image-repeat: round; border-image-width: 160px;

Справа рамка з border-image-width. На прикладі зліва видно, як картинка обрізалася внутрішніми краями рамки. Права рамка зарахунок збільшеної ширини заповзла під контент.

Border-image-outset

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

Можливі значення:<длина>- значення в px або em;<числа>- числове значення, на яке множиться border-width.

Border: 60px solid transparent; border-image: url ( "http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); border-image-slice: 120; border-image-repeat: round; border-image-outset: 60px 10px 50px 120px;

Справа приклад з border-image-outset. Це властивість не впливає на розміри елемента, а рамка може перекривати сусідні елементи.

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

Ці три властивості (товщину, стиль і колір кордону) можна встановити в одному оголошенні. Ось приклад:

Можна вказати стиль кордону тільки на одного боку елемента. Для цього застосовують властивості border-top (верхня межа), border-right (права межа), border-bottom (нижня межа), border-left (ліва межа).

У цьому прикладі для кожної сторони блоку задана своя товщина кордону, стиль і колір.

Подумайте, як за допомогою CSS можна створити таку фігуру:

Значення межі - товщину, стиль і колір - можна задати окремо використовуючи спеціальні властивості.

• border-style - стиль кордону.
• border-width - ширина кордону.
• border-color - колір кордону.

Розглянемо кожне з значень окремо.

Властивість border-style. Стиль кордону.

Властивість border-style встановлює стиль рамки. В CSS, на відміну HTML, межа елемента може бути не тільки суцільний. Можливі наступні значення для стилю кордону:

1. none - межа відсутня (за замовчуванням).
2. solid - суцільна межа.
3. double - подвійна межа.
4. dashed - пунктирна межа.
5. dotted - межа з ряду точок.
6. ridge - межа "гребінь".
7. groove - межа "борозенка".
8. inset - втиснута межа.
9. outset - видавлені межа.

Приклади того, як вони виглядають.

межа відсутня (none)

суцільна межа (solid)

подвійна межа (double)

межа з ряду точок (dotted)

пунктирна межа (dashed)

межа "борозенка" (groove)

межа "гребінь" (ridge)

втиснута межа (inset)

видавлені межа (outset)

До речі, якщо для рамки ridge задати колір кордону чорний, то вийде ось такий результат.

Блок div з рамкою чорного кольору і стилю ridge.

Рамка виглядає як solid, але це тому що стиль ridge створюється додаванням чорного ефекту тіні, а чорний ефект на чорній рамці непомітний.

За допомогою властивості border-style стиль кордону може бути заданий не тільки для всіх сторін блоку. Є можливість задавати кілька значень однієї властивості border-style, в залежності від числа значень стиль кордону буде присвоєно різному числу сторін блоку. Можна задати одне, два, три і чотири значення. Давайте розглянемо приклади для кожного випадку.

Одне значення (solid) - стиль кордону встановлено для всіх сторін блоку.

Два значення (solid double) - перше значення встановило стиль для верхньої і нижньої сторін, друге для бічної.

Три значення (solid double dotted) - перше значення для верхньої сторони, друге для бічних, стрет для нижньої.

Чотири значення (solid double dotted dashed) - кожне значення для одного боку за годинниковою стрілкою починаючи з верхньої.

Властивість border-width. Товщина кордону.

Для установки товщини межі елементу використовується властивість border-width. Товщину кордону можна задати в будь-яких абсолютних одиницях виміру, наприклад в пікселах.

Як і для властивості border-style, для властивості також можна задавати від одного до чотирьох значень. Розглянемо приклади для кожного випадку.

Код прикладу:

Також для властивості border-width існують значення у вигляді ключових слів. Всього їх три:

• thin - тонка межа;
• medium - середня товщина;
• thick - товста кордон;

Товщина кордону: thin.

Товщина кордону: medium.

Товщина кордону: thick.

Властивість border-color. Колір кордону.

Для управління кольором кордону використовується засіб border-color. Кольори для цієї властивості можна задати використовуючи будь-який спосіб, описаний в статті "Кольори в CSS", а саме:

• Шістнадцяткова запис (# ff00aa) кольору.
• Формат RGB - rgb (255,12,110). Формат RGBA для CSS3.
• Формати HSL і HSLA для CSS3.
• Назва кольору, наприклад black (чорний). Повний список назв квітів наведено в таблиці назв квітів CSS.

Властивість border-color також може мати від одного до чотирьох значень і обробляє їх аналогічно попереднім властивостями.

Одне значення (red).

Два значення (red black).

Три значення (red black yellow).

Чотири значення (red black yellow blue).

Тепер повернемося до задачі, озвученої вище, і намалюємо фігуру:

Ось код, який малює таку фігуру, тільки побільше розміром:

Установка значень для сторін окремо

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

• border-top (верхня межа)
• border-right (права межа)
• border-bottom (нижня межа)
• border-left (ліва межа)

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

Параметри верхньої межі (border-top).

• border-top-color - задає колір верхньої межі елемента.
• border-top-width - задає товщину верхньої межі елемента.
• border-top-style - задає стиль верхньої межі елемента.

Параметри правої межі (border-right).

• border-right-color - задає колір правої межі елемента.
• border-right-width - задає товщину правої межі елемента.
• border-right-style - задає стиль правої межі елемента.

Параметри нижньої межі (border-bottom).

• border-bottom-color - задає колір нижньої межі елемента.
• border-bottom-width - задає товщину нижньої межі елемента.
• border-bottom-style - задає стиль нижньої межі елемента.

Параметри лівої межі (border-left).

• border-left-color - задає колір лівої межі елемента.
• border-left-width - задає товщину лівої межі елемента.
• border-left-style - задає стиль лівої межі елемента.

Приклад використання цих властивостей:

Властивість border-radius. Округлення кутів кордону.

Властивість border-radius призначене для округлення кутів кордонів елемента. Це властивість з'явилося в CSS3 і коректно працює у всіх сучасних браузерах, за винятком Internet Explorer 8 (і більш старих версій).

Значеннями можуть бути будь-які числа, використовувані в CSS.

Властивість border-radius: 15px.

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

Властивість border-radius: 15px.

Існують властивості для округленими кожного окремо кута елемента. У цьому прикладі використані вони все:

Border-top-left-radius: 15px; border-top-right-radius: 0; border-bottom-right-radius: 15px; border-bottom-left-radius: 0;

Властивість border-radius: 15px.

Хоча цей код можна записати одним оголошенням: border-radius: 15px 0 15px 0. Справа в тому, що для властивості border-radius можна задавати від одного до чотирьох значень. У таблиці нижче наведені правила, які визначають такі оголошення.

Уважно вивчивши цю таблицю можна зрозуміти, що найкоротша запис потрібного стилю буде такою: border-radius: 15px 0. Всього два значення.

трохи практики

Малюємо лимон засобами CSS.

Ось код такого блоку:

Margin: 0 auto; / * Розміщуємо блок по центру * / width: 200px; height: 200px; background: # F5F240; border: 1px solid # F0D900; border-radius: 10px 150px 30px 150px;

Ми вже малювали фігуру:

Тепер залишимо від неї трикутник:

Код трикутника такий:

Margin: 0 auto; / * Розміщуємо блок по центру * / padding: 0px; width: 0px; height: 0; border: 30px solid white; border-bottom-color: red;

CSS-рамкаелемента є ще однією або кілька ліній, що оточують вміст елемента і його поля padding. Рамка задається за допомогою короткого властивості border. Стиль рамки задається за допомогою трьох властивостей: стиль, колірі ширина.

Оформлення рамок HTML-елементів за допомогою CSS-властивостей

1. Стиль рамки border-style

За замовчуванням рамки завжди отрісовиваємих поверх фону елемента, фон поширюється до зовнішнього краю елемента. Стиль рамки визначає її відображення, без цієї властивості рамки не буде видно взагалі. Для елемента можна задавати рамку для всіх сторін одночасно за допомогою властивості border-style або для кожної сторони окремо за допомогою уточнюючих властивостей border-top-style і т.д. Чи не успадковується.

синтаксис

P (border-style: solid;) p (border-top-style: solid;)

2. Колір рамки border-color

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

синтаксис

P (border-color: # cacd58;)

3. Ширина рамки border-width

Ширина рамки задається за допомогою одиниць вимірювання довжини або ключових слів. Якщо для властивості border-style задано значення none, і для рамки елемента встановлена ​​якась ширина, то в даному випадку ширина рамки прирівнюється до нуля. Чи не успадковується.

синтаксис

P (border-width: 2px;)

4. Завдання рамки одним властивістю

Властивість border дозволяє об'єднати в собі такі властивості: border-width, border-style, border-color, наприклад:

Div (width: 100px; height: 100px; border: 2px solid grey;)

При цьому задані властивості будуть застосовуватися до всіх кордонів елемента одночасно. Якщо якесь із значень не вказано, його місце займе значення за замовчуванням.

5. Завдання рамки для однієї межі елементу

У разі, коли необхідно задати різний стиль кордонів елемента, можна скористатися коротким записом для відповідної межі.
Перераховані нижче властивості об'єднують в одне оголошення наступні властивості: border-width, border-style і border-color. Перелік властивостей вказується в заданому порядку, при цьому одне або два значення можуть бути пропущені, в цьому випадку їх значення приймуть значення за замовчуванням.

Стиль верхньої межі задається за допомогою властивості border-top, нижньої - border-bottom, лівої - border-left, правою - border-right.

синтаксис

P (border-top: 2px solid grey;)

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

За допомогою 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-інструментами. Ви познайомитеся з такими властивостями, як border і outline, а також дізнаєтеся, які функції вони виконують.

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

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

Почну з відомого властивості 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. Для нього можна вказати до п'яти значень, які будуть відповідати відповідно за горизонтальний зсув, вертикальний зсув, радіус розмиття, розтягнення тіні і її колір.

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

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