232 Чтобы создать эффект тени для текста в CSS3 ввели новое свойство text-shadow. К сожалению, это свойство не является частью спецификации и, соответственно, не поддерживается всеми браузерами, но с его помощью можно делать невероятные спецэффекты с текстом.
Тогда рассмотрим варианты создания тени, используя правила CSS 2.1. Первый — с дублированием контента, второй — используя псевдо-элемент :before.
Тень текста с дублированием контента
HTML структура:
|
1 |
<h1 class="ombreggiatura_css"><span>OMBREGGIATURA CSS</span>OMBREGGIATURA CSS</h1> |
В этом случае, оригинальный текст заключается в элемент span и позиционируется абсолютно относительно своего родительского элемента ( в нашем случае h1), располагаясь под ним с небольшим сдвигом, чтобы сымитировать тень.
Правила CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.ombreggiatura_css{ /*the font size*/ font-size:30px; /*the shadow color*/ color:#CCCCCC; /*нужно для позиционирования своего потомка в абсолюте*/ position:relative; } .ombreggiatura_css span{ /*цвет текста*/ color:#3399CC; display:block; position:absolute; top:-2px; left:-2px; } |
Примечание: Смещение элемента span на несколько пикселей в ту или иную сторону позволяет располагать тень, как вам удобно. Также можно играть и увеличением смещения.
Результат:
Решение совместимо со всеми основными браузерами, включая и IE6.
Что делать, если вы не хотите дублировать текст?
Используя псевдо-элемент :before, вы можете динамически добавлять контент перед контентом элемента h1.
HTML для элемента h1.
|
1 |
<h1 class="ombreggiatura_css">OMBREGGIATURA CSS</h1> |
Правила CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.ombreggiatura_css{ /*размер шрифта*/ font-size:30px; /*высота строки*/ line-height:30px; /*цвет текста*/ color:#3399CC; /*избегаем переноса текста при ограниченной ширине*/ white-space:nowrap; } .ombreggiatura:before{ /*динамически добавляемый текст*/ content:”OMBREGGIATURA CSS”; /*из inline в block элемент*/ display:block; /*сдвиг динамически созданного контента на 32px вниз. в эти цифры входят 30px высоты строки +2px сдвига*/ margin-bottom:-32px; /*сдвиг на 2px вправо*/ margin-left:2px; /*цвет тени*/ color:#CCCCCC; } |
Примечание: значения margin-bottom and margin-left могут быть изменены.
Результат:
Проблема с браузером Internet Explorer
Проблема в использовании псевдо-элемента :before, потому как Internet Explorer не поддерживает данный селектор (т.е. тень отображаться не будет).
Только для Internet Explorer, вы можете использовать фильтр dropshadow:
|
1 2 3 4 5 6 7 8 9 10 |
.ombreggiatura_css{ /*dropshadow фильтр*/ filter: dropshadow(color=#CCCCCC,offX=2,offY=2); /*IE нужна определенная ширина для работы*/ width:100%; /*размер шрифта*/ font-size:30px; /*цвет текста*/ color:#3399CC; } |
Результат (для пользователей IE):
Примечание: Использование фильтра Microsoft не проходит валидацию по w3c. Если вы хотите его использовать, то наилучшим путем будет добавить его в дополнительный файл стилей.
