Домашня » Кодування » Як створити виріз кордону з CSS

    Як створити виріз кордону з CSS

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

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

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

    Початковий код

    Єдиною вимогою у фронті HTML є a блоковий елемент:

     

    Потрібно повторне використання розміри (ширина і висота) і значення ширини кордону div, так що я представляю їх як змінні CSS. Змінна --w позначає ширина з .cb блоковий елемент, --h вказує його висота, --b йде на ширина кордону, і --b2 для межі ширини, помноженої на 2. Пізніше ми побачимо використання останньої змінної.

    Я вимірюю розміри

    щодо ширини вікна перегляду, отже, використання vw блок (можна використовувати фіксовані одиниці, якщо хочете).

     .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2);  
    Швидке пояснення - vw і vh одиниць

    Пристрій vw являє собою 1/100й ширини вікна перегляду. Наприклад, 50vw 50 частин ширини вікна перегляду нарізаний вертикально на 100 рівних частин, час 50vh 50 частин висоти вікна перегляду нарізані горизонтально на 100 рівних частин.

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

     .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);  

    The ширина фонового зображення [calc (var (- w) + var (- b2))] є сумою ширина div [var (- w)] і ширина лівої та правої меж [var (- b2)].

    Аналогічно висота фонового зображення [calc (var (- h) + var (- b2))] є сумою висота div [var (- h)] і ширина верхньої та нижньої меж [var (- b2)].

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

    The центр ключове слово вирівнює фонове зображення до центру div.

    Примітка: Якщо ви додаєте додавання до div, пам'ятайте включають область заповнення до розміру фону, так само як і область кордону.

    Ось що ми маємо зараз:

    Прикрийте територію, що виключає кордон

    Тепер, коли ми охопили територію з включеним кордоном з фоновим зображенням, все, що залишається, - це охоплюють центральну зону всередині кордону (область виключення кордонів) з суцільним кольором, за яким ми досягаємо a 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-shadow

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

    Оновлено 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), 0 0 0 calc (var (- b) / 2) білий; height: var (- h); width: var (- w);  

    The calc (var (- b) / 2) Функція створює тінь половина ширини кордону.

    Додатково: окрема розкладка та естетика

    У моєму останньому коді Codepen, я розмістив код для фонового зображення і кольору тіні коробки в окремий клас. Це необов'язково, але може бути надзвичайно корисним, якщо ви хочете повторно використовувати макет оформлення кордону в декількох елементах і додати естетику (фонове зображення + колір) для кожного елемента незалежно.

    Я додав клас з ім'ям .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;  

    Примітка: Не забудьте додати метатег вікна перегляду на вашу HTML-сторінку, якщо ви вирішили оптимізувати її для мобільного перегляду.

    © Savtec
    Корисна інформація та поради по веб-розробці. Програмування, веб-дизайн, CSS, HTML, JAVASCRIPT. Налагодження та перевстановлення WINDOWS. Створення сайтів і додатків з нуля.