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

#css3

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


    

Ответы

Ответ 1

* + * {
  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%;
}





Ответ 2

Сразу напомню, что к 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;
}