Создание эффектной цветной тени от картинки на HTML и CSS

Содержание

Как выглядит цветная тень?
Как создать цветную тень?
1. HTML
2. CSS

Стандартные средства CSS3 позволяют задать изображению или блоку свойство box-shadow, тем самым создать однотонную тень от объекта. В нашем случае мы откажемся от привычных приемов и сделаем цветную тень, эффектно дополняющую картинку. Цвет тени будут составлять оттенки, используемые в краях изображения, что добавит уникальности в оформлении сайта.

Как выглядит цветная тень?

Совершенно потрясающий эффект, который вы можете увидеть на примерах ниже.

Как создать цветную тень?

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

HTML

<div class="image-block">
  <div class="image">
    <div class="image-shadow" style="background-image: url('http://site.ru/image.jpg');"></div>
    <img src="http://site.ru/image.jpg" alt="Цветная тень от картинки" />
  </div>
</div>

CSS

div.image-block img {
  position: relative;
  width: auto;
}
  div.image-block div.image {
  position: relative;
  text-align: center;
}
  div.image-shadow {
  position: absolute;
  top: 15%;
  left: 5%;
  right: 5%;
  height: 90%;
  background-size: auto;
  background-position: center bottom;
  background-repeat: no-repeat;
  border-radius: inherit;
  -webkit-filter: blur(25px);
  filter: blur(25px);
}

3,336 total views, 5 views today