Содержание
CSS свойство text-shadow
Свойство text-shadow дает возможность добавлять тени к тексту. Можете выбрать цвет отсюда: HTML Цвета.
Каждая тень может иметь две или три значения и <color>. Первое значение устанавливает горизонтальное смещение (x-offset), второе значение устанавливает вертикальное смещение (y-offset), а третье — радиус размытия и цвет тени.
Значения x-offset и y-offset обязательны, а третье значение является дополнительным.
| Значение по умолчанию | none |
| Применяется | Ко всем элементам, а также к ::first-letter и ::first-line. |
| Наследуется | Да |
| Анимируемое | Да |
| Версия | CSS3 |
| DOM синтаксис | object.style.textShadow = «1px 3px 3px #8ebf42»; |
Синтаксис¶
text-shadow: h-shadow v-shadow blur-radius color | none | initial | inherit;Пример¶
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
.shadow{
text-shadow: 2px 2px #1c87c9;
}
</style>
</head>
<body>
<h3>Пример свойства text-shadow</h3>
<p>Какой-нибудь параграф.</p>
<p>Какой-нибудь параграф со свойством text-shadow.</p>
</body>
</html>Попробуйте сами!
Рассмотрим пример, где указаны значения x-offset, y-offset, blur-radius и color:
Пример¶
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-shadow: 5px 3px 2px #8ebf42;
font: 1em Roboto, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h3>Пример свойства text-shadow</h3>
<p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.</p>
</body>
</html>Попробуйте сами!
Значения¶
| Значение | Описание |
|---|---|
| h-shadow | Горизонтальное смещение тени. При положительном значении тень располагается с правой стороны текста, а при отрицательном значении с левой стороны. |
| v-shadow | Вертикальное смещение тени (ось y). При положительном значении тень располагается снизу от текста, а при отрицательном — сверху. |
| blur-radius | Определяет степень и размер размытия тени. Отрицательные значения недопустимы. Значение по умолчанию — 0. |
| color | Дает возможность выбрать цвет тени. Могут быть использованы названия цветов, цветовые коды hexadecimal, rgb(), rgba(), hsl(), hsla(). |
| none | Тень не устанавливается. Значение по умолчанию. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Значение элемента наследуется от родительского элемента. |
Практическое руководство. Создание текста с тенью — WPF .NET Framework
-
- Чтение занимает 2 мин
В этой статье
Примеры в этом разделе демонстрируют создание эффекта тени для отображаемого текста.
Пример
DropShadowEffectОбъект позволяет создавать разнообразные эффекты тени для Windows Presentation Foundation (WPF) объектов. В следующем примере показано применение эффекта тени к тексту. В этом случае используется мягкая тень, то есть цвет тени размывается.
Можно управлять шириной тени, задавая ShadowDepth свойство. Значение 4.0 указывает, что ширина тени равна 4 пикселям. Можно управлять мягкостью тени или размытием, изменяя BlurRadius свойство. Значение указывает на 0.0 отсутствие размытия. В следующем примере кода показано создание мягкой тени.
<!-- Soft single shadow. -->
<TextBlock
Text="Shadow Text"
Foreground="Teal">
<TextBlock.Effect>
<DropShadowEffect
ShadowDepth="4"
Direction="330"
Color="Black"
Opacity="0.5"
BlurRadius="4"/>
</TextBlock.Effect>
</TextBlock>
Примечание
Эти эффекты тени не проходят через Windows Presentation Foundation (WPF) конвейер отрисовки текста. Следовательно, тип ClearType при использовании этих эффектов отключен.
В следующем примере показано применение эффекта жесткой тени к тексту. В этом случае тень не размыта.
Можно создать жесткую тень, присвоив BlurRadius свойству значение 0.0 , которое указывает, что размытие не используется. Можно управлять направлением тени, изменяя Direction свойство. Задайте в качестве значения для этого свойства степень между 0 и 360 . На следующем рисунке показаны направленные значения Direction параметра свойства.
В следующем примере кода показано создание жесткой тени.
<!-- Hard single shadow. -->
<TextBlock
Text="Shadow Text"
Foreground="Maroon">
<TextBlock.Effect>
<DropShadowEffect
ShadowDepth="6"
Direction="135"
Color="Maroon"
Opacity="0.35"
BlurRadius="0.0" />
</TextBlock.Effect>
</TextBlock>
Использование эффекта размытия
BlurBitmapEffectМожно использовать, чтобы создать эффект, подобный тени, который можно поместить позади текстового объекта. Если к тексту применяется эффект размытия для точечных рисунков, текст равномерно размывается во всех направлениях.
В следующем примере показан эффект размытия, примененный к тексту.
В следующем примере кода показано создание эффекта размытия.
<!-- Shadow effect by creating a blur. -->
<TextBlock
Text="Shadow Text"
Foreground="Green"
Grid.Column="0" Grid.Row="0" >
<TextBlock.Effect>
<BlurEffect
Radius="8.0"
KernelType="Box"/>
</TextBlock.Effect>
</TextBlock>
<TextBlock
Text="Shadow Text"
Foreground="Maroon"
Grid.Column="0" Grid.Row="0" />
Использование преобразования переноса
TranslateTransformМожно использовать, чтобы создать эффект, подобный тени, который можно поместить позади текстового объекта.
В следующем примере кода используется TranslateTransform для смещения текста. В этом примере слегка смещенная копия текста под основным текстом создает эффект тени.
В следующем примере кода показано создание эффекта тени с помощью преобразования.
<!-- Shadow effect by creating a transform. -->
<TextBlock
Foreground="Black"
Text="Shadow Text"
Grid.Column="0" Grid.Row="0">
<TextBlock.RenderTransform>
<TranslateTransform X="3" Y="3" />
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock
Foreground="Coral"
Text="Shadow Text"
Grid.Column="0" Grid.Row="0">
</TextBlock>
CSS3. Работа с тенями. Часть 2
Продолжаем погружаться в искусство владения тенями в новых модулях CSS3. Прошлый раз мы рассматривали работу с box-shadow, сегодня мы перейдем к text-shadow.
Напомню, что оба правила, хотя и описаны в разных модулях, работают практически идентичным образом, поэтому, если вы уже знакомы с box-shadow по первой части, в этой, второй, части вы увидите много знакомого. И, прежде, чем переходить непосредственно к примерам, давайте сразу разберемся, какие есть различия, чтобы не останавливаться на них далее.
text-shadow vs box-shadow
Если вы вернетесь к разделу про синтаксис box-shadow в первой части, вы найдете такое описание:
box-shadow: <shadow> [ , <shadow> ]*;
<shadow> = inset? && [ <length>{2,4} && <color>? ]
Где последнее разворачивается в полном виде в такую конструкцию:
box-shadow: inset? h-offset v-offset blur-radius spread-distance color;
Спецификация CSS3 Text, описывая text-shadow, говорит буквально следующее:
<shadow> is the same as defined for the ‘box-shadow’ property except that the
‘inset’ keyword is not allowed
В переводе на русский это означает, что для текста невозможны внутренние тени (inset) и синтаксис для text-shadow выглядит следующим образом:
text-shadow: <shadow> [ , <shadow> ]*;
<shadow> = [ <length>{2,4} && <color>? ]
Аналогично box-shadow возможны множественные тени накладываемые поверх друг друга так, что первая тень оказывается наверху. Теперь давайте смотреть, как это все работает.
text-shadow
Сдвиги и цвет
Начнем со сдвигов и работы с цветом. За сдвиги тени отвечают первые два линейных параметра, указывающих длинну (1.1–1.4):
Если вы указываете положительные значения, тень сдвигается влево и вниз (1.1):
text-shadow:10px 10px; width:300px;
Отрицательные значения сдвигают вправо и вверх (1.2):
text-shadow:-5px -5px; width:300px; color:blue;
Аналогично box-shadow, все браузеры, кроме основанных на webkit, если цвет тени явно не задан, берут его из цвета текста (1.1–1.2). Это может быть полезным, например, если вы хотите автоматически делать тень цвета текста, но, например, размытой (см. примеры 2.3 и 2.4). Для явного задания цвета тени достаточно прописать нужное значение в правиле:
text-shadow:-1px -1px white; color:blue; background:#333; /* 1.3 */
text-shadow:1px 1px rgba(255,255,255, 0.5); color:blue; background:#eee; /* 1.4 */
Обратите внимание, что при указании цвета полностью применимы возможности CSS3 Color, включая указание уровня прозрачности цвета (alpha) через rgba или hsla.
Размытие
Третий линейный параметр описывает радиус размытия тени (2.1–2.4):
В полном согласии с определением box-shadow, размытие задается некоторым положительным числом — радиусом размытия. Само размытие может осуществляться UA по любому алгоритму с большой точностью аналогичному размытию по Гауссу с половинным радиусом относительно границы тени.
В первых двух примерах (2.1 и 2.2) задан разный радиус размытия:
text-shadow:5px 5px 3px darkred; color:red; /* 2.1 */
text-shadow:4px -4px 10px red; color:azure; background:#333; /* 2.2 */
Во второй паре примеров (2.3 и 2.4) различается только цвет текста и фона, а сами правила задания тени описаны через применяемый к блокам класс blured-shadow:
.blured-shadow {
text-shadow:0px 0px 4px ; /* не зависит от цвета текста */
}
color:red; /* 2.3 */
color:lightgray; background:#333; /* 2.4 */
(Этот пример некорректно работает в Chrome из-за описанных выше нюансов, впрочем спецификация говорит, что пропущенный цвет остается на усмотрение UA.)
Растяжение и сжатие
Четвертый линейный параметр, если он присутствует, отвечает за растяжение или сжатие тени.
Для увеличения тени spray-distance должен быть положительным (3.1):
text-shadow:5px 5px 0px 3px lightgreen; color:green;
Для уменьшения — отрицательным (3.2):
text-shadow:8px 8px 2px -3px darkgreen; color:green; font-weight:900;
Если отступ тени нулевой, ее можно использовать для обводки текста (3.3):
text-shadow:0 0 0 3px rgba(128, 255, 0, 0.75); color:green; background:#333;
Важная деталь. Насколько мне известно, в настоящий момент (сюрприз!) параметр spray-distance для text-shadow поддерживается только в Internet Explorer 10, а остальные браузеры его не поддерживают (см. например, bug 655590 «[css3-text] Support the spread radius in text-shadow» в Mozilla Bug tracker). Это же верно и в отношении большинства учебников и статей в интернете, которые своевременно не были обновлены вслед за изменениями в спецификации. Поэтому в большинстве примеров, которые вы найдете в сети, вы даже не увидите упоминания возможности растяжения или сжатия тени текста 😉
И еще одна важная деталь. Наличие четвертого параметра сегодня трактуется неподдерживающими его браузерами как неправильное задание тени — в результате эти правила просто игнорируются. Поэтому для обеспечения хоть какого-то уровня совместимости, если вы используете spread-distance, необходимо дублировать правила, например, так:
text-shadow: 0px 0px 10px lightgreen; /* 3.4 */
text-shadow: 0px 0px 10px 10px lightgreen; /* 3.5 */
Если вы все же хотите смоделировать увеличение тени, в определенных пределах это можно сделать через множественные тени, рассматриваемые в следующем разделе (см. примеры 4.6 и 4.7).
Множественные тени
Наконец, аналогично теням для блоков, к тексту также можно применять несколько теней одновременно, добиваясь при этом различных эффектов (4.1–4.5):
Начиная с простейшей дублированной обводки (4.1):
text-shadow: 0 0 0 3px white, 0 0 0 4px gray; color:magenta;
И возможности смещения теней в разные стороны (4.2):
text-shadow: 3px 3px 4px 2px rgba(255,255,255,0.35),
6px -6px 4px 2px rgba(255,255,255,0.25),
-3px -3px 4px 6px rgba(255,0,255,0.15);
Продолжая эффектами типа неона (4.3):
text-shadow: 0 0 0 3px white,
0 0 2px 6px magenta,
0 0 1px 9px white,
0 0 6px 12px magenta;
И немного более изощренным вариантом (4.4)
text-shadow: 0 0 2px #fff,
0 0 4px 2px rgba(255,255,255,0.5),
0 0 6px 6px #f0f,
0 0 4px 7px #fff,
0 0 3px 15px #222,
-4px 0 2px 9px #f0f,
4px 0 2px 9px #f0f,
0 -4px 2px 9px #f0f,
0 4px 2px 9px #f0f;
Или же с ограниченным использованием предыдущего приема перекрытия смещенных теней — небольшое подчеркивание (4.5):
text-shadow: 0 -3px 3px 15px white, 0 1px 2px 9px;
color:magenta;
Эмуляция растяжения
Как было сказано в предыдущем разделе, технически множественные тени можно применять для эмулирования увеличения тени. Например, чтобы сделать что-то похожее на (4.6):
text-shadow: 0px 0px 0px 4px magenta;
Можно было бы применить одновременно несколько теней, сдвинутых в разных направлениях (4.7):
text-shadow: magenta 0px 2px,
magenta 2px 0px,
magenta -2px 0px,
magenta 0px-2px,
magenta -1.4px -1.4px,
magenta 1.4px 1.4px,
magenta 1.4px -1.4px,
magenta -1.4px 1.4px;
Однако, если приглядеться, между ними заметна разница. Также важно понимать, что такой прием ограничен в применимости: он не только менее точен, но и отрицательно сказывается на производительности отрисовки страницы.
Интересные примеры
Теперь давайте рассмотрим еще несколько примеров использования теней для реализации различных интересных эффектов.
Начнем с классической радуги (5.1):
text-shadow: 0 0 2px 3px yellow,
0 0 2px 6px orange,
0 0 2px 9px red,
0 0 2px 12px lime,
0 0 2px 15px blue,
0 0 2px 18px violet;
Двойная тень для стрелки (5.2):
text-shadow: 0 0 2px 2px white,
2px 0 2px 5px #222,
3px 0 3px 6px #933,
5px 0 2px 14px #222,
6px 0 5px 16px #533;
Традиционная огненная тень (5.3):
text-shadow: 0 0 2px #eee,
0 0 4px 2px #fff,
0 -2px 4px 2px #ff3,
2px -4px 6px 4px #fd3,
-2px -6px 11px 6px #f80,
2px -8px 18px 8px #f20;
Традиционный «letter-press», — здесь также важен контраст с фоном (5.4):
text-shadow: 0px 2px 3px #555;
Не менее традиционный 3d-text (5.5):
text-shadow: 0 0 1px #999,
1px 1px 1px #888,
2px 2px 1px #777,
3px 3px 1px #666,
4px 4px 1px #555,
5px 5px 1px #444;
Двойная тень для винтажного эффекта (5.6)
text-shadow: 2px 2px #fff,
3px 3px #666;
Проступающая надпись с прозрачным текстом и сжатой тенью, — также зависит от размера и гарнитуры шрифта (5.7)
text-shadow: 0 0 2px -3px rgba(196,255,0,0.3),
0 0 6px -5px #9c6;
color:transparent;
Применение отдельной буквы для псевдо-класса ::first-letter (5.8)
.text {
text-shadow:0 0 5px;
}
.text::first-letter {
color:azure;
text-shadow:0 0 5px, 0 0px 6px 3px blue, 0 -2px 6px 6px cyan, 0 -4px 9px 9px lightblue ;
}
Интерактив
Если вы хотите просто поиграться с тенями в интерактивном режиме, наши коллеги к прошедшей в сентябре конференции Build подготовили демонстрационную страницу: «Hands-on: text-shadow».
Internet Exlorer
text-shadow поддерживается в IE10+.
И повторю свой совет относительно использования фильтров: не используйте фильтры вообще, либо продумывайте верстку и стили так, чтобы для IE9+ они не применялись. Стандартные css-эффекты в IE в отличие от старых фильтров, начиная с 9й версии, работают с использованием аппаратного ускорения, к тому же фильтры часто оказываются несочетаемыми с новыми правилами свойствами CSS и их одновременное использование может приводить к неожиданным последствиям.
Смотрите также руководство для разработчиков по Internet Explorer 10.
Источник
Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом
CSS3 text-shadow Property
Больше «Try it Yourself» примеры ниже.
Определение и использование
Текст-тень свойство добавляет тень к тексту.
Это свойство принимает разделенный запятыми список теней, которые будут применены к тексту.
| Значение по умолчанию: | none |
|---|---|
| Наследование: | yes |
| Animatable: | yes. Read about animatable
Try it |
| Версия: | CSS3 |
| Синтаксис JavaScript: | object .style.textShadow=»2px 5px 5px red»
Try it |
Поддержка браузеров
Числа в таблице указать первую версию браузера, которая полностью поддерживает свойство.
| Имущество | |||||
|---|---|---|---|---|---|
| text-shadow | 4.0 | 10,0 | 3.5 | 4.0 | 9.6 |
CSS Синтаксис
text-shadow:h-shadow v-shadow blur-radius color|none|initial|inherit;
Note: Для того, чтобы добавить более одной тени к тексту, добавьте список разделенных запятыми теней.
Значения свойств
| Стоимость | Описание | Сыграй |
|---|---|---|
| h-shadow | Необходимые. Положение горизонтальной тени. Отрицательные значения разрешены | Сыграй » |
| v-shadow | Необходимые. Положение вертикальной тени. Отрицательные значения разрешены | Сыграй » |
| blur-radius | Необязательный. Радиус размытия. Значение по умолчанию равно 0 | Сыграй » |
| color | Необязательный. Цвет тени. Посмотрите на CSS Цвет Значения для полного списка возможных значений цвета | Сыграй » |
| none | Значение по умолчанию. Нет тени | Сыграй » |
| initial | Устанавливает это свойство в значение по умолчанию. Читайте о первоначальный | Сыграй » |
| inherit | Наследует это свойство от своего родительского элемента. Читайте о унаследовать |
Еще примеры
пример
Этот пример демонстрирует, текстовую тень с эффектом размытия:
h2 {
text-shadow: 2px 2px 8px #FF0000;
}
Попробуй сам »
пример
Этот пример демонстрирует текст-тень на белом тексте:
h2 {
color: white;
text-shadow:
2px 2px 4px #000000;
}
Попробуй сам »
пример
Этот пример демонстрирует текст-тень с красным неоновым свечением:
h2 {
text-shadow: 0 0 3px #FF0000;
}
Попробуй сам »
пример
Этот пример демонстрирует текст-тень с красным и синим неоновым свечением:
h2 {
text-shadow: 0 0 3px #FF0000,
0 0 5px #0000FF;
}
Попробуй сам »
Похожие страницы
CSS3 учебник: CSS3 Текстовые эффекты
HTML DOM ссылка: textShadow property
Создаем клевые текстовые эффекты теней с помощью text-shadow CSS3
Свойство text-shadow появилось в CSS3, благодаря Photoshop, для того, чтобы добавить тексту глубину, размер и подчеркнутость.
И это еще не все, на что способно свойство text-shadow. С помощью него можно добавить креативности и красок, поиграть со смещением и размытием.
Вот, что получилось сделать.
Введение
Шесть текстовых эффектов: vintage/retro, neon, inset, anaglyphic, fire и board game.
Просто скопируйте готовые сниппеты в таблицу стилей и на вашем сайте и вы получите те же самые эффекты, что и в примерах. Еще раз напоминаем, что данные стили будут работать только в браузерах, поддерживающих CSS3: Safari, Chrome, Firefox.
Пример
Как работает text-shadow
Свойство CSS text-shadow используется для добавления тени любому тексто-зависимому HTML элементу. В синтаксис свойства входят: сдвиг по X (X-offset), сдвиг по Y (Y-offset), размытость (blur) и цвет тени (color).
Еще стоит отметить, что вы можете назначать элементу не одну тень, а несколько, за счет чего мы и создадим пару клевых эффектов!
Текстовый эффект винтаж/ретро (Vintage / Retro)
|
| text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070; |
Как это работает:
Винтажный стиль выполнен с помощью добавления двух теней. Первая тень того же цвета, что и фон страницы. Это нужно для того, чтобы получить эффект сдвижки текста. Именно вторая тень, со сдвигом в правый нижний угол, выполняет эту роль. Еще раз напоминаем, что первая тень должна быть по цвету фона, а вторая тень по цвету текстового элемента.
Пример
Текстовый эффект неона (Neon)
|
| text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de; |
Как это работает:
Эффект неона выполнен с помощью 8 теней. Устанавливаем цвет текстового элемента белым, далее назначаем каждую тень, оставляя сдвижки не тронутыми, но увеличиваем размытость теней и меняем их цвет с белого на пурпурный (за счет размытости, пурпурный стремится к цвету фона, поэтому фон может быть любого цвета). Такая смесь между белым и пурпурным создает эффект неонового свечения.
Пример
Текстовый эффект вставки
|
| text-shadow: 0px 2px 3px #666; |
Как это работает:
Эффекты вставки или печати очень часто используются, когда хотят добавить тексту тени. Тень сдвигается по оси Y, чтобы получить эффект оттиска. На темном фоне тень должна быть светлой, а на светлом, наоборот темной.
Пример
Анаглифический текстовый эффект
|
| text-shadow: 8px 8px 0 rgba(255,0,180,0.5); |
Как это работает:
Анаглифический текстовый эффект воссоздает клевый эффект, используемый в старых 3D картинках. Он получен с помощью CSS, при этом использовалось и тень и RGBa. Использование RGBa на тексте и тени позволило добавить 50% прозрачность, из-за чего основной текст стал виден через тень.
Пример
Огненный текстовый эффект
|
| text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e; |
Как это работает:
В огненном текстовом эффекте использовано несколько уровней теней. Каждая тень смещена в определенную сторону с определенным размытием и цветом. Сделано все, чтобы воссоздать эффект пламени. Преобладающие цвета: от ярко белого до желтого, оранжевые и темные тона янтаря.
Пример
Текстовый эффект настольной игры
|
| text-shadow: 10px 10px 0 #ffd217, 20px 20px 0 #5ac7ff, 30px 30px 0 #ffd217, 40px 40px 0 #5ac7ff; |
Как это работает:
Эффект настольной игры воссоздан очень просто. Использована группа теней с фиксированным шагом смещения в одно направление с чередующимися цветами. Все тени без размытия, чтобы точно скопировать оригинальный текст.
Пример
Возможно, Вам будет интересно ↓↓↓
Как использовать CSS box-shadow: 13 хитростей и примеров
Блестящие коробки выглядят скучно. Украсьте их с помощью эффекта CSS box-shadow!
CSS – это язык, который разработчики используют для стилизации веб-страницы. Он контролирует, как элементы HTML отображаются на экране, на бумаге или на любом другом носителе. CSS предоставляет все возможности настройки для стилизации веб-страницы в соответствии с вашим собственным изображением.
Вы можете изменить цвет фона элемента, стиль шрифта, цвет шрифта, тень блока, поля и многие другие свойства с помощью CSS. В этом руководстве мы расскажем, как эффективно использовать box-shadow.
Что такое CSS box-shadow?
Свойство box-shadow используется для применения тени к элементам HTML. Это одно из наиболее часто используемых свойств CSS для стилизации блоков или изображений.
Синтаксис CSS:
box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];- смещение по горизонтали: если смещение по горизонтали положительное, тень будет справа от поля. А если смещение по горизонтали отрицательное, тень будет слева от поля.
- вертикальное смещение: если вертикальное смещение положительное, тень будет ниже прямоугольника. И если вертикальное смещение отрицательное, тень будет над прямоугольником.
- радиус размытия: чем выше значение, тем более размытой будет тень.
- Радиус распространения: показывает, насколько должна распространяться тень. Положительные значения увеличивают разброс тени, отрицательные значения уменьшают разброс.
- Цвет: обозначает цвет тени. Кроме того, он поддерживает любой цветовой формат, такой как rgba, hex или hsla.
Параметры размытия, распространения и цвета не являются обязательными. Самая интересная часть box-shadow заключается в том, что вы можете использовать запятую для разделения значений box-shadow любое количество раз. Это можно использовать для создания нескольких границ и теней на элементах.
1 Добавьте тусклую тень блока слева, справа и снизу блока.
Вы можете добавить очень тусклые тени к трем сторонам (левой, правой и нижней) поля, используя следующий CSS-код box-shadow с вашим целевым HTML-элементом:
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;2 Добавьте затемненную тень ко всем сторонам.
Вы можете добавить легкие тени ко всем сторонам поля, используя следующий CSS-код box-shadow с вашим целевым HTML-элементом:
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;3 Добавьте тонкую тень блока на нижнюю и правую стороны.
Вы можете добавить тени в нижнюю и правую часть поля, используя следующий CSS-код box-shadow с вашим целевым HTML-элементом:
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;4 Добавьте темную тень ко всем сторонам.
Вы можете добавить темную тень ко всем сторонам поля, используя следующий CSS-код box-shadow с вашим целевым HTML-элементом:
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;5 Добавьте рассеянную тень ко всем сторонам.
Вы можете добавить рассеянную тень ко всем сторонам поля, используя следующую команду с вашим целевым HTML-элементом:
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;6 Добавьте тонкую тень на все стороны.
Вы можете добавить простую тень границы ко всем сторонам поля, используя следующий CSS с вашим целевым элементом HTML:
box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;7 Добавьте тень на нижнюю и левую стороны.
Вы можете добавить тень к нижней и левой сторонам поля, используя следующий CSS-код box-shadow с вашим целевым HTML-элементом:
box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;8 Добавьте тусклую тень блока на верхнюю и левую стороны, темную тень на нижнюю и правую стороны.
Вы можете добавить светлую тень к верхней и левой стороне поля, а также темную тень к нижней и правой сторонам поля, используя следующий CSS с вашим целевым элементом HTML:
box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;9 Добавьте тонкую цветную тень на все стороны.
Вы можете добавить простую цветную тень границы ко всем сторонам поля, используя следующий CSS-код box-shadow с вашим целевым HTML-элементом:
box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;10 Добавьте несколько цветных границ теней на нижнюю и левую стороны блока.
Вы можете добавить несколько цветных теней к нижней и левой сторонам поля, используя следующий CSS с вашим целевым элементом HTML:
box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;11 Добавьте несколько цветных теней на нижнюю часть.
Вы можете добавить несколько цветных теней к нижней части поля, используя следующий CSS-код box-shadow с вашим целевым HTML-элементом:
box-shadow: rgba(240, 46, 170, 0.4) 0px 5px, rgba(240, 46, 170, 0.3) 0px 10px, rgba(240, 46, 170, 0.2) 0px 15px, rgba(240, 46, 170, 0.1) 0px 20px, rgba(240, 46, 170, 0.05) 0px 25px;12 Добавьте несколько цветных границ теней на нижнюю и правую стороны блока.
Вы можете добавить несколько цветных теней к нижней и правой сторонам поля, используя следующий CSS с вашим целевым элементом HTML:
box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px, rgba(240, 46, 170, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px;13 Добавьте светлые тени на левую и правую стороны, распространите тень на нижнюю часть.
Вы можете добавить легкие тени к левой и правой сторонам и распространить тень на нижнюю часть поля, используя следующий CSS-код box-shadow с вашим целевым HTML-элементом:
box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;Интегрируйте CSS с HTML-страницей
Теперь вы знаете, как добавлять классные эффекты тени блока с помощью CSS, вы можете легко интегрировать их с элементами HTML разными способами.
Вы можете встроить его в саму HTML-страницу или прикрепить как отдельный документ. Есть три способа включить CSS в HTML-документ:
Внутренний CSS
Встроенные или внутренние таблицы стилей вставляются в раздел HTML-документа с помощью элемента . Вы можете создать любое количество элементов в документе HTML, но они должны быть заключены между тегами и . Вот пример, демонстрирующий, как использовать внутренний CSS с HTML-документом:
<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>CSS box-shadow</title> <style type="text/css"> .heading { text-align: center; } .image-box { display: block; margin-left: auto; margin-right: auto; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; } </style> </head> <body> <div> <h3>Style 4<h3> <img src="MUO.jpg"> </div> </body></html>Встроенный CSS
Встроенный CSS используется для добавления уникальных стилевых правил к элементу HTML. Его можно использовать с элементом HTML через атрибут стиля. Атрибут style содержит свойства CSS в форме «свойство: значение», разделенные точкой с запятой (; ).
Все свойства CSS должны быть в одной строке, т.е. между свойствами CSS не должно быть разрывов строк. Вот пример, демонстрирующий, как использовать встроенный CSS с HTML-документом:
<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>CSS box-shadow</title> </head> <body> <div> <h3>Style 4<h3> <img src="MUO.jpg"> </div> </body></html>Внешний CSS
Внешний CSS – это наиболее идеальный способ применения стилей к HTML-документам. Внешняя таблица стилей содержит все правила стилей в отдельном документе (файле .css), затем этот документ связывается с документом HTML с помощью тега . Этот метод – лучший метод определения и применения стилей к HTML-документам, так как затронутый HTML-файл требует минимальных изменений разметки. Вот пример, демонстрирующий, как использовать внешний CSS с HTML-документом:
Создайте новый файл CSS с расширением .css. Теперь добавьте в этот файл следующий код CSS:
.heading { text-align: center;}.image-box { display: block; margin-left: auto; margin-right: auto; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}Наконец, создайте HTML-документ и добавьте в него следующий код:
<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>CSS box-shadow</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div> <h3>Style 4<h3> <img src="MUO.jpg"> </div> </body></html>Обратите внимание, что файл CSS связан с документом HTML через тег и атрибут href.
Все три вышеупомянутых метода (внутренний CSS, встроенный CSS и внешний CSS) будут отображать один и тот же вывод –
Сделайте свою веб-страницу элегантной с помощью CSS
Используя CSS, вы полностью контролируете стиль своей веб-страницы. Вы можете настроить каждый элемент HTML, используя различные свойства CSS. Разработчики со всего мира вносят свой вклад в обновления CSS, и они делают это с момента его выпуска в 1996 году. Таким образом, новичкам есть чему поучиться!
К счастью, CSS удобен для новичков. Вы можете получить отличную практику, начав с нескольких простых команд и увидев, куда вас приведет ваше творчество.
Источник записи: makeuseof.com
Создание тени для текста и других текстовых эффектов при помощи CSS
Свойство text-shadow не новое для CSS-3, оно было введено еще в CSS-2, однако браузеры начали учитывать его только в последнее время.
Как следует из названия, свойство text-shadow позволяет создавать тень для текста при помощи CSS. Ниже приводится синтаксис text-shadow.
Материалы по теме:
Синтаксис.
Первое значение определяет смещение тени по оси X, т. е. по горизонтали. Если значение положительное, оно определяет смещение тени справа от текста, при отрицательном значении, смещение тени влево от текста. Точно также, второе положительное значение определяет смещение по оси Y (по вертикале), положительное значение определяет смещение ниже текста, отрицательное создает расстояние выше текста.
Третье положительно значение, определяет радиус размытия тени. Если значение не указанно, то размытия не будет.
Создание текстовых эффектов при помощи свойства text-shadow.
При помощи свойства text-shadow можно сделать некоторые текстовые эффекты, которые раньше можно было сделать только при помощи фотошопа или другого графического редактора. Чтобы получить общее представление о том, как можно использовать text-shadow, ниже рассмотрим некоторые примеры.
1. Простая тень для текста на CSS.
Это простой пример использования свойства text-shadow. В нем создана тень 2px по оси X и оси Y, а также радиус размытия 2px.
color:#7690CF; text-shadow:2px 2px 2px #48577D;
2. Стиль выгравированного текста.
В данном случае указано только вертикальное смещение, без размытия.
color: #666; text-shadow: 0px 3px 0px #666;
3. Светящийся текстовый эффект.
Светящийся эффект можно сделать добавив только радиус размытия.
color:#FAF4E8; text-shadow:0 0 20px #FFE30A;
4. Размытый текст.
В приведенном ниже примере все сделано аналогично предыдущему, т. е. указан только радиус размытия без горизонтально или вертикально смещения. Однако в этом примере, использовалось значение цвета transparent, которое указывает, что цвет фона должен быть прозрачным. Это дает эффект размытия.
color: transparent; text-shadow: 0 0 10px #333;
5. Использование нескольких теней.
Можно указать несколько теней для текста, разделяя значения запятыми. Пример использования нескольких теней:
color:#F2B405; text-shadow: 0 0 4px #F24405, 0 -5px 4px #F27405, 2px -10px 6px #F29F05, -2px -15px 11px #F2E205, 2px -18px 18px #222601;
6. Рельефный текст.
В приведенном ниже примере используются две тени. В первой тени, горизонтальные и вертикальные значения являются отрицательными, а во второй тени используются положительные значения, что придает рельефность тексту.
color:#ccc; text-shadow: -1px -1px #FFF, 1px 1px #333;
7. Граница вокруг текста.
Следующий код создает эффект границы для текста.
color:#7FCAEB; text-shadow: 0 -1px #00468C, 1px 0 #00468C, 0 1px #00468C, -1px 0 #00468C;
8. Текст в стиле 3D.
3D эффект для текста, может быть создан с использованием нескольких теней. Для достижения эффекта каждая тень немного увеличивается с использованием одного и того же цвета.
color:#F2B405; text-shadow: 2px 2px #F27405, 3px 3px #F27405, 4px 4px #F27405, 5px 5px #F27405
Материал подготовлен сайтом: WebMasterMix.ru
Источник
Рекомендуем ознакомиться:
- Подробности
Опубликовано: 19 Март 2011
Обновлено: 26 Сентябрь 2013
Просмотров: 13431
16 CSS Text Shadow Effects
Коллекция отобранных вручную бесплатных HTML и CSS text shadow effect примеров кода.
- Текстовые эффекты CSS
- Примеры CSS box-shadow
Автор
- Филдинг Джонстон
О коде
Трехмерный мультяшный текст с тенью текста CSS
Игра с CSS text-shadow и шрифтом Google «Luckiest Guy».
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Автор
- Лиам Иган
О коде
Миксин 3D текста SCSS
Это простой миксин SCSS, который создает трехмерный блочный текст с текстовыми тенями .
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Автор
- Эрин Э.Салливан
О коде
Анимированная тень текста
Забавная CSS-анимация, которая создает отскок, имитируя разделение RGB во время процесса.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Автор
- Мартин Пикод
Сделано с
- HTML / CSS (SCSS) / JavaScript
О коде
Тень текста с учетом направления
Ориентация text-shadow , использование переменных CSS для создания перспективы и трехмерного светового эффекта на тексте.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Автор
- Даниэль Гонсалес
О коде
Groovy CSS-эффект
Эффект шрифта 1960-х годов с использованием свойства CSS text-shadow вместе с функцией SASS и миксинами для сохранения кода DRY.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Автор
- Нурай Йемон
О коде
Анимация текста в стиле Netflix с помощью CSS
Текстовая анимация в стиле Netflix с CSS и функцией SCSS, чтобы иметь длинную тень текста .
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
О коде
Необычная тень текста
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
О коде
CSS тень текста
Современный эффект тени для текста с помощью CSS text-shadow .
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Автор
- Алекс Мур
О коде
Pretty Shadow
Красивая тень текста.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Автор
- Дарио Корси
О коде
Variable Longshadow с градиентами Mixin
Этого не должно быть. Но теперь вы можете определять длинные тени с разными цветами и размахами с помощью одного микшина Sass.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Автор
- Эрик Юнг
О коде
Неоновые эффекты
Neon текстовая тень эффектов.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Автор
- Нгуен Хоанг Нам
О коде
Потрясающая тень текста
Эффект плоской и простой тени для текста.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Автор
- Маюр Эльбхар
О коде
Текст-тень
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
О коде
Смесь с градиентом длинных теней
Примесь Sass (SCSS) для быстрой генерации длинных теневых градиентов.Подходит для text-shadow и box-shadow .
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Автор
- Хорхе Эпуньян
О коде
CSS3 Эффекты тени текста
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Автор
- Лукас Беббер
О коде
CSS пунктирная тень
Чистая хипстерская типографская пунктирная тень на CSS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Как создать текстовые эффекты с падающими тенями, которые не отстают
Вы отправляете свой бренд в зону раздражения с плохими тенями и текстовыми эффектами?
Тенденции в дизайне могут быть непостоянными — один год они считаются крутыми, а в следующий — вызывающими раздражение. Текстовые эффекты, такие как Drop Shadow, могут легко попасть в последнюю категорию при неправильном использовании.
Давайте не будем этого делать. Давайте создадим текстовые эффекты, которые не отстой.
При правильном использовании текстовых эффектов они могут привлечь внимание людей к вашему дизайну, придать ему глубину и помочь поднять его.
Сюда входит умное использование света и тьмы, а также текстовые эффекты, такие как тени и свечение.
Но те же самые эффекты, при плохой визуализации, могут мгновенно сделать ваш дизайн неприятным для глаз, властным или, что еще хуже,… дрянным.
Существует так много инструментов, которые позволяют нам отбрасывать тени.Но, к сожалению, многие дизайнеры «сделай сам» пропустили памятку о том, как их правильно использовать… для создания текстовых эффектов, которые не отстой.
Давайте рассмотрим, что можно и чего нельзя делать при использовании текстовых эффектов (в частности, теней и эффектов свечения) в ваших проектах. Да, еще есть инфографика и супер крутое видео, если вы предпочитаете визуальный способ (прокрутите вниз).
Что можно и что нельзя делать при создании текстовых эффектов с падающими тенями, которые не отстают
1 Что нужно делать — используйте контрастные цвета
Когда дело доходит до дизайна, контраст очень важен.Он говорит вашему дизайну: «Кто в доме хозяин!»
Под этим мы подразумеваем, что он говорит нам, где мы хотим, чтобы кто-то сфокусировал внимание, когда они смотрят на изображение.
Текстовые эффекты ничем не отличаются и требуют, чтобы вы сами решали, кто здесь главный!
Итак, помимо размышлений о фирменных цветах, вам нужно подумать о том, какие из них наиболее важны.
Контрастность может быть достигнута с помощью светлого и темного, цвета, формы, текстуры, размера… и, конечно же, текстовых эффектов.
Убедитесь, что цвет вашего шрифта контрастирует с используемым эффектом (тень или свечение).Ваш текстовый эффект также должен контрастировать с фоном.
Вот пример достойного передергивания цветового контраста:
Вот пример контрастных цветов, которые никуда не годятся:
Не забывайте, однако, соблюдать баланс. Слишком много контраста в дизайне … ну … это отстой.
2 Не переходите на темную сторону с непрозрачностью
Непрозрачность означает уровень прозрачности изображения или элемента.
Непрозрачность может быть забавной, когда у вас есть инструмент для дизайна, а добавление прозрачности к фону действительно может помочь вашему тексту выступать поверх.
Но есть несколько правил, которые помогут вам:
- Для текста на более светлом фоне потребуется меньшая непрозрачность.
- Текст на более темном цветном фоне требует большей непрозрачности.
3 Делайте — не бойтесь
Жесткие края — это тип тени, которая работает — особенно для современного дизайна — и остается популярным выбором для текстовых эффектов.
Используйте сплошную тень с резкими краями, которая соответствует вашему основному шрифту, и вы избежите создания текстовых эффектов, которые отстойны.
4 Не дайте нам размытых глаз
Мы любим «размытие». Это может быть такой забавный текстовый эффект, с которым можно поиграть.
Когда вы обнаруживаете размытый фон и то, как это может помочь сделать ваш текст «всплывающим», вы неизбежно отправляетесь на миссию, чтобы все размыть. Я имею в виду, вы должны согласиться, размытие выглядит довольно потрясающе по сравнению с фоновыми изображениями.
Трудно не хотеть #BlurAllTheThings.
Но тогда… если вам повезет, вы поймете, что из-за чрезмерного размытия ваши дизайны выглядят отстойно.
Так что же делать вместо этого?
Будьте мягкими с размытием. Обычно лучше всего работает минимальное размытие, особенно для текстовых эффектов и теней.
Вот отличный пример хорошо выполненного эффекта размытия:
Теперь, когда мы на полпути к тому, что можно и что нельзя делать, давайте взглянем на инфографику:
The Infographic (о том, как создавать текстовые эффекты, которые не отстой)
Поделитесь этим изображением на своем сайте
Укажите авторство easil.com с этим изображением.
< br />
< br />
5 Делайте — делайте это тонко, глупо
Этот совет говорит сам за себя.Одна из самых больших опасностей, связанных с текстовыми эффектами, — переборщить с ними. Не будь слишком драматичным!
Если все, что мы видим, — это падающая тень, то вам нужно немного ее обуздать.
И, пожалуйста, из любви к типографике, используйте текстовые эффекты только для шрифта, который вы хотите выделить. … действительно выделяют.
Сохраните его, когда он вам понадобится!
Скажем вместе: Не всем шрифтам нужен текстовый эффект.
6 Не затмевайте свой текст
Затенение — одна из самых распространенных ошибок, которые делают люди.
Вот два простых правила, которые помогут вам контролировать текстовые эффекты тени:
- Используйте темный цвет для эффекта тени
- Примените светлый цвет для эффекта свечения на темном фоне.
7 Делай — будь нежным
Ваша тень или эффект свечения должны «приподнимать» дизайн… он не должен становиться дизайном.
Если вы можете размыть тень на фоне, это заставит ваш текст выделяться ровно настолько, чтобы действительно бросаться в глаза (без чрезмерной чрезмерности).
Подумайте о «мягких», «блеклых» или «размытых» эффектах на ваших изображениях.
8 Не нарушайте пропорции
Когда дело доходит до падающих теней, позвольте тексту говорить за вас.
Ваши шрифты подскажут, как создавать текстовые эффекты, которые не отстают.
Все просто:
1 Жирным шрифтам нравятся более короткие тени.
2 Тонкие шрифты любят тонкие эффекты.
Примените это к своим проектам!
Итак, вы готовы принять залог? Обещание создавать только не отстойные текстовые эффекты?
Тогда слушайте — у нас есть новая функция Easil, которая поможет вам!
Посмотрите видео!
Посмотрите это видео, чтобы увидеть в действии наш инструмент текстовых эффектов для создания тени и великолепного «свечения».
Оставить комментарий
Вы поклонник теней и текстовых эффектов?
Какая для вас самая большая проблема в том, чтобы заставить их сделать ваши проекты популярными?
21 отличный пример эффекта тени текста CSS
CSS Text Shadow Effects уникален по сравнению с другими, которые специалист по веб-сайту и инженер могут использовать для улучшения взаимодействия с клиентом. Но добавление тени к контенту никогда не было так просто.Тень шрифта css можно сделать эффективной с помощью различных свойств. С помощью CSS3, используя свойство «тень текста», вы можете оказывать огромное количество воздействий на контент. Вы можете использовать некоторые из лучших уловок css с теневым текстом. Некоторые из примеров теней текста css: 3D, длинная тень, неоновые огни, ретро-тени, 3D-очки и многое другое.
Свойство text shadow используется для добавления теней к тексту с помощью html css и js. Он признает, что выделенное запятыми краткое изложение теней должно быть связано с контентом и любыми его улучшениями.Каждая тень связана с содержимым компонента и всеми его улучшениями. Тени соединены спереди назад, где основная тень находится сверху.
Коллекция удивительных примеров эффектов тени текста HTML CSS с исходным кодом
Мы можем взять множество примеров эффектов тени текста CSS, таких как «Необычные тени текста» с использованием HTML и CSS, анимация текста в стиле Netflix с помощью CSS и многие другие. Итак, в этой статье мы поговорим о некоторых из лучших и наиболее часто используемых примеров css Text Shadow Effects всех времен.
Связанные
Следующие модели заслуживают особого внимания как потрясающий генератор текстовых теней.
1.
Pretty Shadows с HTML и CSS
Самый первый — один из часто используемых примеров эффектов тени текста css. Pretty Shadow — это мягкая и чистая тень CSS текста. Это тонкий и чистый CSS-контент Shadow. Типичный и базовый дизайн выделяет его среди остальных. Этот эффект достигается несколькими простыми кодами, написанными на HTML и CSS (SCSS).
Хотя это выглядит просто, вы не можете себе представить, какую прекрасную простоту он привносит в сам текст. Чтобы страница выглядела простой и красивой одновременно, вы определенно можете выбрать эту. Конечно, вы можете использовать любой шрифт по вашему выбору и поэкспериментировать с этим эффектом.
Демо / Код
2.
Variable Longshadow с миксином градиентов
Это обычно единственное в своем роде расширение для экземпляров эффектов тени текста css. Это следующий эффект тени, который вы обязательно захотите использовать.С его помощью вы можете характеризовать длинные тени с различными оттенками и распространениями с помощью одного микшина Sass. Это также придает текстам эффект свечения css.
Эффекты на тексте выглядят великолепно, а длинные тени с некоторыми смешанными цветами дают восхитительный результат. Этот эффект помогает в качестве красивого генератора теней для текста. В демонстрации ниже вы можете увидеть различные слова, смешанные с оттенками, и прекрасную тень неотличимых оттенков от текстов.
Демо / Код
3.
Потрясающий эффект текста и тени
Вот еще один эффект тени для текста css, использующий только html и css. Если вам нужен простой и красивый эффект тени контента, вы можете попробовать это. Само название заставляет пользователя использовать его хотя бы один раз.
Это плоский и простой эффект тени контента, который вы хотели бы применить, чтобы текст выглядел красиво. Точно так же это, безусловно, выглядит великолепно, а также улучшает вовлечение клиентов с помощью интеллектуальных воздействий.Просто проверьте модель, которая кажется сбалансированной для любых веб-страниц.
Демо / Код
4.
Микс с градиентом длинных теней
Хочу
использовать что-то подходящее как для text-shadow, так и для box-shadow?
Тогда этот эффект — тот, который вы искали. Это Sass (SCSS)
mixin для быстрого создания длинных теневых наклонов.
Это чем-то похоже на эффект «Variable Longshadow with Gradients Mixin». Как специалист по веб-сайтам, когда вы играете с оттенками, это гарантирует, что они бросятся в глаза.Точно так же смешивание оттенков, скорее всего, вызовет беспорядок у клиентов и заставит их использовать его для своих сайтов. Этот эффект помогает в качестве прекрасного генератора теней для текста.
Демо / Код
5.
Groovy HTML CSS Effect
Следующий — это старое, но все еще используемое влияние тени контента. Это влияние стиля текста 1960-х годов с использованием свойства тени содержимого CSS наряду с возможностями SASS и миксинами для сохранения кода DRY. Это было чрезвычайно важно в качестве потрясающего генератора текстовых теней.Эффект на текст и смесь цветов создают приятную атмосферу!
Если вы хотите, чтобы ваш текст выглядел модно и увлекательно, вы обязательно можете попробовать этот. Также есть живость в тенях содержания. Вы можете увидеть демонстрацию и увидеть, что это воздействие очень расслабляющее и может сделать страницы прекрасными.
Демо / Код
6.
CSS Множественные текстовые тени
Веб-композиция css выглядит все более красивой и качественной с несколькими тенями текста, которые включают смесь цветов.Настоящее веселье начинается, когда вы понимаете, что не ограничены одинокой тенью. Используя запятую, чтобы изолировать объявления, вы можете применить необходимое количество теней! Этот эффект служит прекрасным генератором теней для текста. Такого эффекта можно добиться, если у вас есть базовые знания в области html и css.
Как специалист по веб-сайтам, вы добиваетесь отличного формата, который должен понравиться каждому, кто посещает ваши сайты. Так что это может оказать влияние на клиентов.
Демо / Код
7.
3D-текст с тенью текста
Следующий случай тени от текста сопровождает трехмерное воздействие. Все мы знаем, насколько интересен термин 3D. Мы все, должно быть, видели хотя бы один 3D-фильм. Это воздействие приносит тонкий (зефирный) 3D-контент CSS, стилизованный с использованием теней. Это просто создает эффект трехмерного текста с тенью текста.
Поскольку трехмерные изображения сделаны интерактивными, чтобы клиенты чувствовали себя вовлеченными в сцену, эти эффекты также вовлекают пользователя в эффекты.Это просто создает трехмерный эффект для вашего сайта начальной загрузки. Надеюсь, это станет жемчужиной веб-архитектуры вашего бизнеса.
Демо / Код
8.
Необычная тень текста с HTML и CSS
Само название говорит о моде, что еще вам нужно знать? Это современный эффект тени для текста css, который делает текст немного размытым, но в целом все украшения и стили. Однако конечный результат может сделать вас ВАУ.
Эффекты выглядят немного туманными, но на вашем сайте они могут выглядеть презентабельно.Здесь используются HTML и CSS, поэтому все будет просто. Код прост, так как его малейшее использование дает дополнительное понимание.
Демо / Код
9.
Эффект тени анимированного текста
В случае, если вы ищете гладкий и чистый эффект тени для текста css, на этом этапе это будет вашей альтернативой. Благодаря этому мы получаем оживленный 3D-контент, использующий тени текста CSS. Это воздействие помогает в качестве прекрасного генератора теней для текста.Конечный продукт представляет собой забавное CSS-действие, которое позволяет пропускать при эмуляции раздела RGB во время процедуры.
Для улучшения этого используются простой HTML и CSS. Безупречный и плавный формат эффектов создаст впечатление клиента. В этой модели используется минимум компонентов, поэтому ее не составит труда понять.
Демо / Код
10.
Анимация текста в стиле Netflix с помощью CSS
Анимация
действительно сделал UI лучше. Воздействие движения в этой модели действительно захватывающее.Это живость контента в стиле Netflix с помощью CSS и возможности SCSS, чтобы иметь
длинная тень содержимого. Этот эффект выглядит стильно среди других, насколько это возможно.
увидеть, что само название эффекта может привлечь внимание пользователей. Когда мы размещаем
указатель мыши на текст, который он сжимается, что требует повышенного внимания со стороны
пользователи.
Это невероятно важный генератор теней для текста. Как и в других моделях, в этом эффекте используются только HTML и CSS. План и смесь оттенков делают его намного лучше.Движение (анимация) плавное и убедительное.
Демо / Код
11.
Трехмерный мультяшный текст CSS Text-Shadow
Поиск
для каких-нибудь классных моделей деятельности для ваших текстов? Поверьте мне, это совершенно круто и
может вернуть ваши детские воспоминания. Если вы фанат мультфильмов, вам следует
обязательно проверьте этот эффект, который заставляет текст выглядеть так, как будто это ваш
название любимого мультфильма или любого мультсериала.
Вы можете добавлять свои собственные стили и получать удовольствие от игры с этим удивительным эффектом CSS.Вам определенно понравится играть с этим. Структура этой модели идеальна, а затемнение, используемое для отделки, привлекает внимание.
Демо / Код
12.
Миксин 3D текста SCSS
Если вы ищете чистый дизайн и некоторые 3D-эффекты, тогда вам подойдут эти примеры с эффектом тени от текста. Это простой миксин SCSS, который делает трехмерный контент блочным с тенями. Контент отображается в виде трехмерного изображения и квадратными буквами, что делает его потрясающим.
Мы использовали HTML и CSS, чтобы получить прекрасный конечный результат. Код простой и чистый, поэтому он будет понятен и актуален в вашей задаче. Такой базовый эффект чрезвычайно полезен.
Демо / Код
13.
Тень текста с учетом направления (CSS и JavaScript)
Как
специалист по веб-сайтам, если вы ищете веб-композицию
где вы можете установить отличное стартовое соединение в этот момент, вот
следующий эффект « Direction Aware Text Shadow», который делает правильный
использование факторов CSS для воздействия на контент точки обзора и трехмерного света.
С его помощью вы можете очень короткими словами показать, по какой причине вашим страницам уделяется гораздо больше внимания по сравнению с другими. Цветовые сочетания, дизайн и общая отделка выглядят великолепно и обязательно понравятся покупателям. Эффект достигается с помощью HTML, CSS и JS.
Демо / Код
14.
Неоновый текст Эффект тени
Это можно включить как один из самых красивых эффектов. Он дает потрясающую компоновку из девяти отличительных неоновых теней от контента с использованием CSS и JavaScript.Это обеспечивает красивый эффект свечения текста css. Это придаст вашей веб-архитектуре задорную и веселую атмосферу. Ничего не просматривая, клиенты получают четкое представление о том, как это место будет проводить приличное время. Это дает отличный эффект свечения текста css. Этот эффект может идеально подойти для музыкального сайта.
Освещение и планы выглядят великолепно и привлекают внимание покупателей. Короче говоря, основная идея состоит в том, чтобы включить очарование эффектов, ничего не удаляя из содержимого.Кодирование выполняется в HTML, CSS и JS.
Демо / Код
15.
Peel Letters с анимированными текстовыми тенями
Этот эффект становится все более привлекательным для клиентов. Классная смесь цвета и эффекта 3D-очков применяется к контенту с использованием тени текста css. Текст начинает действовать, когда на него помещается указатель мыши. Тексты складываются, как закрытая страница книги. Кроме того, он возвращается в исходное состояние, когда мышь находится вне его.
Живость плавная, когда происходят изменения. Все цветовые сочетания и эффект анимации прекрасны. Этот эффект достигается с помощью HTML и CSS. Коды просты в использовании и понятны.
Демо / Код
16.
Градиентный текст с падающей тенью CSS3
Этот эффект стоит ассоциировать. Это воздействие выглядит динамично привлекательным для клиентов. В результате воздействия на контент выглядят великолепно, а красивое сочетание цветов и общего дизайна дает превосходный результат.Это придает тексту эффект свечения css. Вы можете попробовать это на случай, если вы будете счастливы создать идеальный и гладкий сайт.
Это может дать клиентам четкие сигналы, аналогичные тому, где они нам нужны, чтобы сосредоточить внимание. Расположение и скрывающая смесь делают это с большим отрывом преобладающим. Это влияние достигается с помощью HTML и CSS. Коды проще в использовании и оправданы.
Демо / Код
17.
Веселые тени текста CSS
Здесь вы можете увидеть несколько разных красивых эффектов, которые могут быть достигнуты простым пониманием HTML и CSS.Во-первых, первый правый оттенок немного темнее, чем затенение фона. Во-вторых, второй слева выглядит очень ретро и немного размытым. Кроме того, вторая левая часть описывает из темы, что означает, что вы можете применить столько теней, сколько захотите. Более того, третья слева, которая похожа на «двойную тень», но тень немного ниже по сравнению с предыдущей, третья справа, которая представляет собой очень гладкий и чистый эффект, который отлично смотрится на вашей странице, четвертая справа который придает трехмерный эффект вашему тексту, светящийся, который делает ваш текст сияющим и удивительно красивым.Светящийся придает тексту эффект свечения css.
Аналогичным образом, другие эффекты теней контента невероятно легко реализовать в фундаментальной структуре, однако они могут принимать широкий диапазон структур.
Демо / Код
18.
Обводка текста / Граница тени текста CSS
Благодаря этому вы можете применить прекрасные границы к своему контенту, которые могут быть чрезвычайно важны для встречающихся клиентов. В демонстрации ниже показаны некоторые из примеров, которые вы можете попробовать сами, если у вас есть некоторое представление о html и css.Это потрясающе важно в качестве потрясающего генератора текстовых теней. Вы можете поиграть с цветовыми эффектами и размерами границ по вашему выбору. Первый придает тексту эффект свечения css. Мне больше всего нравится неоновая лампа, которая выглядит очень многообещающей.
Примененная граница — главный герой всей этой собственности, и вы тоже можете использовать ее, если хотите, чтобы ваша страница привлекала внимание.
Демо / Код
19.
HTML CSS Text Shadow
Обычно это исключительная разработка для
случаи воздействия тени контента.Это следующее теневое воздействие на вас
может определенно захотеть использовать. Этот эффект можно использовать там, где вы хотите
пользователям обращать особое внимание на важные уведомления, ваши девизы и т. д.
дизайны, покупатели обязательно взглянут на этот.
Между тем, это воздействие достигается с помощью HTML и CSS. Коды проще и разумнее.
Демо / Код
20.
Пример Text-Shadow
Каким образом клиенты поймут, какие
выбрать в случае, если они посмотрят на сайт? Они без сомнения нуждаются
чтобы получить интерфейс с вибрациями.Вы можете использовать это влияние как опцию в
контраст с вашими текущими теневыми ударами. Это на том основании, что это
сопровождает крутой удар по планам и оттенкам.
Html и css информация, как ожидается, достигнет этого завершения. Кодирование становится все более простым и оправданным. Вы можете попробовать это независимо от кого-либо еще.
Демо / Код
21.
Примеры теней сложного текста
Как должно быть очевидно, разные произведения имеют разные воздействия.Некоторые из них являются базовыми, а некоторые выглядят несколько более измененными. Некоторые выглядят просто, а некоторые придают тексту эффект свечения CSS. Эффект свечения текста css может выглядеть очень стильно и привлекательно. Самая привлекательная — вампирская. Само слово привлекает внимание клиентов, так же как и его воздействие несколько жутко. Вы можете использовать этот эффект для названия фильма с кровью и кровью или чего-то в этом роде. Также, скорее всего, другие оставшиеся также очень привлекательны и могут быть использованы.
Вы можете изучить демо внизу. Мы можем использовать HTML и CSS для лучшего понимания кода.
Демо / Код
Заключение
То есть это были одни из самых крутых эффектов тени текста CSS с использованием HTML, CSS и немного JS. Включено большинство примеров эффекта тени текста. В результате это, безусловно, может помочь сделать вашу страницу еще более привлекательной и красивой. Эти модели были чрезвычайно ценными для создания потрясающего генератора теней контента.С их помощью вы можете вывести свою сеть и универсальные структуры на совершенно новый уровень. Как бы то ни было, мы знаем, что есть еще несколько ошеломляющих ударов. Обязательно рассмотрим эти темы в ближайшее время. А пока продолжайте кодировать и продолжайте исследовать!
CSS TEXT SHADOW EFFECTS — Сообщество разработчиков
ЕСЛИ ВАМ НРАВИТСЯ САМОЛЕТ, ТО УЗНАЙТЕ БОЛЬШЕ Пример тени текста CSS
Заголовок: -CSS3 текстовые эффекты тени
Автор: - Хорхе Эпуньян
Сделано с помощью: - HTML CSS
Войти в полноэкранный режимВыйти из полноэкранного режима
Название: [webkit] Анимированный узор "текст-тень".
Автор: -carpe numidium
Сделано с помощью: - HTML CSS
Войти в полноэкранный режимВыйти из полноэкранного режима
Название: -Генератор длинных теней.
Автор: -Макс Колер
Сделано с помощью: - HTML CSS
Войти в полноэкранный режимВыйти из полноэкранного режима
Заголовок: -Текстовая анимация в стиле Netflix с использованием CSS.
Автор: -Nooray Yemon
Сделано с помощью: - HTML CSS
Войти в полноэкранный режимВыйти из полноэкранного режима
Текстовая анимация в стиле Netflix с CSS и функцией SCSS для длинной тени текста
Заголовок: -Неоновый эффект тени для текста
Автор: -Эрик Юнг
Сделано с помощью: - HTML CSS
Войти в полноэкранный режимВыйти из полноэкранного режима
Заголовок: - Эффект многослойного текста и тени CSS
Автор: -Shireen Taj
Сделано с помощью: - HTML CSS
Войти в полноэкранный режимВыйти из полноэкранного режима
Название: -Миксин с градиентом длинной тени
Автор: -roikles
Сделано с помощью: - HTML CSS
Войти в полноэкранный режимВыйти из полноэкранного режима
Миксин Sass (Scss) для быстрой генерации длинных теневых градиентов.Подходит как для text-shadow, так и для box-shadow.
Название: -Animated Text-Shadow
Автор: -Эрин Э. Салливан
Сделано с помощью: - HTML CSS
Войти в полноэкранный режимВыйти из полноэкранного режима
Забавная CSS-анимация, которая создает отскок, имитируя разделение RGB во время процесса.
Заголовок: -3D CSS Typography
Автор: -Noah Blon
Сделано с помощью: - HTML CSS
Войти в полноэкранный режимВыйти из полноэкранного режима
Заголовок: - Флип-карта на чистом CSS
Автор: -Aron
Сделано с помощью: - HTML CSS
Войти в полноэкранный режимВыйти из полноэкранного режима
Флип-карта на чистом CSS
ЕСЛИ ВАМ НРАВИТСЯ САМОЛЕТ, ТО УЗНАЙТЕ БОЛЬШЕ Пример тени текста CSS
Phaser — Примеры — Текст
Тень текста
/ * * Подождите, исходники загружаются с GitHub... * * _____ * __ / _ /// * / _ / \ * \ / _ \ = [o = o] * \ _, __) * | _ \ * l ______ / * /: | * / \; | - * \ _______ j *. / ..... \ .. * * /
Версия Phaser:
2.18.0 — Phaser CE2.17.0 — Phaser CE2.16.2 — Phaser CE2.16.1 — Phaser CE2.16.0 — Phaser CE2.15.1 — Phaser CE2.15.0 — Phaser CE2.14.0 — Phaser CE2.13.3 — Phaser CE2.13.2 — Phaser CE2.13.1 — Phaser CE2.13.0 — Phaser CE2.12.1 — Phaser CE2.12.0 — Phaser CE2.11.1 — Phaser CE2. 11.0 — Phaser CE2.10.6 — Phaser CE2.10.5 — Phaser CE2.10.4 — Phaser CE2.10.3 — Phaser CE2.10.2 — Phaser CE2.10.1 — Phaser CE2.10.0 — Phaser CE2.9.4 — Phaser CE2.9.3 — Phaser CE2. 9.2 — Phaser CE2.9.1 — Phaser CE2.9.0 — Phaser CE2.8.8 — Phaser CE2.8.7 — Phaser CE2.8.6 — Phaser CE2.8.5 — Phaser CE2.8.4 — Phaser CE2.8.3 — Phaser CE2.8.2 — Phaser CE2.8.1 — Phaser CE2.8.0 — Phaser CE2.7.10 — Phaser CE2.7.9 — Phaser CE2.7.8 — Phaser CE2.7.7 — Phaser CE2.7.6 — Phaser CE2.7.5 — Phaser CE2.7.4 — Phaser CE2. 7.3 — Phaser CE2.7.2 — Phaser CE2.7.1 — Phaser CE2.7.0 — Phaser CE2.6.2 — Kore Springs2.6.1 — Caemlyn2.6.0 — Fal Moran2.5.0 — Five Kings2.4.9 — Four Kings2.4.8 — Watch Hill2.4.7 — Hinderstap2.4.6 — Baerlon2.4.5 — Sienda2.4.4 — Amador2.4.3 — Coramen2.4.2 — Altara2.4.1 — Иониновый источник2.4.0 — Katar2.3.0 — Tarabon2.2.2 — Alkindar2.2.1 — Данабар2.2.0 — Бетал2.1.3 — Равинда2.1.2 — Уайтбридж2.1.1 — Эйанрод2.1.0 — Кайриен2.0.7 — Амадиция2.0.6 — Джорнхилл2.0.5 — Танчико2.0.4 — Мос Шираре2.0.3 — Аллораллен2.0.2 — Гхелдан2.0.1 — Lyrelle2.0.0 — Aes Sedai1.1.6 — Shienar1.1.5 — Saldaea1.1.4 — KandorTheme:
АтмосфераХаосХромОблако9 ДеньОблако9 НочьОблако9 Ночь Низкие цветаОблака ПолночьКобальтМалиновый редакторРассветТкач грезЗатмениеГитуба
Посмотрите код этого примера:
// github.com / photonstorm / phaser-examples / blob / master / examples / text / text shadow.js.
Скачать
Получите исходный код и ресурсы для каждого примера Phaser из репозитория Phaser Examples на GitHub.
С буквально сотнями частей исходного кода это бесценный ресурс, доступный локально.
Онлайн-редактор кода
Phaser Sandbox позволяет вам программировать игры в браузере без необходимости загружать или устанавливать что-либо.
Мощный редактор включает поддержку кода Phaser, фрагменты кода JavaScript и множество функций, которые вам полюбились в таких редакторах, как Sublime и Brackets.
Text Shadows :: V2 Template Demo Site
Этот контент все еще находится в разработке.
Элементам можно придать текстовую тень, применив к элементу класс CSS .textshadow . Поведение по умолчанию предполагает использование белого фона и создание тени на 10% темнее.
Вложенные правила доступны для использования с существующими правилами CSS UNM для создания теней текста на цветном фоне. Использование тени текста CSS можно использовать только на сплошном фоне, поскольку непрозрачность не поддерживается.
Текстовые тени имеют длину только 200 пикселей. В идеале они должны использоваться только в контейнерах, которые позволят текстовой тени останавливаться на краю контейнера. Для таких контейнеров должно быть установлено значение «Скрыть переполнение».
Обратите внимание, что использование тени для элемента, содержащего текстовую тень, может быть проблематичным, если не используется более сложное вложение.
Код CSS
Это правило CSS автоматически включается в шаблон UNM по умолчанию.
.textshadow {
текстовая тень:
# E6E6E6 1px 1px,
# E6E6E6 2px 2px,
# E6E6E6 3px 3px,
...
# E6E6E6 200px 200px;
} * текстовая тень создается путем наложения теней размером 1 пиксель на расстояние 200 пикселей. Цвет, используемый для тени, должен затемнять вариант цвета фона, используемого в той же области содержимого.
Примеры
UNM Teal
пример тени текста
* в этом примере используется класс CSS .выноска , которая добавляет дополнительные стили к примерам ниже. Значения «unm-color» можно изменить для создания любого из следующих примеров.
Cherry
пример тени текста
Silver
пример тени текста
Lobo Grey
пример тени текста
High Noon
пример тени текста
Sandia Sunset
пример тени текста
Green Chile
пример тени текста
бирюзовый
пример тени текста
Deep Dusk
пример тени текста
Создавайте крутые и умные текстовые эффекты с помощью css text-shadow ¦ kremalicious
Потому что он включен в Safari с версии 1.1 (!) Пользователи Mac должны знать о различных эффектах этого свойства. Фактически, большинство компаний и людей, основной целевой аудиторией которых являются пользователи Mac, используют этот эффект на своих веб-сайтах.
В этой статье описывается, как работает text-shadow, что с ним можно делать и какие браузеры в настоящее время его поддерживают. В конце статьи я привел несколько примеров и привожу список полезных ресурсов.
Вот обзор заголовков в этой статье. Как видите, он довольно сложный и длинный.Не забудьте выпить чашку вкусного свежего кофе или чая, прежде чем читать:
- Какая тень для текста подходит для
- Какие браузеры это поддерживают
- Кроссбраузерность
- Как это работает и как пользоваться
- Примеры с кодом и демонстрациями
- Взлом: отображение текста в Safari
- Другие статьи и ресурсы
.
№1. Какой текст-тень хорош для
тонкое свечение в моей навигации
Основная цель этого свойства — предоставить дизайнерам и кодировщикам CSS инструмент для создания текстовых эффектов, что раньше можно было сделать только путем рендеринга текста в виде изображений со всеми побочными эффектами.Текст, отображаемый в виде изображения, недоступен для поиска и, следовательно, очень неэффективен для поисковых систем. Еще один побочный эффект заключается в том, что изображения могут быть намного больше, чем одна небольшая строка кода с точки зрения размера файла. Как вы, возможно, знаете, большинство CSS-файлов, которые содержат весь макет веб-сайта, на большинстве веб-сайтов меньше одного изображения. Так что действительно разумно использовать функцию css вместо изображений для уменьшения ненужного трафика.
text-shadow на apple.com
Использование text-shadow для имитации гравированного или трафаретного текста широко используется на веб-сайтах.Apple сделала это в Mac OS X повсюду, а не только со времен Leopard (просто посмотрите на заголовки). Итак, если вы создаете веб-сайт для пользователей Mac, вы можете повысить привлекательность своего веб-сайта, потому что это конкретное использование text-shadow очень хорошо интегрируется с общим внешним видом Mac OS X. Я объясню, как добиться этого гравированного текста. -металлический эффект позже в этой статье.
№2. Какие браузеры его поддерживают
Фактически, text-shadow не является новым свойством, поскольку оно было впервые определено с помощью CSS2 в 1998 году, но только что было реализовано разработчиками KHTML / WebKit.Но он доступен в Safari с версии 1.1 (2003), в Konqueror с версии 3.4 (я полагаю, не уверен) и Opera 9.5. Кроме того, он также поддерживается Firefox 3.1 / 3.5, и, наконец, Google Chrome 2 добавляет полную поддержку свойства text-shadow после того, как они удалили его из первой версии Chrome.
На платформе Mac WebKit также используется в различных других программах с включенным браузером, например Coda от Panic, CSSedit от MacRabbit или NetNewsWire от NewsGator. Также каждый браузер, работающий на движке WebKit, может отображать свойство text-shadow, например Shiira, OmniWeb или Epiphany, которые предназначены для Mac или Linux.
Но с Safari 3.1, бета-версией Opera 9.5, Firefox 3.1 и Google Chrome 2 свойство text-shadow наконец-то нашло свой путь на рабочий стол Windows после 10 лет своего рождения, и Opera является первым браузером, не поддерживающим WebKit, который поддерживает текст-тень.
Но подождите, относительно Safari в Mac OS X нужно запомнить еще одну (плохую) вещь. Обновление Mac OS X 10.5.2 привело к незначительным изменениям рендеринга теней текста WebKit. Кажется, что с этим обновлением текстовая тень наконец-то отображается правильно, поскольку WebKit добавил один дополнительный пиксель к смещению тени на 10.4.11 и 10.5.1.
№ 3. Есть шанс на кроссбраузерность
Значит, основной браузер Internet Explorer еще не поддерживает его, но просто не рассчитывает на Internet Explorer. Думаю, они довольны кодированием своей собственной нестандартной версии CSS для IE9 и созданием теней с помощью этих DXImageTransform.Microsoft.Shadow, которые в итоге выглядят просто ужасно. Так что даже в IE 9 его не будет.
Но с Firefox 3.1, включая text-shadow, все основные браузеры, кроме Internet Explorer, теперь поддерживают его.Таким образом, вы можете начать использовать это в своих следующих проектах, просто используя множество других методов, которые в конечном итоге недоступны в Internet Explorer.
Один кроссбраузерный трюк заключается в использовании условных тегов и предоставлении пользователям Internet Explorer различных таблиц стилей либо с помощью кроссбраузерного хака, либо с помощью старой школы с отображением текста в виде изображений. Если вам не нужно значение радиуса размытия для желаемого эффекта, тогда есть хорошая идея в Design Meme для этой проблемы, которая включает создание тени с помощью псевдоэлемента css: before.
Теперь, когда вы знаете о его совместимости с различными браузерами, мы можем взглянуть на синтаксис свойства text-shadow.
№4. Как это работает и как пользоваться
При определении в таблице стилей css синтаксис свойства должен выглядеть следующим образом:
п {
тень текста: 1px 1px 1px # 000;
} Первые два значения определяют длину смещения тени. Первое значение определяет горизонтальное расстояние, а второе определяет вертикальное расстояние тени.Третье значение определяет радиус размытия, а последнее значение описывает цвет тени:
- значение = X-координата
- = Координата Y
- = радиус размытия
- = цвет тени
Значение
Значение
Значение
Использование положительных чисел в качестве первых двух значений приводит к размещению тени справа от текста по горизонтали (первое значение) и размещению тени под текстом по вертикали (второе значение).
Третье значение, радиус размытия, является необязательным значением, которое можно указать, но не обязательно.Это количество пикселей, на которое растягивается текст, вызывающий эффект размытия. Если вы не используете третье значение, оно будет обработано так, как если бы вы установили нулевой радиус размытия.
В качестве альтернативы для браузеров на основе WebKit в качестве четвертого значения можно использовать значения rgba вместо цветов шестнадцатеричного кода. Последнее число означает прозрачность и может быть установлено от 0,0 до 1,0, чтобы вы могли сделать тень текста более тонкой:
п {
тень текста: 1px 1px 1px rgba (255, 255, 255, 0,5);
} Конечно, эффекты, создаваемые этим свойством, часто зависят от цветов вашего текста и фона, поэтому давайте посмотрим, что мы можем сделать со всеми этими комбинациями.
№ 5. Примеры с кодом и демонстрациями
Я сделал несколько примеров, чтобы показать вам возможности этого свойства CSS. Каждый примерный код следует за текстовым примером, который отображается вашим браузером. Ниже вы найдете снимок экрана с описанным эффектом, созданным в Safari 3.1 в Mac OS X 10.5.2, чтобы пользователи n on-WebKit и пользователи Internet Explorer, не использующие Opera , могли увидеть эффект.
# 5.1 Простая тень
С помощью следующих строк кода css вы получите черный текст на белом фоне с гладкой черной тенью.Тень размещается на 2 пикселя справа и на 2 пикселя ниже текста и имеет радиус размытия 3:
.
цвет: # 000;
фон: #fff;
тень текста: 2px 2px 3px # 000; Я текст с плавной тенью
изображение
Или вы можете сделать его не таким гладким, но также красивым, игнорируя радиус размытия и установив более светлый цвет для тени:
цвет: # 000;
фон: #fff;
тень текста: 2px 2px # 000; Я текст без гладкой тени
изображение
Используя некоторые отрицательные значения, вы можете сделать тень такой, будто ее источник света находится под текстом:
цвет: # 000;
фон: #fff;
тень текста: 2px -2px 3px # 000; Я текст с плавной тенью
изображение
Конечно, вы можете сделать его более напуганным и ужасным для чтения:
цвет: # 33cc33;
фон: #fff;
тень текста: 2px 2px 2px # ff3300; Текст в стиле фанк
изображение
№ 5.2 Apple style (гравированный текст на металле)
С помощью этих линий вы получаете эффект гравированного текста на металле, который часто используется Apple. Для этого вам следует использовать серый фон и очень темный цвет текста. Это не что иное, как белая или светло-серая тень, которая помещается на 1 пиксель ниже текста. Вы можете использовать размытие 1, чтобы он выглядел более круглым. Чтобы сделать эффект более заметным, я выделил полужирным шрифтом:
цвет: # 000;
фон: # 666;
тень текста: 0px 1px 1px #fff; Я выгравирован текст
изображение
Это даже работает наоборот на черном фоне с серым текстом, изменяя только значения цвета:
цвет: # 666;
фон: # 000;
тень текста: 0px 1px 0px #ccc; Я выгравирован текст на черном
изображение
Или вы можете сделать такой, который выглядит так, будто текст выделяется на фоне:
цвет: #fff;
фон: # 666;
тень текста: 0px 1px 1px # 000; Я поверх фона
изображение
№ 5.3 Сделайте свой текст светящимся
Используя радиус размытия, мы можем добиться некоторых интересных эффектов. Вот слегка светящийся белый текст на черном фоне:
цвет: #fff;
фон: # 000;
тень текста: 1px 1px 6px #fff; Я тонкий светящийся текст
изображение
Вы также можете сделать весь текст размытым, используя один и тот же цвет для текста и тени без смещения:
цвет: #fff;
фон: # 666;
тень текста: 0px 0px 3px #fff; Я тоже сияю, но более размыто
изображение
Мы можем сделать это довольно загадочным, используя один и тот же цвет для текста и фона и сделав текст видимым только через text-shadow.Помните, что один и тот же цвет текста и фона может плохо сказаться на удобстве использования…:
цвет: # 000;
фон: # 000;
тень текста: 1px 1px 4px #fff; Я довольно загадочно выглядящий текст
изображение
Или наоборот, чтобы он выглядел светлым и… молочным:
цвет: #fff;
фон: #fff;
тень текста: 1px 1px 4px # 000; У меня довольно молочный текст
изображение
№ 5.4 Дублируйте свой текст
С помощью text-shadow вы можете дублировать любой текст с точностью до пикселя. Просто добавьте несколько пикселей к вашему размеру шрифта и используйте его в качестве значения для вертикального описания смещения тени:
цвет: # 000;
фон: #fff;
тень текста: 0px 20px # 000; Какая строка — текст, какая — тень?
изображение
# 5.5 Несколько теней
К сожалению, Safari 3 не может отображать более одной тени на одном элементе.Он просто отображает первое описание свойства и игнорирует все остальные. Но использование нескольких теней выглядит потрясающе. Таким образом, в настоящее время следующее будет работать только в бета-версии Opera 9.5 или Konqueror. Если вы не используете эти браузеры, взгляните на снимок экрана под примером. Из-за отсутствия поддержки этого в Safari снимок экрана ниже в примере отображается в бета-версии Opera 9.5 на Mac OS X 10.5.2. Ни по какой причине бета-версия Opera 9.5 не отображает цвет фона:
цвет: # 000;
фон: # 000;
text-shadow: 0 0 4px #ccc, 0 -5px 4px # ff3, 2px -10px 6px # fd3, -2px -15px 11px
# f80, 2px -18px 18px # f20; Разве это не круто?
изображение
№ 6.Совет: Избегайте рендеринга текста «светлый-темный» с неровностями в Safari
.
субпиксельный рендеринг
Больше, чем взлом, чем эффект, но он решает проблему плохой визуализации текста «светлый-темный» в Safari. Это вызвано субпиксельным рендерингом слоя Quartz 2D в OS X как части структуры Core Graphics. Также Safari 3.1 в Windows использует рендеринг субпикселей вместо простого сглаживания.
рендеринг сглаживания через тень текста
В большинстве случаев это улучшает читаемость и плавность всего 2D-текста, отображаемого через интерфейс Mac OS X, что делает все таким великолепным.Но у него есть некоторые грубые проблемы со светлым текстом на темном фоне в Safari. Эта проблема не существует при использовании сглаживания.
И с момента открытия 24ways и Кэмерона мы знаем, что Safari визуализирует весь текст с теневым текстом с простым сглаживанием вместо субпикселей. Таким образом, мы можем добавить тень текста со смещением 0 пикселей к желаемому текстовому стилю:
тень текста: 0 0 0 # 000; Это заставляет Safari 3 использовать сглаживание и делать текст на темном фоне более разборчивым с его помощью.
Но это не будет работать с новым Safari 4 (общедоступная бета-версия), как указал Джон в комментариях. Чтобы процитировать его:
Очевидно, если у вашей тени нет размытия, тогда текст будет отображаться субпиксельным. Но размытие более чем на 1 пиксель использует рендеринг сглаживания как «обычный».
Но не бойтесь. Роджи Кинг уже нашел решение этой проблемы, которое вы можете прочитать здесь:
CSS-хакер для сглаживания текстовых теней в Safari, версия
.