вступление
Большая часть очарования уровня CSS 3 (CSS3) заключается в способности его различных функций сокращать фоновые изображения и сгибание мышц в Photoshop, что позволяет нам программно создавать многие из наших графических требований. Это дает много преимуществ — экономия времени, меньше запросов HTTP и веса файлов, а также большая гибкость, и это лишь некоторые из них.
Конечно, это идет с компромиссом в том, что многие из этих функций не работают в более старых версиях IE, которые мы все еще должны поддерживать.
В этой статье я расскажу о почтенном свойстве text-shadow, которое познакомит вас с основами, интересными приложениями и дополнительными соображениями. Пошли.
основы
С самого начала text-shadow является довольно простым свойством, которое можно применить к любому элементу:
.shadow1 {
text-shadow: 3px 3px 1px gray;
}Любое текстовое содержимое внутри элементов, к которым применяется свойство text-shadow, будет иметь тень.
Четыре значения внутри значения свойства следующие:
- Горизонтальное смещение от текста. Положительные числа перемещают тень вправо, отрицательные перемещают ее влево
- Вертикальное смещение от текста. Положительные числа перемещают тень вниз, отрицательные — вверх.
- Радиус размытия тени. Большие значения делают тень более размытой
- Базовый цвет тени. Это могут быть любые допустимые цветовые единицы CSS, включая RGBA / HSLA.
На следующих изображениях показана разница между простой тенью с радиусом размытия 1px по сравнению с 7px:
Вы можете применить несколько теней к одному выделенному тексту, просто записав несколько значений текста-тени, разделенных запятыми:
.shadow3 {
text-shadow: 1px 1px 1px #666,
3px 3px 8px black;
}
Продвинутые идеи
Вы можете взять простой синтаксис, представленный выше, и использовать его как угодно. Возможно, вам просто понадобится очень простой эффект повышения или вставки:
.shadow4 {
text-shadow: 1px 1px 1px red,
2px 2px 1px red;
}
.shadow5 {
text-shadow: -1px -1px 1px #555,
-2px -2px 1px #666;
}
Или что-то гораздо более интересное, например, сложный 3D-эффект:
.shadow6 {
text-shadow: -1px -1px 1px #aaa,
0px 4px 1px rgba(0,0,0,0.5),
4px 4px 5px rgba(0,0,0,0.7),
0px 0px 7px rgba(0,0,0,0.4);
}
Или даже легендарную пламенную текстовую тень, необходимую для любого хэви-металлического сайта:
.shadow7 {
text-shadow: 0 0 20px #fefcc9,
10px -10px 30px #feec85,
-20px -20px 40px #ffae34,
20px -30px 35px #ec760c,
-20px -40px 40px #cd4606,
0 -50px 65px #973716,
10px -70px 70px #451b0e;
}
Как насчет более изящного, точного текстового эффекта вставки, созданного с использованием background-clip: text (который в настоящее время поддерживается только в браузерах на основе WebKit / Blink, к сожалению.)
.shadow8 {
background-color: #333;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: rgba(255,255,255,0.5) 2px 3px 6px;
}
или невероятно забавный гигантский 3D-текст lego?
.shadow9 {
text-shadow: 0 1px #808d93,
-1px 0 #cdd2d5,
-1px 2px #808d93,
-2px 1px #cdd2d5,
-2px 3px #808d93,
-3px 2px #cdd2d5,
-3px 4px #808d93,
-4px 3px #cdd2d5,
-4px 5px #808d93,
-5px 4px #cdd2d5,
-5px 6px #808d93,
-6px 5px #cdd2d5,
-6px 7px #808d93,
-7px 6px #cdd2d5,
-7px 8px #808d93,
-8px 7px #cdd2d5;
}
Имейте в виду, что текстовую тень можно даже анимировать с помощью CSS-анимации — в следующем примере создается стопка разноцветных буквенных фигур, которые смещаются взад-вперед в отличной манере.
.shadow10 {
color: yellow;
text-shadow: 1px 1px 2px rgba(0,0,0,0.7),
5px 5px 1px orange,
6px 6px 2px rgba(0,0,0,0.7),
10px 10px 1px red,
11px 11px 2px rgba(0,0,0,0.7),
15px 15px 1px purple,
16px 16px 2px rgba(0,0,0,0.7);
-webkit-animation: text-snake 1s infinite alternate;
-moz-animation: text-snake 1s infinite alternate;
-ms-animation: text-snake 1s infinite alternate;
animation: text-snake 1s infinite alternate;
}
/* other prefixed animation blocks ommitted for brevity */
@keyframes text-snake {
from {
text-shadow: 1px 1px 2px rgba(0,0,0,0.7),
5px 5px 1px orange,
6px 6px 2px rgba(0,0,0,0.7),
10px 10px 1px red,
11px 11px 2px rgba(0,0,0,0.7),
15px 15px 1px purple,
16px 16px 2px rgba(0,0,0,0.7);
}
to {
text-shadow: -1px 1px 2px rgba(0,0,0,0.7),
-5px 5px 1px orange,
-6px 6px 2px rgba(0,0,0,0.7),
-10px 10px 1px red,
-11px 11px 2px rgba(0,0,0,0.7),
-15px 15px 1px purple,
-16px 16px 2px rgba(0,0,0,0.7);
}
}
Вот демо:
Кросс-браузерный комфорт?
тень текста поддерживается во всех современных браузерах, за исключением довольно разочаровывающего IE9. Тем не менее, это не так серьезно, так как тень текста почти всегда является эффектом, напоминающим приятные ощущения, и вам нужно просто немного протестировать и убедиться, что ваш текст по-прежнему разборчив, даже если тень не отображается. Вот почему я, как правило, не рекомендую использовать тени для текста вместе с прозрачными цветами текста, даже подумав, что это может привести к некоторым интересным возможностям.
Следует иметь в виду, что вычисление большого количества теней может привести к нагрузке на процессор устройства, поэтому следует помнить об этом, если вы планируете использовать много теней для текста. Возможно, вы захотите отключить тени на устройствах с маленьким экраном (с помощью медиазапроса) и пересмотреть свои планы, чтобы страницы были заполнены движущимся затененным текстом по всей вашей странице. Ваши пользователи и клиенты будут вам благодарны!
Я хотел бы поблагодарить subtlepatterns.com за предоставленную отличную текстуру фона: Блокнот .
Я также хотел бы поблагодарить Константина Кичинского и Джеффа Старра за некоторые вдохновляющие примеры.