Як створити виріз кордону з CSS
З вирізання кордону ми можемо показати користувачам, що можна знайти під кордоном HTML-елемента. Це завдання, як правило, вирішується шляхом укладання двох або більше блокових елементів (у більшості випадків divs) різних розмірів один на одного. Спочатку це здається легким рішенням, але він стає більш розчаровуючим, коли ви хочете повторно використовувати макет кілька разів, переміщатися по елементах, оптимізувати дизайн для мобільних пристроїв або підтримувати код.
На цій посаді я покажу вам елегантне рішення, яке використовує лише CSS тільки один елемент HTML для досягнення такого ж ефекту. Ця методика також є чудовою для доступності, як вона завантажує фонове зображення в CSS, відокремлені від HTML.
До кінця цієї посади, ви будете знати, як це зробити відображає фонове зображення в області кордону для створення вирізання кордону ви можете побачити нижче. Я також покажу, як ви можете зробити дизайн чуйним використовуючи одиниці вікна перегляду.
Початковий код
Єдиною вимогою у фронті HTML є a блоковий елемент:
Потрібно повторне використання розміри (ширина і висота) і значення ширини кордону div, так що я представляю їх як змінні CSS. Змінна --w позначає ширина з .cb блоковий елемент, --h вказує його висота, --b йде на ширина кордону, і --b2 для межі ширини, помноженої на 2. Пізніше ми побачимо використання останньої змінної.
Я вимірюю розміри Пристрій Давайте поліпшимо цей код, додавши фон, і встановивши кордон, висоту і ширину використовуючи наші заздалегідь визначені змінні CSS. Ось як має виглядати демо зараз: Нам потрібне фонове зображення охоплюють всю територію Якщо ви хочете надати фоновому зображенню фіксований розмір, просто переконайтеся, що розмір, який ви надаєте, дає змогу покривати область меж The ширина фонового зображення [ Аналогічно висота фонового зображення [ Таким чином, ми розмірили фонове зображення на область, яка однакова до розміру The Примітка: Якщо ви додаєте додавання до Ось що ми маємо зараз: Тепер, коли ми охопили територію з включеним кордоном з фоновим зображенням, все, що залишається, - це охоплюють центральну зону всередині кордону (область виключення кордонів) з суцільним кольором, за яким ми досягаємо a Горизонтальна тінь зі значенням У демонстраційному коді Codepen можна побачити білу рамку навколо зображення. Там є відомий трюк використовувати тіні для створення кількох кордонів-ми можемо використовувати ту ж саму техніку додайте один або кілька кольорових кордонів до нашого дизайну. Оновлено The У моєму останньому коді Codepen, я розмістив код для фонового зображення і кольору тіні коробки в окремий клас. Це необов'язково, але може бути надзвичайно корисним, якщо ви хочете повторно використовувати макет оформлення кордону в декількох елементах і додати естетику (фонове зображення + колір) для кожного елемента незалежно. Я додав клас з ім'ям З Щоб встановити значення Так як розміри все в блоці Примітка: Не забудьте додати метатег вікна перегляду на вашу HTML-сторінку, якщо ви вирішили оптимізувати її для мобільного перегляду.vw блок (можна використовувати фіксовані одиниці, якщо хочете). .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2);
Швидке пояснення -
vw і vh одиницьvw являє собою 1/100й ширини вікна перегляду. Наприклад, 50vw 50 частин ширини вікна перегляду нарізаний вертикально на 100 рівних частин, час 50vh 50 частин висоти вікна перегляду нарізані горизонтально на 100 рівних частин. .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); фон: url (bg.jpg); border: var (- b) твердий прозорий; height: var (- h); width: var (- w);
Розмістіть фонове зображення
фону значення, яке я даю: .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); background: url (bg.jpg) center / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); border: var (- b) твердий прозорий; height: var (- h); width: var (- w);
calc (var (- w) + var (- b2))] є сумою ширина div [var (- w)] і ширина лівої та правої меж [var (- b2)].calc (var (- h) + var (- b2))] є сумою висота div [var (- h)] і ширина верхньої та нижньої меж [var (- b2)].div (включаючи прикордонний район).центр ключове слово вирівнює фонове зображення до центру div.div, пам'ятайте включають область заповнення до розміру фону, так само як і область кордону.
Прикрийте територію, що виключає кордон
box-shadow вставку. .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); background: url (bg.jpg) center / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); border: var (- b) твердий прозорий; box-shadow: inset var (- w) 0 0 rgba (0,120,237, .5); height: var (- h); width: var (- w);
var (- w) охоплює всю ширину div. Використання rgba Функція кольору дозволяє певна прозорість для додавання в суміш можна використовувати непрозорий колір, щоб повністю покрити центральну область.
Додайте додаткову межу
box-shadowbox-shadow значення: .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); background: url (bg.jpg) center / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); border: var (- b) твердий прозорий; box-shadow: inset var (- w) 0 0 rgba (0,120,237, .5), 0 0 0 calc (var (- b) / 2) білий; height: var (- h); width: var (- w);
calc (var (- b) / 2) Функція створює тінь половина ширини кордону.
Додатково: окрема розкладка та естетика
.poster1 до .poster1 --tbgc: rgba (0,120,237, .5); background-image: url ("http://bit.ly/2eQBij2"); фону є скороченою власністю, його властивості longhand можуть бути замінені / встановлені індивідуально. Отже, ми можемо встановити фонове зображення в .poster1, і видалити значення URL-адреси з фону майна в Росії .cb.box-shadow, ми можемо використовувати іншу змінну CSS. The --tbgc змінної містить значення кольору ми хочемо віддати коробку-тінь (lightblue в демо), тому серед правил стилю для .cb ми замінити значення кольору box-shadow майна з var (- tbgc). .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); background: center / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); border: var (- b) твердий прозорий; box-shadow: inset var (- w) 0 0 var (- tbgc), 0 0 0 calc (var (- b) / 2) білий; height: var (- h); width: var (- w);
Код для портретного режиму
vw, це буде виглядають занадто малі коли ви переглядаєте дизайн у портретному режимі (менша ширина щодо висоти), на яку за замовчуванням увійшли всі мобільні пристрої. Для вирішення цього питання, перемикач vw с vh, і змінити розмір дизайну як ви вважаєте за потрібне для портретних режимів. @media (орієнтація: портрет) .cb --w: 35vh; --h: 40vh; --b: 4vh;
