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

Преобрази текст на сайте с помощью 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

Отрицательные значения 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

Еще одной сильной стороной 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

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

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

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

Обязательные и необязательные параметры text-shadow

В text-shadow обязательны только два первые параметры:

1
text-shadow {1 2 3 #4}

Обязательные:

  • 1 — сдвиг по горизонтали;
  • 2 — сдвиг по вертикали;

Не обязательные:

  • 3 – растушевка тени (если не указана, то тень максимально жесткая как при 0px);
  • 4 – цвет тени (если не указана, берется цвет текста);

Хотя стоит заметить, когда не ставлю цвет тени, тогда ее не видно вообще. Может, туплю ???

Как видите это довольно просто. Никаких тебе премудростей и тому подобного.

Указал на расположение по горизонтали, вертикали, четкость тени и задал цвет, все.

На этом все. Удачи!

С уважением Тригуба Сергей!

P.S. Стоит заметить. Я уже написал статью о «border-radius». И немножко подзабыл об этом. Так, что извините.

Интересное — Супер гитарист:

Автор:
Приглашаю присоединиться ко мне в следующих сервисах:
Получайте новые статьи по созданию сайтов на ваш почтовый ящик.

Комментарии Вконтакте:

Комментарии Facebook:

Комментариев9 комментариев

Здорово получается. Легко и без затей, но как всегда, IE мировые стандарты по боку.

    Но все таки есть свет в конце тунеля. IE 9 beta все поддерживает!

    Будет надеятся, что переход на него бывших IE — шников будет быстрым.

    Хотя я пробывал. Сразу видно, что Microsoft. Вроде и хорошо, а все равно фигней тянет!

подскажите пожалуйста а как оформить текст «вдавленным»?

    Вот статейка: www.w3.org/Style/Examples/007/text-shadow

    Где, есть разные варианты применения text-shadow. Написанно на англ., но есть готовые коды и результаты их применения.

    Если будет сильно не понятно, тогда пишите. Разберемся конкретней!

Интересно получается с тенями. Вдавленными думаю сделать html не получится.

    Почему, не получится?

    В предыдущем комменте я оставил ссылку на статью. Там есть пример кода как сделать вдавленный текст!

    Так, что удачи!!!

Здравствуйте, а не подскажете, как убрать тень с текста в главном меню. Сайт www.danceteacherabroad.net, особенно при наведении курсора текст выглядит размытым((

Написать ответ

Получай обновления блога первым!
Каталог@Mail.ru - каталог ресурсов интернет