Мягкая тень для круглого объекта CSS
Как вы могли заметить на сайте есть кнопка наверх. Сделать кнопку было достаточно легко но вот не задача: весь сайт выполнен в стиле Material Design и на всех объектах есть мягкая тень которая рисовалась при помощи box-shadow но ведь кнопка круглая. Адекватный пользователь взял бы Photoshop или Illustrator и просто наложил тень на саму картинку. Но мне как-то эта идея пришла в голову после того как я справился с поставленой задачей. Сначала я попробовал просто наложить тень обычным box-shadow и получил круглую кнопку в квадрате с тенью.
Потоп я написал следующий код
border-radius: 50%;
box-shadow: 0 0 15px rgba(0,0,0,0.5);
Он заработал но тень была совсем не мягкая. После этого я залез в описание box-shadow и понял что эта функция не такая простая как кажется. После чтение документации и просмотра разных примеров получился вот такой код
border-radius: 50%; /*обязательно указываем радиус так как объект круглый*/
box-shadow: 0 0 10px 5px hsla(0, 0%, 0%, .15),
0 0 40px 10px hsla(0, 0%, 0%, .15), /*указываем несколько теней что-бы
inset 0 0 50px 90px hsla(0, 0%, 0%, .30); обеспечить тень со всех сторон круга*/
Вот так вот, надеюсь что данный код кому-то пригодится.
Потоп я написал следующий код
border-radius: 50%;
box-shadow: 0 0 15px rgba(0,0,0,0.5);
Он заработал но тень была совсем не мягкая. После этого я залез в описание box-shadow и понял что эта функция не такая простая как кажется. После чтение документации и просмотра разных примеров получился вот такой код
border-radius: 50%; /*обязательно указываем радиус так как объект круглый*/
box-shadow: 0 0 10px 5px hsla(0, 0%, 0%, .15),
0 0 40px 10px hsla(0, 0%, 0%, .15), /*указываем несколько теней что-бы
inset 0 0 50px 90px hsla(0, 0%, 0%, .30); обеспечить тень со всех сторон круга*/
Вот так вот, надеюсь что данный код кому-то пригодится.
Комментарии
Отправить комментарий