CSS Эффекты для изображений – Виньетка и Box Shadow

CSS Эффекты для изображений – Виньетка и Box Shadow

CSS Эффекты для изображений – Виньетка и Box Shadow

В этом посте мы рассмотрим CSS эффекты для изображений box-shadow и один из самых популярных фото фильтров: виньетка. Виньетка добавляет тень изображению вокруг углов, чтобы привлечь внимание к центру. Есть несколько способов, чтобы получить этот эффект с помощью CSS.

 

Метод 1: Box Shadow

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

Как работает это правило:

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];

Вот редактируемый пример довольно стандартного использования box-shadow:

div для всех примеров
/* это div для всех примеров, меняется только класс */
<div class="normal-shadow-ex"></div>

.normal-shadow-ex {
  background: hotpink;
  height: 180px;
  box-shadow: 10px 10px 20px black;
}

Но box-shadow также имеет свойство inset, которое изменяет направление распространения тени. Вместо наружного распространения тени от DIV, путь распространения тени работает к центру. Если мы возьмем тот же код, что и выше, но добавим ключевое слово inset, пример будет выглядеть следующим образом:

.inner-shadow-ex {
  background: hotpink;
  height: 180px;
  box-shadow: inset 10px 10px 20px black;
}

Таким образом, мы можем сосредоточить нашу тень, задать ей значение 0 для его вертикального и горизонтального смещения, и расширить ее для распространения в более широком диапазоне:

.vignette-shadow-ex {
  background: hotpink;
  height: 180px;
  box-shadow: inset 0 0 100px black;
}

Вот так, с одной строкой кода мы можем добавить виньетку нашим изображениям! Однако есть одна загвоздка, — при применении box-shadow браузер создает тень за содержанием, потому, что <img> это содержание, применение свойства inset не позволит нам увидеть тень, поэтому, мы должны использовать псевдо элементы или дивы:

.vignette-inset {
  position: relative;
  height: 400px;
  display: block;
  background-image: url('..atx-rooftop-2.jpg');
  background-size: cover;
}
 
.vignette-inset:after {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  box-shadow: inset 0px 0px 150px black;
}
 
/* снимает тень при наведении
для демонстрационных целей */
.vignette-inset:hover:after {
  box-shadow: none;
}

Неплохо, но не совсем! Это еще не настоящая виньетка. Настоящая виньетка круглая, из-за округлости фильтра объектива. Но есть, к счастью решение!

 

Способ 2: радиальными градиентами

Основной фон радиального градиента, от прозрачного ( RGBA ( 0 , 0 , 0 , 0 ) ) до черного ( RGBA ( 0 , 0 , 0 , 1 ) ) выглядит следующим образом, он наносится поверх Hotpink базы:

.gradient-1 {
  background: radial-gradient(transparent, black), hotpink;
  height: 180px;
}

Теперь, изображение темнеет намного больше. Это потому, что мы имеем идеальное сочетание прозрачного цвета (на 0%) до черного цвета (на 100%).Теперь, чтобы сделать наше фоновое изображение более заметным, мы можем применить к прозрачной части градиента свою смесь с помощью прозрачности радиального градиента.

.gradient-2 {
  background: radial-gradient(transparent 50%, black), hotpink;
  height: 180px;
}

Эффект Линзы

Теперь уже немного ближе, но это все равно пока не «настоящая» виньетка. Если мы подумаем о виньетке в области фотографии, мы вспомним, что объектив создает потемнение вокруг изображения.

Таким образом, чтобы решить эту проблему, мы можем сначала изменить форму эллипса нашего градиента, чтобы имитировать объектив и создать идеальный круг от центра изображения. Следующее, что мы сделаем, это расширим распространение темного цвета на внешней стороне границы изображения. Эти две вещи вместе выглядят следующим образом:

.gradient-3 {
  background: radial-gradient( circle, transparent 50%, black 150%), hotpink;
  height: 180px;
}

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

.vignette-radial {
  position: relative;
  height: 400px;
  display: block;
  background-image: url('..atx-rooftop-2.jpg');
  background-size: cover;
}
 
.vignette-radial:after {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background: radial-gradient(circle, transparent 50%, black 150%);
}
 
/* снимает тень при наведении
для демонстрационных целей */
.vignette-radial:hover:after {
  background: none;
}

Способ 3: Градиенты Blended

Градиенты могут быть не только черно-белыми. Мы можем получить цветной градиент, используя цвет и сочетание режимов! Для этого, мы используем режим смешивания слоя с градиентом на верхней части изображения.

В частности, режимы наложения diference и exclusion обеспечивают довольно опрятные эффекты при использовании. Эти два режима наложения являются сравнительными режимами смешивания, и, по существу, принимают перекрывающиеся пиксели и разделяют их друг от друга на основе каждого канала, чтобы найти их разность.

Первоначально они были использованы для документов. Когда документ был совершенно черный (в случае diference) или на 50% серого цвета (в случае exclusion) они были точно выровнены. Единственное отличие состоит в том, что в режиме смешиванияdiference, идентичные пиксели компенсируются черным, а для exclusion, они компенсируют до 50% серого.

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

.vignette-colorful {
  position: relative;
  height: 400px;
  display: block;
  background-image: url('..atx-rooftop-2.jpg');
  background-size: cover;
}
 
.vignette-colorful:after {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background: radial-gradient(circle, transparent 50%, red 150%);
  mix-blend-mode: difference;
}
 
/* снимает тень при наведении
для демонстрационных целей */
.vignette-colorful:hover:after {
  background: none;
}

Итог, CSS эффекты для изображений – виньетка и box-shadow легко реализуемы, однако виньетка более реалистична, чем градиенты box-shadow. Да и цвета веселее.

Aliexpress INTAliexpress INTAliexpress INT

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *