Как сделать эффект наложения только для CSS с помощью Box-Shadow

Оверлеи контента являются важной частью современного веб-дизайна. Они помогают скрыть элемент на веб-странице, а затем – с разрешения пользователя – раскрыть его и отобразить дополнительную информацию или элементы управления, например кнопки позади него.

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

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

Читайте также: 18 удивительных эффектов, которые вы можете создать с помощью CSS3 Box Shadows

Увидеть перо Цветное наложение с использованием Box-Shadow Прети (@rpsthecoder) на CodePen,
Избегайте добавления дополнительных элементов HTML
Наложения часто создаются путем размещения дополнительного элемента HTML с помутнение значение меньше 1 прямо над элементом, который нужно покрыть. Проблема заключается в том, что этот метод предполагает использование дополнительный элемент (или псевдоэлемент) для наложения.

Если вы не педантичны по размеру HTML, наличие дополнительного элемента для наложения, вероятно, не имеет большого значения, так как, скорее всего, оно не будет так сильно обременять пропускную способность любой сети. Однако имея отдельный правила стиля для элементов и их наложения по-прежнему вредят удобочитаемости и удобству сопровождения CSS.

Чтобы сохранить ваш код в порядке и не испортить ваш HTML, лучше использовать решение только для CSS.

Читайте также: Как оптимизировать CSS с помощью руководств по стилю кода

Создать оверлей с box-shadow
Так как же на самом деле создать оверлей только для CSS? С помощью коробчатого тень CSS свойство Ящик-тень идеально подходит для этой работы, поскольку что такое наложение, но темная тень отбрасывается на элемент?

Box-shadow имеет значение свойства, называемое inset, которое приводит к тому, что тень появляется внутри рамки блока.

Вставка box-shadow с размером тени, равным половине или более ширины и высоты элемента, создает тень, которая покрывает все элемент.

.box {
ширина: 200 пикселей;
высота: 200 пикселей;
тень блока: зеленый 0 0 0 100px вставка;
}

Тень коробки, покрывающая весь элементТак как оверлеи обычно имеют некоторую прозрачность, вам необходимо добавить их и к тени блока. Это можно сделать с помощью RGBA () функция для цвета тени.

Часть rgb в rgba представляет значения каналов красного, зеленого и синего цветов, а a представляет альфа-канал, который отвечает за прозрачность.

Для альфа-канала значение 1 создает непрозрачный цвет, а 0 создает полностью прозрачный цвет.

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

Читайте также: 18 удивительных эффектов, которые вы можете создать с помощью CSS3 Box Shadows

Создайте код для демо
Наше демо покажет изображения и имена разных покемонов. Здесь мы только создадим код для Bulbasaur, первого покемона в демоверсии, так как остальные сделаны таким же образом (на Codepen вы также можете проверить код для них).
HTML
Для HTML нам нужно только создать блок, в который мы добавим все остальное с помощью CSS.

CSS
В приведенном ниже CSS элементы .pokemon отображают изображения покемонов, а псевдоэлементы .pokemon :: after содержат имя покемона.

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

/ * картинки покемонов * /
.pokemon {
  ширина: 200 пикселей;
  высота: 200 пикселей;

  / * центрируем содержимое с помощью flex box * /
  дисплей: гибкий;
  justify-content: центр;
  align-items: center;

  / * оверлей * /
  box-shadow: 0 0 0 100px,
      0 0 5px серый;

  / * парящий переход * /
  переход: коробка-тень 1с;
}

/ * имена покемонов * /
.pokemon :: after {
  ширина: 80%;
  высота: 80%;
  дисплей: блок;
  шрифт: 16pt ‘bookman old syle’;
  белый цвет;
  граница: 2px solid;
  выравнивание текста: по центру;

  / * центрируем содержимое с помощью flex box * /
  дисплей: гибкий;
  justify-content: центр;
  align-items: center;

  / * парящий переход * /
  переход: непрозрачность 1 с. 5 с;
}

/ * раскрыть картинку покемонов при наведении * /
.pokemon: hover {
  переход: коробка-тень 1с;
  box-shadow: 0 0 0 5px,
  0 0 5px серый,
  0 0 10px серая вставка;
}

/ * скрыть имя покемона при наведении курсора * /
.pokemon: hover :: after {
  переход: непрозрачность .5s;
  непрозрачность: 0;
}

Когда элементы .pokemon наведены, их box-shadow нужно изменить, чтобы показать изображение позади.

Вы можете видеть, что селектор .pokemon: hover получает новую box-shadow, которая удаляет оверлей, а селектор .pokemon: hover :: after скрывает имя покемона, используя свойство opacity.

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

Так как box-shadow не имеет свойства longhand, вы не можете установить его цвет тени в отдельности с чем-то вроде, box-shadow-color; вместо этого – мы используем свойство цвета.

По умолчанию, когда вы задаете значение для свойства color, это значение применяется также к границе, цветам контура и теням рамки. Таким образом, вы можете просто использовать свойство color, чтобы добавить цвет box-shadow.

#bulbasaur {
  background-image: url (https://assets.hongkiat.com/uploads/css-only-overlays-box-shadow/bulbasaur.jpg);
  / * значение цвета, используемое для цвета тени блока * /
  цвет: rgba (71, 121, 94, 0,9);
}

#bulbasaur :: после {
  / * имя покемона * /
  содержание: «Бульбазаур»;
}

Цвет тени наложения использует вышеупомянутую функцию rgba () с 0,9 для альфа-значения, чтобы сделать наложение прозрачным.

Помимо цвета наложенной рамки-тени, вышеупомянутый CSS также добавляет правила, индивидуальные для каждого покемона – изображение в качестве background-image и имя.

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

Увидеть перо Цветное наложение с использованием Box-Shadow Прети (@rpsthecoder) на CodePen,