Как сделать эффект наложения только для CSS с помощью Box-Shadow
Наложения содержимого являются выдающейся частью современного веб-дизайна. Они помогают тебе скрыть элемент на веб-странице и позже - с разрешения пользователя - покажи это, и отображать дополнительную информацию или элементы управления, такие как кнопки позади него.
Типичное наложение полупрозрачный, с сплошной цвет фона (обычно черный), и на нем есть текст или кнопки, чтобы пользователи могли видеть их или взаимодействовать с ними. После взаимодействия (щелчка или зависания) наложение удаляется и раскрывает содержание под этим.
В этой статье мы рассмотрим, как добавить цветное наложение на изображения используя чистый CSS. Вы можете увидеть окончательный результат на демо ниже. Наведите на изображения, чтобы сделать наложения, чтобы показать покемонов. Хотя в этом посте обсуждаются изображения, представленная в нем техника может быть безопасно применена и к другим типам контента (например, к текстовым блокам)..
Избегайте добавления дополнительных элементов HTML
Наложения часто создаются позиционирование дополнительного HTML-элемента с помутнение значение меньше 1 прямо над элементом, подлежащим покрытию. Проблема заключается в том, что этот метод предполагает использование дополнительный элемент (или псевдоэлемент) для наложения.
Если вы не педантичны по размеру HTML, наличие дополнительного элемента для наложения, вероятно, не имеет большого значения, так как, скорее всего, оно не будет слишком сильно обременять пропускную способность любой сети. Однако имея отдельный правила стиля для элементов и их наложения по-прежнему вредят удобочитаемости и удобству сопровождения CSS.
Чтобы сохранить ваш код в порядке и не испортить ваш HTML, лучше использовать решение только для CSS.
Создать оверлей с коробчатого тень
Так как же на самом деле можно создать оверлей только для CSS? С помощью коробчатого тень CSS свойство Коробка-тень идеально подходит для этой работы, так как темная тень отбрасывает на элемент?
Box-shadow имеет значение свойства, которое называется вставка, что приводит к появлению тени внутрь рамы коробки.
Вставка box-shadow с размером тени, равным половине или более ширины и высоты элемента, создает тень, которая покрывает все элемент.
.коробка ширина: 200 пикселей; высота: 200 пикселей; box-shadow: зеленый 0 0 0 100px вставка;
Поскольку наложения обычно иметь некоторую прозрачность, Вам также нужно добавить его в тень блока. Это можно сделать с помощью RGBA () функция для цвета тени.
RGB часть rgba, представляет значения каналов красного, зеленого и синего цветов, а представляет альфа-канал, который ответственность за прозрачность.
Для альфа-канала значение 1 создает непрозрачный цвет, в то время как 0 создает полностью прозрачный цвет.
Присвоив значение от 0 до 1 альфа-каналу значения цвета rgba тени блока, вы можете создать полупрозрачный оверлей.
Создать код для демо
Наше демо покажет изображения и имена разных покемонов. Здесь мы только создадим код для Bulbasaur, первого покемона в демоверсии, так как остальные сделаны таким же образом (на Codepen вы также можете проверить код для них).
HTML
Для HTML нам нужно только создать коробку к которому мы добавим все остальное с помощью CSS.
CSS
В CSS ниже .покемон элементы отображают изображения покемонов, а .покемон :: после псевдоэлементы носят имя покемона.
Так как коробчатого тень имущество может принимать несколько значений чтобы сделать несколько теней, Помимо наложенной тени, я также добавил другие тени серого .покемон а также .Покемон: зависать элементы для эстетики.
/ * картинки покемонов * / .pokemon width: 200px; высота: 200 пикселей; / * центрируем содержимое с помощью flex box * / display: flex; justify-content: центр; align-items: center; / * оверлей * / box-shadow: 0 0 0 100px inset, 0 0 5px grey; / * переход при зависании * / переход: box-shadow 1s; / * имена покемонов * / .pokemon :: after width: 80%; высота: 80%; дисплей: блок; шрифт: 16pt 'bookman old syle'; белый цвет; граница: 2px solid; выравнивание текста: по центру; / * центрируем содержимое с помощью flex box * / display: flex; justify-content: центр; align-items: center; / * hover out transition * / transition: непрозрачность 1 с. 5 с; / * показать изображение покемона при наведении * / .pokemon: hover transition: box-shadow 1s; тень от рамки: 0 0 0 5px вставка, 0 0 5px серая, 0 0 10px серая вставка; / * скрыть имя покемона при наведении курсора * / .pokemon: hover :: after transition: opacity .5s; непрозрачность: 0;
Когда .покемон элементы наведены, их box-shadow нужно изменить, чтобы показать изображение позади.
Вы можете видеть, что .Покемон: зависать селектор получает новую тень блока, которая удаляет оверлей, и .Покемон: парить :: после селектор скрывает имя покемона с помощью помутнение имущество.
Вы могли также заметить отсутствие цветовых значений в оверлейной коробке-тени в .покемон а также .Покемон: зависать правила стиля. Нужно указать цвет оверлея-оверлея для отдельных покемонов в своих собственных правилах стиля, так как они все отличаются друг от друга.
Как коробчатого тень не имеет произвольного свойства, Вы не можете установить его цвет тени в отдельности с чем-то вроде, коробчатого тень цвета; вместо этого - мы используем цвет имущество.
По умолчанию, когда вы даете значение для цвет свойство, это значение применяется для границы, контура и цветов теней также. Таким образом, вы можете просто использовать цвет свойство добавлять цвет в 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 / * имя покемона * / content: 'Bulbasaur';
Цвет наложенной тени использует вышеупомянутый RGBA () функция с 0,9 для альфа-значения, чтобы сделать наложение прозрачным.
Помимо цвета наложенной рамки-тени, вышеупомянутый CSS также добавляет правила, индивидуальные для каждого покемона - изображение как изображение на заднем плане и имя.
И все, мы готовы с наложением цветных изображений только для CSS. Посмотрите на код всех покемонов в ручке ниже.
