Tweet Здравствуйте уважаемые читатели
Tweet Здравствуйте уважаемые читатели. Этой статьей я открываю серию статей по новым возможностям, которые принесла нам такая технология как CSS3. Как всегда попробую донести данные фишки не только до посвященных, но и до более так сказать начинающих веб-мастеров (не побоюсь этого слова ) Начнет эту серию: Text-Shadow ( в переводе как тень текста) Те, кто читает мой блог не первый день или те, кто заходил на него и раньше – думаю, заметили, что изменился внешний вид, как заголовков статей, так и написание имен комментаторов. Именно в заголовке этой статьи вы и видите работу данной фишки. Стоит заметить использовать ее очень просто. Смотрите сами:
Стандартный синтаксис 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 – первая тень по порядку размещается в самом низу, вторая выше и т. д.;
Обязательные и необязательные параметры text-shadow
В text-shadow обязательны только два первые параметры:
| 1 | text-shadow {1 2 3 #4} |
Обязательные:
- 1 — сдвиг по горизонтали; 2 — сдвиг по вертикали;
Не обязательные:
- 3 – растушевка тени (если не указана, то тень максимально жесткая как при 0px); 4 – цвет тени (если не указана, берется цвет текста);
Хотя стоит заметить, когда не ставлю цвет тени, тогда ее не видно вообще. Может, туплю??? Как видите это довольно просто. Никаких тебе премудростей и тому подобного. Указал на расположение по горизонтали, вертикали, четкость тени и задал цвет, все. На этом все. Удачи! С уважением Тригуба Сергей! P. S. Стоит заметить. Я уже написал статью о «border-radius». И немножко подзабыл об этом. Так, что извините. Интересное — Супер гитарист: blah Спасибо Вам, что добавили эту статью в: Добавить в Twitter Добавить в Вконтакт Добавить в Facebook Добавить в Google buzz Добавить в Мой мир Опубликовать в своем блоге livejournal. com Приглашаю присоединиться ко мне в следующих сервисах: Присоединится ко мне в twitter Присоединится ко мне в Вконктакте Присоединится ко мне в Facebook Присоединится ко мне в Google buzz Присоединится ко мне в friendfeed Мои групы: Группа webmasterprof. ru в Facebook Группа webmasterprof. ru в Вконтакте Будь в курсе! Подпишись на обновления блога через: RSS RSS Email Email