Генератор тени блока CSS

Если вам необходимо создать тень для какого-нибудь блока на вашем сайте, воспользуйтесь генератором тени блока CSS ниже. Как им пользоваться, я думаю вы разберетесь без особого труда. Конечно для этого необходимо иметь хотя бы элементарное представление о том, что такое CSS. Когда выберете необходимый тип и цвет тени, просто скопируйте полученный код.

box-shadow generator

Свойство box-shadow создаёт элементу тень.

↔
↕
●
●

	inset

А вот сейчас самое интересное. Что может творить свойство box-shadow в CSS с блоком. Все нижеприведенные примеры вы можете проверить прямо на этой странице, меняя данные прямо в коде блоков и посмотреть, что из этого выйдет. А так-же скопировать полученный код и вставить на свой сайт в стиль CSS для вашего блока.

Объёмный блок из нескольких box-shadow

цвет одной стороны

цвет другой стороны

толщина тени


<div id="cube"></div>

Эффект тени блока

Тень вокруг div CSS

CSS тень с одной стороны, например снизу

CSS тень по сторонам

Многослойный блок с помощью box-shadow

Разноцветная CSS рамка

CSS внутренняя тень блока (внутри элемента)

Как сделать вдавленный элемент

Выпуклый элемент с закругленными углами

Подсветка внутри input, например такая форма входа CSS:


<input type="text" placeholder="псевдоним или email" class="backlight"/>
<input type="password" placeholder="пароль" class="backlight">

box-shadow и transition или animation

box-shadow можно плавно изменять, но нужно учитывать особенность этого изменения:

? нет да


<span class="dva1">да</span>
<span class="dva2">нет</span>
<span class="dva3">да</span>

Понравилась статья? Поделись!