Тень по центру, css, полукруглая тень

353
29 сентября 2017, 18:03

Как сделать такую тень как на рисунке? т.е. чтобы тень как-бы расширялась к центру

Answer 1

Если другого варианта не найдете: создаем под данным элементом овал с тенью и делаем его немного меньше по высоте, чем данный элемент. Если с размытием и растяжение поиграться, то можно сделать идентичную тень.

.out { 
  position: relative; 
  width: 500px; 
  height: 80px; 
  background: #000; 
  border-radius: 150px / 40px; 
  box-shadow: 0px 43px 7px -35px rgba(0,0,0,0.6); 
} 
 
.in { 
  position: absolute; 
  width: 500px; 
  height: 86px; 
  background: #fff; 
}
<div class="out"><div class="in"></div></div>

READ ALSO
div не прокручивается при фиксированном body
CSS

div не прокручивается при фиксированном body

весь мозг уже сломал

 262
Wordpress и визуальный редактор
HTML

Wordpress и визуальный редактор

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

 253
движение при скроле
HTML

движение при скроле

Есть такой кусочек кода:

 329
Подключение JS файлов в HTML Документ
HTML

Подключение JS файлов в HTML Документ

Здравствуйте! Только начинаю верстать, прошу помощиЕсть несколько скриптов на странице (кнопка наверх, плавная прокрутка по пунктам меню,...

 406