Как сделать тень с помощью CSS свойства text-shadow.


С приходом CSS3 мы получили массу возможностей и инструментов, которые значительно облегчают работу по созданию привлекательного фронт-енда. Многие вещи мы теперь можем делать программно без Фотошопа.
В данной статье мы рассмотрим достаточно интересное свойство text-shadow.

Базовое использование.

В данном случае, text-shadow – это простое свойство, которое легко можно назначить любому элементу, например, вот так:

1
2
3
.shadow1 {
    text-shadow: 3px 3px 1px gray;
}

Как видите, здесь мы имеем 4 значения:

• Горизонтальный отступ от текста. Положительное число сдвигает тень вправо, отрицательное – влево.
• Вертикальный отступ от текста. Положительное число сдвигает тень вниз, отрицательное – вверх.
• Радиус размытия тени. Большие значения делают тень более размытой
• Базовый цвет тени.

В этих двух примерах используются разные значения для размытия тени: 1px и 7px.

Как сделать тень с помощью CSS свойства text-shadow

Как сделать тень с помощью CSS свойства text-shadow

Вы можете добавить несколько теней в качестве значения данной свойства:

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);
}

Как сделать тень с помощью CSS свойства text-shadow

Еще один примерчик использования нескольких значений для тени:

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;
}

Как сделать тень с помощью CSS свойства text-shadow

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

По мотивам статьи Chris Mills

Другие посты

Категория: Используем CSS

Оставить комментарий


Яндекс.Метрика