Возможно ли реализовать такую тень без фотошопа?
2 ответа
* + * {
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>
Сразу напомню, что к 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>