Тени в CSS. text-shadow и box-shadow
(Проголосуй)
В CSS тени бывают двух видов. Первый из которых – текстовая тень. Второй, тень у блока. Принцип одинаковый, но свойства применяемые для создания теней – разные. Итак давайте рассмотрим каждый поподробнее.
Начнем с более простого – текстовая тень или свойство CSS – text-shadow. У этого вида тени есть четыре свойства: цвет, смещение по горизонтали, смещение по вертикали и радиус размытия. Задавать свойства нужно именно в этом порядке.
Предположим, что у вас есть текст, заключенный в тег параграфа <p></p> и вы хотите задать ему тень каштанового цвета со смещением на 4 пикселя в обе стороны и с размытием в два пикселя.
Для этого в стилях прописываем следующее:
text-shadow: #ff7a7a 4px 4px 2px;
}
И получаем тень:
Текст с тенью CSS.
Теперь усложним задачу. Предположим, что вы хотите реализовать тень в две стороны со смещением в 7 и 2 пикселя и размытием в 3 пикселя. Для наглядности окрасим одну тень в красный цвет, другую в зеленый.
Для этого в стилях прописываем следующее:
text-shadow: #ff0000 7px 7px 3px, #00ff00 2px 2px 3px;
}
В итоге получаем две тени:
Текст с тенью CSS.
Так, с тенями в тексте разобрались, теперь тень блока <div>. Это чуть сложнее, но смысл тот-же. Кстати тень блока или box-shadow работает в CSS с третьей версии.
Параметры, которые можно задать при создании тени блока: сдвиг по вертикали и горизонтали, цвет, размытие, растяжение, тень внутри блока.
К примеру у нас есть блок размером 200*200 пикселей, которому мы и хотим задать тень. Сделаем синюю тень без сдвига с размытием в 5px.
Для этого в стилях прописываем следующее:
width: 200px;
height: 200px;
box-shadow: 0 0 5px #0000ff;
}
В итоге получаем:
width: 200px;
height: 200px;
box-shadow: 0 0 5px #0000ff, 0 0 3px #ff0000 inset;
}
Вот так просто можно добавить красивый эффект тени на вашем блоге/сайте.