Чтобы сделать css тень на сайте для текста или какого - либо блока, необязательно прибегать к помощи 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>
.box {
width:100%;
height:200px;
box-shadow:3px 4px 5px 1px rgb(78, 49, 8); /*тень*/
text-align: center;
padding: 13%;}
</style>
Пример:
Блок
Параметры тени:3px - размер тени по оси X4px - размер тени по оси Y5px - размытие тени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В качестве альтернативы используется свойство filter: Shadow.
filter: Shadow(Color=#666666, Direction=45, Strength=4);
где:
#666666 - цвет
45 - угол тени в градусах
Strength - размытие тени
На этом все. Теперь вы знаете, как сделать тень на вашем сайте. Надеюсь, что статья была вам полезной!
