Недавно мне пришлось установить Firefox 3.5, потому что я хотел установить Firebug 1.4 , поэтому случайно наткнулся на красивую тень текста на фоне WordPress. Это также свойство text-shadow в CSS. Итак, сегодня я собрал некоторую информацию. Я надеюсь, что это может стать источником вдохновения для всех.
Во-первых, давайте посмотрим на ту часть, где text-shadow используется в бэкенде WordPress 2.8 (зеленая стрелка). Как вы думаете, да, это свойства CSS3, а не изображения.
Что такое тень текста?
text-shadow уже существовал в CSS2, и теперь CSS3 готовится добавить его в него. А поскольку только Safari всегда поддерживал этот атрибут, мы редко видим реальные приложения до недавнего времени, когда поддержка Firefox 3.5 возродила интерес людей. в этом.
text-shadow может поддерживать добавление тени к тексту, поэтому мы можем использовать атрибуты css3 для увеличения текстуры текста во время дизайна без использования каких-либо изображений.
В настоящее время поддерживаются браузеры Firefox 3.1+, Safari 3+, Opera 9.5+ и другие современные браузеры (данные могут быть необъективными. Конечно, семейство IE не может их поддерживать).
Далее посмотрим на синтаксис text-shadow:
text-shadow: длина цвета длина длина;
цвет: цвет; длина соответственно относится к « длине по оси X, длине по оси Y, радиусу размытия тени » по порядку.
Положительные значения по оси X означают право, а отрицательные значения — слева. Точно так же отрицательные значения по оси Y означают движение вверх. Любое из значений может быть равно нулю. или пусто (будет обработано по умолчанию)
Например:
текстовая тень: -1px 2px 3px #ffb69a;
Это означает, что тень находится на 1 пиксель влево по направлению оси X, на 2 пикселя вниз по оси Y, радиус размытия тени составляет 3 пикселя, а цвет — #ffb69a.
Немного экспериментов и демонстраций
Я провел небольшой эксперимент и сделал демонстрационную страницу . Чтобы пользователи, чьи браузеры не поддерживают text-shadow, могли увидеть эффект тени, посмотрите, пожалуйста, на скриншот ниже (друг сказал, что «Жар-птица» похожа на «курицу»). :
Если вы используете Firefox 3.1+, Safari и другие браузеры, нажмите «Демо» .