CSS тень блока|Как создать красивую css тень блока

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

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

Свойство box-shadow для создания тени

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

Он прикрепляет к коробке одну или несколько теней. Свойство принимает либо значение none, которое указывает на отсутствие теней, либо разделенный запятыми список теней, упорядоченных спереди назад.

Больше информации на: www.w3.org

А вот и сам код блока:

<div style=»height: 20px; width: 300px; margin: auto 20%; background-color: #fff; div.radius border-radius: 0px; box-shadow: 0 0px 3px 3px #777; } border-left: 4px solid #ff9218;» align=»center»></div>

Расшифровка значений:

• height:   2 0px — высота блока
• width:   3 00px — ширина блока
• margin: auto 20% — выравнивания блока (центрирование)
• background-color — цвет фона внутри блока
• div. radius border-radius — радиус закругления углов
• box-shadow — тень блока 0 0 3 px — расстояния тени от блока, 3 px — толщина тени.
• border-center: 1px solid #D02A2A; » — сплошная линия по левому краю
  align=» center»  — выравнивание по центру
• box-shadow (значения отвечающее за тень,   0 сторона тени -право, лево, 0 — сторона тени верх, низ, 3px — ширина тени, 3px — отдаленность или ее размытость. (0 0 3px 3px)

Результат css тени блока:

Ширина тени 3 px -размытость тени 3 пикселя, угол падения равен 0 (box-shadow 0 0 3 px 3 px ):

Здесь ширина так же 3 px а ее размытость на 29 px, угол падения тени 0 (box-shadow 0 0 3 px 29 px)

Что бы Тень была сверху, пишем отрицательное число -10px (box-shodow 0 -10px 29px 3px)

Что бы тень была снизу необходимо второй число 0  исправить на любое другое, например (box-shodow 0 10 px 29 px 3 px )

Что бы тень была с боку, для этого прописываем число первому 0 отвечающее за сторону падения, например 5 px тень будет с правой стороны, отрицательное число с левой стороны, например (box-shodow -7px -7px 34px 2px) -тень сверху с лево.

Если сделать тень и фон одинаковым цветом, получится такой эффект (box-shadow 0 3 px 3 px):

Можно к этому коду добавить значения  webkit-transform: rotate(3deg) — что создает эффект наклона блока положительное число 3 deg — наклон в право, отрицательное -3deg — наклон в лево.

Например  box-shadow: 0 14px 11px #777;  -webkit-transform: rotate (3 deg);

Цвета тени, цвета заливки блока, толщина тени, ее размытость, стороны ее падения, могут быть самыми разными.  Эксперементируя, можно выбрать, что то для себя подходящее.

В интернете можно найти кучу примеров как сделать красивую тень, нужно просто подобрать то что подойдет именно для вашей ситуации.