Как сделать тень на сайте

Чтобы сделать тень на сайте для текста или какого - либо элемента, необязательно прибегать к помощи Adobe Photoshop. Для этого достаточно использовать css - свойства text - shadow и box - shadow, которые помогут добавить красивую тень куда угодно: к изображениям и фото, к слову, букве, абзацу, блоку или виджету. Тени, сделанные с помощью css, можно комбинировать, создавая красивые переливы и градиенты у объектов, к которым они применяются. Так же можно регулировать прозрачность тени, размах, размытие и смещение по осям X и Y.

1.Допустим, у нас есть блок <div>

<div class="box"><p>Блок</p></div>
Сделаем тень для блока при помощи свойства box-shadow:
<style>
.box {
width:100%;
height:200px;
box-shadow:3px 4px 5px 1px rgb(78, 49, 8); /*тень*/
text-align: center;
padding: 13%;}
</style>

Пример:

Блок

Параметры тени:
3px - размер тени по оси X
4px - размер тени по оси Y
5px - размытие тени
1px - размах тени
rgba(204, 150, 75, 0.56) - цвет тени
Через запятую можно задать блоку несколько теней одновременно, добиваясь красивых эффектов перелива:
box-shadow:1px 0px 4px 4px rgba(204, 150, 75, 0.56), 1px 3px 2px 0px rgb(196, 46, 46)

Пример:

блок
2.Чтобы сделать внутреннюю css - тень, необходимо добавить свойство inset к параметрам тени:
box-shadow:inset 1px 0px 4px 4px rgba(204, 150, 75, 0.56)

Пример:

Блок

3. Задать css - тени для текста можно с помощью свойства text-shadow:

text-shadow:-2px 1px 2px rgba(8, 4, 4, 0.33)
где
-2px - размер тени по оси X
1px - размер тени оп оси Y
2px - размытие тени
rgba(8, 4, 4, 0.33) - цвет тени

Пример:

Блок

Как видно из примера, у текстовой тени отсутствует возможность задать ее размах. Текстовые тени так же можно комбинировать, придавая объем и красивые эффекты буквам.
В браузере Internet Explorer поддержка теней включена только с версии 10.0
В качестве альтернативы используется свойство filterShadow.
filter: Shadow(Color=#666666, Direction=45, Strength=4);
где:
#666666 - цвет
45 - угол тени в градусах
Strength - размытие тени

 

На этом все. Теперь вы знаете, как сделать тень на вашем сайте. Надеюсь, что статья была вам полезной!


css

Добавить комментарий

Ваш e-mail не будет опубликован.