Дизайнеры часто используют некоторые уникальные эффекты шрифтов и эффектов страницы, и тень — один из них. Она может придать тексту и элементам на странице трехмерный эффект и выделить их. Например, для теней текста традиционный метод может потребовать вырезания текста и непосредственного использования изображений. Если учитывать SEO и производительность веб-сайта, для интеграции изображений также можно использовать такие технологии, как CSS Sprites:
h2 {background:url(sprites.png) no-repeat 0 0; размер шрифта:0; отступ текста:-9999em;...}
h2#title1{background-position:0 -30px;}
h2#title2{background-position:0 -60px;}
....
Это непростая вещь, сшивка изображений отнимет у вас много времени, а для достижения лучших визуальных эффектов вам, возможно, придется использовать высококачественные 32-битные png-изображения, что заставит вас столкнуться с проклятым IE 6 png. проблема с прозрачностью!
Фактически, мы можем полностью использовать CSS для достижения эффекта тени текста!
Сначала вы можете просмотреть демо.
Текст-тень
text-shadow позволяет нам добиться идеальных эффектов тени текста. Базовое письмо:
text-shadow:[радиус размытия цвета по оси X и Y],[радиус размытия цвета по оси X и Y]...
или
text-shadow:[цвет радиуса размытия по оси X, Y], [цвет радиуса размытия по оси X]...
Цвет здесь — это цвет тени. Вы можете написать цвет первым или последним. Ось X и Y — это положение смещения тени соответственно, а радиус размытия можно понимать как длину тени. И большинство браузеров теперь поддерживают многослойные тени. Вы можете разделить несколько групп настроек запятыми (конечно, вы также можете использовать одну настройку).
Пример:
h1{цвет:#000; фон:#333; шрифт:жирный 24px/2 "Microsoft Yahei",Arial;
текстовый отступ: 2em;
текстовая тень: черный 2px 2px 2px };
Эффект следующий:
Этот атрибут в настоящее время поддерживается большинством браузеров, кроме IE. Для IE мы можем использовать теневой фильтр:
фильтр: Тень (Цвет = 'черный', Направление = '135', Сила = '2')
Возможно, вы заметили, что с помощью теневого фильтра можно определить только направление угла, но не ось xy, а ось z также была заменена силой. Обратите внимание, что при использовании этого фильтра вы не можете установить цвет фона , иначе фильтр будет недействителен! Кроме того, если вы не очень хорошо разбираетесь в математике и не понимаете алгоритм выполнения тригонометрических функций, вы можете воспользоваться еще одним фильтром IE: dropshadow:
фильтр: dropshadow(OffX=2, OffY=2, Color='black', Positive='true');
Что ж, IE всегда будет нас сдерживать, но стоит отметить, что эти два фильтра IE поддерживают многослойные тени ! Например, вы можете написать:
фильтр: dropshadow(OffX=2, OffY=2, Color='red', Positive='true')
dropshadow(OffX=2, OffY=2, Color='желтый', Positive='истина')
dropshadow(OffX=2, OffY=2, Color='blue', Positive='true');
Чтобы узнать больше об этих двух фильтрах для IE, посетите: Тень и Dropshadow.
Давайте посмотрим на пример многослойных теней (без учета IE):
h1 {шрифт: жирный 32 пикселей/2 Вердана, Женева, цвет без засечек: # f39;
text-shadow:1px 1px 2px rgba(0,0,0,.8), 0 0 1em rgba(255, 0, 255, 0.5), 0 0 0.2em rgba(0, 0, 255, 0.9);}
Эффект такой, как показано на рисунке:
Здесь мы используем цвет rgba, который представляет собой метод одновременного объявления цвета и прозрачности в CSS и является атрибутом цвета, поддерживаемым большинством браузеров уровня A ( кроме IE ). Для получения дополнительной информации см.: Цвет «RGBa». поддержка браузера》——В то же время мы рекомендуем использовать этот простой метод письма для обеспечения прозрачности сплошного цвета.
Совместимость браузера для text-shadow
В настоящее время text-shadow поддерживается Firefox 3.5+, Safari 1.1+/chrome 2.0+ и Opera 9.5, но не поддерживается IE. Следует отметить, что только Safari 4.0 поддерживает многослойные тени.
Все версии IE не поддерживают тень текста;
Opera 9.5+ поддерживает до 6–9 слоев теней и использует порядок рендеринга CSS2 (первая определенная тень находится внизу). А из соображений производительности радиус размытия ограничен 100 пикселями;
Gecko (Firefox) теоретически поддерживает бесконечные слои текстовых теней (но не рекомендуется пробовать) и следует новому порядку рендеринга CSS3 (тень, определенная первой, находится сверху);
Safari 1.1-3.2 поддерживает только один слой тени текста (отображается только объявление перед первой запятой, а следующее игнорируется). Safari 4.0+ поддерживает только многослойные тени и новый порядок рендеринга CSS3;
коробка-тень
Давайте сначала поговорим об IE. IE не поддерживает атрибут box-shadow, но два упомянутых выше фильтра можно использовать для достижения эффектов тени. Это означает, что IE не различает тень текста и тень поля ! Это создает некоторые проблемы: текст внутри элемента наследует настройки тени элемента. Но если вы не определите фон и границу элемента, появится только тень текста. Если вы определите только атрибут фона без определения границы, появится только тень поля, а у текста не будет тени; если вы определяете только атрибут границы и если фон не определен, появится тень блока, а текст и изображения содержимого также будут иметь тени. Заинтересованные студенты могут попробовать.
Хорошо, теперь давайте забудем об IE и взглянем на box-shadow. Фактически, после понимания text-shadow, box-shadow легко понять. В настоящее время только Firefox и Safari/Chrome поддерживают атрибут box-shadow через частные атрибуты. Хотя браузер Opera в настоящее время не поддерживает этот атрибут, в его документации упоминается, что следующая версия движка Presto 2.3 (последняя версия движка Opera 10.10 — Presto 2.2.15) будет поддерживать box-shadow, тогда Let нам ждать медленно.
Синтаксис box-shadow такой же, как и text-shadow.
#boxShadow{
...
-webkit-box-shadow:2px 2px 2px черный;
-moz-box-shadow:2px 2px 2px черный;
...
}
На самом деле box-shadow и border-radius — хорошие партнеры:
#boxShadow1{-moz-border-radius:10px;
-webkit-border-radius:10px;
граница-радиус: 10 пикселей;
граница: 1 пиксель сплошной ddd;
-webkit-box-shadow:0 0 10px черный;
-moz-box-shadow:0 0 10px черный;
отступ: 10 пикселей;}
Эффект такой, как показано на рисунке:
Firefox начал поддерживать box-shadow только в версии 3.5, и текущий рендеринг теней еще не идеален.
Подвести итог
CSS-тень — очень полезная функция CSS3. Мы уже можем использовать text-shadow в Firefox/webkit/Opera, а box-shadow скоро будет реализован в этих браузерах. Только IE уникален и до сих пор настаивает на своих дрянных фильтрах. Это действительно провал.