Як до ефекту CSS-Overlays з ефектом Box-Shadow

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

Типовим є накладення напівпрозорі, з суцільний колір фону (зазвичай чорний), і на ньому є текст або кнопки для перегляду або взаємодії з користувачами. Після взаємодії (клацання або зависання) відбувається накладення видаляється та показує вміст під ним.

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

Уникайте додавання додаткових елементів HTML

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

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

Щоб утримати свій код в порядку, а не переплутати ваш контур HTML, кращим вибором є використання рішення, призначеного лише для CSS.

Створити накладання за допомогою box-shadow

Як же ви дійсно можете створити лише накладення CSS? За допомогою box-shadow Властивість CSS. Коробка-тінь ідеально підходить для цієї роботи, оскільки є накладення темна тінь, нанесена над елементом?

Коробка-тінь має назву властивості вставку, що призводить до появи тіні всередину рамки коробки.

Вставка-тінь з розміром тіні в половину або більше половини ширини і висоти елемента створює тінь охоплює цілком елемент.

 .ширина: 200px; висота: 200px; box-shadow: зелений 0 0 0 100px inset;  

Оскільки накладки зазвичай мають певну прозорість, потрібно також додати його до тіні вікна. Це можна зробити за допомогою rgba () Функція для кольору тіней.

The rgb частина rgba, представляє, червоний, зелений і синій кольори каналу значення, в той час як a являє собою альфа-канал, який відповідальність за прозорість.

Для альфа-каналу значення 1 створює непрозорий колір, в той час як 0 створює a повністю прозорий колір.

Призначаючи значення між 0 і 1 альфа-каналу значення кольору rgba тіні вікна, ви можете створити напівпрозорий наклад.

Створіть код для демонстрації

Наша демонстрація покаже зображення та імена різних покемонів. Тут ми будемо створювати тільки код для Bulbasaur, першого покемона в демо, так як інші робляться так само (на Codepen ви також можете перевірити код для них).

HTML

Для HTML потрібно лише створити вікно до яких ми додамо все інше з CSS.

CSS

У нижченаведеному CSS .покемон елементи показують зображення покемон, і .pokemon :: after псевдоелементи несуть ім'я покемона.

З тих пір box-shadow власності може приймати кілька значень щоб візуалізації декількох тіней, крім накладення тіні, я також додав інші тіні сірого до .покемон і .pokemon: hover елементи для естетики.

 / * покемон фотографії * / .pokemon ширина: 200px; висота: 200px; / * вміст центру, використовуючи флекс * / дисплей: flex; justify-content: центр; align-items: центр; / * накладання * / box-shadow: 0 0 0 вставка 100px, 0 0 5px сіра; / * перехід * / перехід: box-shadow 1s;  / * імена покемонів * / .pokemon :: after width: 80%; висота: 80%; дисплей: блок; шрифт: 16pt 'bookman old syle'; колір: білий; кордон: 2px твердий; text-align: center; / * вміст центру, використовуючи флекс * / дисплей: flex; justify-content: центр; align-items: центр; / * hover out transition * / перехід: непрозорість 1s .5s;  / * показувати зображення pokemon на hover * / .pokemon: hover перехід: box-shadow 1s; box-shadow: 0 0 0 5px inset, 0 0 5px сірий, 0 0 10px сірий вставка;  / * приховати ім'я pokemon на hover * / .pokemon: hover :: after перехід: непрозорість 5s; непрозорість: 0;  

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

Ви можете бачити, що .pokemon: hover селектор отримує нову скриньку, що видаляє накладання, і .pokemon: hover :: after селектор приховує ім'я покемону за допомогою непрозорість власності.

Можливо, ви також помітили відсутність колірних значень в накладних коробках тіней в .покемон і .pokemon: hover правила стилю. Необхідно вказати колір накладання тіні окремих покемонів у своїх власних правилах стилю, оскільки всі вони відрізняються один від одного.

Як box-shadow не має жодного довгострокового майна, не можна встановити колір тіні індивідуально з чимось подібним, коробка-тінь-колір; замість цього - ми використовуємо колір власності.

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

 #bulbasaur background-image: url (https://assets.hongkiat.com/uploads/css-only-overlays-box-shadow/bulbasaur.jpg); / * значення кольору, яке використовується для кольорової коробки тіні * / color: rgba (71, 121, 94, 0.9);  #bulbasaur :: after / * ім'я покемона * / зміст: 'Bulbasaur';  

Колір тіні накладення використовує вищезазначене rgba () функція з 0,9 для значення альфа, щоб зробити накладення прозорим.

Окрім кольору накладання box-shadow, вищезгаданий CSS також додає правила, які є індивідуальними для кожного покемона - зображення як фонове зображення і ім'я.

І це все, ми готові до накладання кольорового зображення лише для CSS. Подивіться на код усіх покемонів у пері нижче.