Сделай сайт. Легко.

свойство box-shadow

Песочница

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




object-fit

Как создать объёмный HTML элемент из нескольких box-shadow

box-shadow может иметь сколько угодно значений. Поэтому им можно заменить картинки форматов JPEG, PNG и даже GIF [инструмент lvivski.com]. Можно, но не нужно. А вот создание объёма может быть полезным для того, чтобы смастерить, например, объёмную красивую кнопку.

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

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

толщина тени


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

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

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

Хм, отбрасывает ли предмет тень, когда свет на него падает сверху? Да, если предмет удалён от поверхности. Чем дальше, тем интенсивнее тень.

CSS тень с одной стороны

Снизу (под блоком div)

По бокам (справа и слева)

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

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

Еще варианты можно посмотреть у css.yoksel.ru.

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

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

Как сделать выпуклый элемент с округлыми краями

box-shadow inset и картинка img

котёнок мечтает стать львом

<span class="boxShadow20"><img alt="котёнок мечтает стать львом" src="http://murka.lark.ru/files/css/B/images/mechty.jpg" height="400" width="302"/></span>

box-shadow и HTML тег input

Сначала поле как-будто вдавленное, при наведении появляется голубая обводка, а при фокусе виден эффект плавно появляющегося свечения. Вот так может выглядеть всплывающая форма обратной связи.


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

Или подсветка внутри 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>

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !