Як зробити border з одного боку. Як робиться у css подвійна рамка? Подвійна рамка за допомогою box-shadow
Михайло 2016-06-11 1 HTML та CSS 0
Як робиться у css подвійна рамка?
Всім привіт. А ви знаєте, як робити у css подвійну рамку? Якщо ні, то прошу ознайомитись із цією невеликою заміткою. Справа в тому, що це не зробиш за допомогою звичайного border, тут потрібно йти іншим шляхом.
Якщо ви задаєте рамку за допомогою властивості border, то можете задати її лише одну. Але дуже часто дизайн може потребувати кілька рамок. У такому разі варто скористатися псевдорамкою – тінню.
Подвійна рамка за допомогою box-shadow
Взагалі, якщо ви хочете докладніше вивчити тінь у css, то раджу вам прочитати на відповідну тему. У цій статті я не докладно поясню синтаксис властивості, а просто покажу прийом, як створити подвійну рамку. Отже, створимо звичайний блок, якому напишу деякі стилі. Блок може бути будь-яким та з будь-яким вмістом. У моєму випадку це простий div, тому html кодя навіть не показуватиму. А ось стилі:
Div(
background: #E0D8A3;
width: 180px;
height: 110px;
padding: 12px;
}
Ну типовий приклад оформлення блоку.
Тепер створимо подвійну рамку за допомогою множинних тіней. Додам у стилі до блоку ще таку властивість:
Box-shadow: 0 0 0 1px #000, 0 0 0 10px #E0D8A3;
Ось так це виглядає:
Як бачите, вийшло досить симпатично. У box-shadow всього 5 параметрів. Перший - зміщення тіні по горизонталі, другий - по вертикалі. Третій та четвертий параметри – розмиття та розтягнення. Як бачите, перші три ми не чіпаємо взагалі. Розмиття нам не потрібне, тому що нам потрібна різка тінь. Як бачите, я прописував четвертий параметр розтягнення. Він визначає, наскільки тінь буде більшою за елемент, до якого прив'язана.
За замовчуванням все виглядає так - тінь однакових розмірів з елементом і чітко лежить під ним. Якщо ви змінюєте розтяг, то тінь починає виступати за елемент. Саме так можна створювати рамки, абсолютно такі ж як властивістю border . Ну а з п'ятим параметром, на мою думку, все зрозуміло — це колір тіні.
Як бачите, я просто перерахував параметри для кожної нової тіні через кому. Я думаю, ви вже здогадалися, що у такий же спосіб можна створити потрійну рамку тощо. Жодних обмежень тут немає. Власне, як на мене питання закрите, а якщо у вас є якісь питання, ви можете писати їх у коментарі.
Хвилинку вашої уваги:Усі ми хочемо розміщувати свої сайти на надійному хостингу. Я проаналізував сотні хостингів і знайшов найкращий - HostIQУ мережі сотні позитивних відгуківпро нього, середня оцінка користувачів - 4.8 з 5. Нехай вашим сайтам буде добре.
Рамки - це такі лінії, які оточують елемент (що міститься в ньому контент і відступи навколо нього). Приклад, з яким ми вже стикалися - рамки осередків усередині таблиці.
CSS передбачає два типи рамок: внутрішні межі та зовнішні лінії. Властивості CSS, що відповідають за оформлення рамок, починаються зі слова «border», яке таки можна перекласти як «Рамка», «Кордон». Наявність та формат зовнішнього контуру задаються властивостями, що починаються словом outline. Outline, на відміну від border, не впливає на ширину і положення блоку, що обрамляється. Крім того, його не можна встановити лише з одного боку, як border- Тільки з усіх боків відразу.
Спочатку поговоримо про оформлення border, потім перейдемо до outline.
border-width
Визначає ширину кордонів. Зрозуміло, що за умовчанням елемент оточений рамками із чотирьох сторін. Властивість дозволяє встановити ширину меж як для всіх сторін однакову, так і різну для кожної сторони. Залежно від того, яку ширину яким межам потрібно привласнити, у правилі можна вказати від одного до чотирьох значень.
Задавати ширину можна як за допомогою звичних пікселів, відсотків та інших одиниць довжини CSS, так і зарезервованими словами thin(2px), medium(4px) та thick(6px).
Border-width: 16px 12px 4px 8px;
border-style
Визначає стиль рамки. Зверніть увагу: якщо не задати це правило, але вказати властивість border-width, то рамок взагалі не буде, тому якщо хочете видимі кордони, обов'язково вкажіть border-style.
Значення властивості може бути досить багато, всі вони наочно продемонстровані малюнком нижче.
Останній абзац показує, що стиль, як і товщина, біля рамки з кожного боку може бути власним:
border-style: solid double dotted none
border-color
Працює так само, як і попередні властивості, але відповідає за колір кордону. Йому теж можна задавати від одного до чотирьох значень, і ви вже знаєте результат. Якщо правило не встановлено, рамки матимуть колір тексту поточного елемента або, якщо не вказано і він, колір тексту батька-батька.
Border-color: #C85EFA;
border
Спрощує запис та заощаджує код, дозволяючи встановити всі перелічені властивості для кордонів з усіх боків елемента одним рядком:
P ( border: 2px solid green; )
Для налаштування різних правил рамкам з різних боків можна використовувати такі значення:
- border-top- верхня межа.
- border-right- Права.
- border-bottom- нижня.
- border-left- Ліва.
P ( border-left: 6px dotted yellow; )
outline-width
Те саме, що й border-widthтільки для зовнішньої, а не внутрішньої рамки. Задає товщину контуру в тих же значеннях, що й border-width. Крім товщини обрамлення елемента, потрібно вказати його стиль, інакше контуру не буде.
outline-style
Значення властивості дублюють значення border-style. Правило задає стиль зовнішнього контуру.
Опис
Універсальна властивість 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
У даному прикладінавколо шару додається подвійна межа. Результат показано на рис. 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-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;
Скорочений запис
Як і для багатьох інших властивостей, ви можете об'єднати декілька властивостей в одну, використовуючи власне слово. Приклад:
P ( border-width: 1px; border-style: solid; border-color: blue; )
можна об'єднати в:
P ( border: 1px solid blue; )
Резюме
У цьому уроці ви познайомилися з безмежними можливостями CSS під час використання рамок.
У наступному уроці ми розглянемо, як визначати розміри боксової моделі - height і width.
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 . Ця властивість не впливає на розмір елемента, а рамка може перекривати сусідні елементи.
- і
Результат, можливо, не настільки вражаючий, але він демонструє деякі можливості:
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;
Скорочений запис
Як і для багатьох інших властивостей, ви можете об'єднати декілька властивостей в одну, використовуючи власне слово. Приклад:
P ( border-width: 1px; border-style: solid; border-color: blue; )
можна об'єднати в:
P ( border: 1px solid blue; )
Резюме
У цьому уроці ви познайомилися з безмежними можливостями CSS під час використання рамок.
У наступному уроці ми розглянемо, як визначати розміри боксової моделі - height і width.
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 . Ця властивість не впливає на розмір елемента, а рамка може перекривати сусідні елементи.