Тень без использования фотошопа

Question

Возможно ли реализовать такую тень без фотошопа?

score 3 · Answer 1 · answered Mar 03 '16 at 13:03

3

Сразу напомню, что к img псевдоэлементы не применяются. Поэтому обязательно оборачиваем тег в обертку. И получаем следующее:

.image-block { 
    display:inline-block;
    position: relative;
    background: white;
}
.image-block:after {
    z-index: -1;
    content: '';
    width: 90%;
    height: 50%;
    position: absolute;
    bottom: 3px;
    left: 0;
    right: 0;
    margin: auto;
    background: none;    
    border-radius: 50%;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.6);
}
img {
vertical-align: middle;
}

<div class="image-block">
  <img src="http://yurkons24.ru/block-12-img-1.png">
</div>

answered Mar 03 '16 at 13:03

NeedH8

2,907

Мне нужно
обвернуть и что бы он был во всю ширину
– Родион Поляков Mar 03 '16 at 13:21
это немного не то – Родион Поляков Mar 03 '16 at 13:22
Вставьте кусочек кода Header – Валерий Емельянов Mar 03 '16 at 13:25
вместо image-block ставим
.
– NeedH8 Mar 03 '16 at 13:46

score 3 · Accepted Answer · answered Mar 03 '16 at 13:26

* + * {
  margin-top: 1em;
}
div {
  height: .5em;
  overflow: hidden;
}
div:before {
  content: "";
  display: block;
  height: 1em;
  margin: -1em auto 0;
  border-radius: 50%;
  box-shadow: 0 0 .5em 0px black;
}
.b-50:before {
  width: 50%;
}
.b-75:before {
  width: 75%;
}

<div class=b-50></div>
<div class=b-75></div>
<div></div>

Тень без использования фотошопа

2 Answers2