Преобрази текст на сайте с помощью text-shadow

21-09-2010

Размещено в рубрике: CSS

Преобрази текст на сайте с помощью text-shadow Здравствуйте уважаемые читатели. Этой статьей я открываю серию статей по новым возможностям, которые принесла нам такая технология как CSS3.

Как всегда попробую донести данные фишки не только до посвященных, но и до более так сказать начинающих веб-мастеров (не побоюсь этого слова )

Начнет эту серию: Text-Shadow ( в переводе как тень текста). Так же можно делать div с тенью

Те, кто читает мой блог не первый день или те, кто заходил на него и раньше – думаю, заметили, что изменился внешний вид, как заголовков статей, так и написание имен комментаторов.

Именно в заголовке этой статьи вы и видите работу данной фишки.

Стоит заметить использовать ее очень просто. Смотрите сами:

Стандартный синтаксис text-shadow

Положительные значения text-shadow

1	{text-shadow: 3px 4px 2px #000}

3px – это смещение тени по горизонтали (вправо на 3px);
4px – это смещение тени по вертикали (вниз на 4px);
2px – это растушевка тени (чем больше пикселей, тем более размытая тень);
#000 – это собственно цвет тени (черный цвет);

Пример: Синий цвет на белом фоне и черная тень

HTML:

1	<p class="prov">Проверка</p>

Стили:

1
2
3
4
5

.prov{
color:blue;
font-size:24px;
text-shadow: 5px 5px 2px #000;
}

Результат:

Отрицательные значения text-shadow

1	{text-shadow: -3px -4px 2px #000}

-3px – это смещение тени по горизонтали (влево на 3px);
-4px – это смещение тени по вертикали (вверх на 4px);
2px – это растушевка тени (чем больше пикселей, тем более размытая тень);
#000 – это собственно цвет тени (черный цвет);

Пример: Синий цвет на белом фоне и черная тень

HTML:

1	<p class="prov">Проверка</p>

Стили:

1
2
3
4
5

.prov{
color:blue;
font-size:24px;
text-shadow: -5px- 5px 2px #000;
}

Результат:

Один объект и несколько теней от text-shadow

Еще одной сильной стороной text-shadow есть возможность применить к одному объекту несколько теней.

Пример: синий текст и красная и желтая тень

HTML:

1	<p class="prov">Проверка</p>

Стили:

1
2
3
4
5

.prov{
color:blue;
font-size:24px;
text-shadow: -2px -2px 2px #ff0000, 5px 5px 2px #ff0;
}

Результат:

Теперь касательно того в каком порядке будут выстраиваться тени.

Дело в том, что text-shadow появилось еще в CSS2. Поэтому здесь два варианта:

CSS3 – первая тень по порядку размещается в самом верху, вторая ниже и т.д.;
CSS2 – первая тень по порядку размещается в самом низу, вторая выше и т.д.;