Как сделать тень с помощью CSS свойства text-shadow.
С приходом CSS3 мы получили массу возможностей и инструментов, которые значительно облегчают работу по созданию привлекательного фронт-енда. Многие вещи мы теперь можем делать программно без Фотошопа.
В данной статье мы рассмотрим достаточно интересное свойство text-shadow.
Базовое использование.
В данном случае, text-shadow – это простое свойство, которое легко можно назначить любому элементу, например, вот так:
1 2 3 |
.shadow1 { text-shadow: 3px 3px 1px gray; } |
Как видите, здесь мы имеем 4 значения:
• Горизонтальный отступ от текста. Положительное число сдвигает тень вправо, отрицательное – влево.
• Вертикальный отступ от текста. Положительное число сдвигает тень вниз, отрицательное – вверх.
• Радиус размытия тени. Большие значения делают тень более размытой
• Базовый цвет тени.
В этих двух примерах используются разные значения для размытия тени: 1px и 7px.
Вы можете добавить несколько теней в качестве значения данной свойства:
1 2 3 4 |
.shadow3 { text-shadow: 1px 1px 1px #666, 3px 3px 8px black; } |
Можно сделать что-то подобное 3D эффекту:
1 2 3 4 5 6 |
.shadow6 { text-shadow: -1px -1px 1px #aaa, 0px 4px 1px rgba(0,0,0,0.5), 4px 4px 5px rgba(0,0,0,0.7), 0px 0px 7px rgba(0,0,0,0.4); } |
Еще один примерчик использования нескольких значений для тени:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.shadow9 { text-shadow: 0 1px #808d93, -1px 0 #cdd2d5, -1px 2px #808d93, -2px 1px #cdd2d5, -2px 3px #808d93, -3px 2px #cdd2d5, -3px 4px #808d93, -4px 3px #cdd2d5, -4px 5px #808d93, -5px 4px #cdd2d5, -5px 6px #808d93, -6px 5px #cdd2d5, -6px 7px #808d93, -7px 6px #cdd2d5, -7px 8px #808d93, -8px 7px #cdd2d5; } |
В общем, у вас есть поле для творческих изысканий.
По мотивам статьи Chris Mills
Категория: Используем CSS