Модуль содержит возможности CSS, относящиеся к оформлению текста, такие как подчеркивание, тени текста, а также акценты в тексте восточно-азиатских языков.

Свойства для оформления текста

1. Оформление линии: подчеркивание, обводка и зачеркивание

Подчеркивание, обводка и перечеркивающие линии отображаются только для незамещаемых блоков уровня строки (display: inline) и отображаются по всему тексту, включая пробелы между символами и словами, за исключением отступов в начале и конце строки.

Браузеры могут прерывать подчеркивание и обводку в том месте, где линия пересекает глиф, отображаясь на некотором расстоянии по обе стороны от контура глифа. Когда браузер прерывает подчеркивание или обводку на границах глифа, форма линии на этой границе должна соответствовать форме глифа. Однако, спецификация не предписывает конкретный метод для «следования форме» глифа, оставляя это на усмотрение браузеру.

Рис. 1. Прерывание линии подчеркивания

1.1. Вид линии оформления: свойство text-decoration-line

Поддержка браузерами

IE: —
Edge: —
Firefox: 36, 35 -moz-
Chrome: 57
Safari: 12.1, 7.1 -webkit-
Opera: 44
iOS Safari: 8 -webkit-
UC Browser for Android: 11.8
Chrome for Android: 73
Samsung Internet: 7.2

Свойство text-decoration-line определяет, какой тип линии, если таковые имеются, добавляется к элементу.

Свойство не наследуется.

Синтаксис

Text-decoration-line: none; text-decoration-line: underline; text-decoration-line: overline; text-decoration-line: line-through; text-decoration-line: blink; text-decoration-line: underline overline; text-decoration-line: overline underline line-through; text-decoration-line: inherit; text-decoration-line: initial;

1.2. Стиль линии оформления: свойство text-decoration-style

Поддержка браузерами

IE: —
Edge: —
Firefox: 36, 35 -moz-
Chrome: 57
Safari: 12.1, 7.1 -webkit-
Opera: 44
iOS Safari: 8 -webkit-
UC Browser for Android: 11.8
Chrome for Android: 73
Samsung Internet: 7.2

Свойство text-decoration-style определяет стиль линий, нарисованных для оформления текста, указанного в элементе. Значения имеют то же значение, что и для свойства border-style .

Свойство не наследуется.

Синтаксис

Text-decoration-style: solid; text-decoration-style: double; text-decoration-style: dotted; text-decoration-style: dashed; text-decoration-style: wavy; text-decoration-style: inherit; text-decoration-style: initial;

1.3. Цвет линии оформления: свойство text-decoration-color

Поддержка браузерами

IE: —
Edge: —
Firefox: 36, 35 -moz-
Chrome: 57
Safari: 12.1, 7.1 -webkit-
Opera: 44
iOS Safari: 8 -webkit-
UC Browser for Android: 11.8
Chrome for Android: 73
Samsung Internet: 7.2

Свойство text-decoration-color определяет цвет линии оформления текста, установленный для элемента с text-decoration-line .

Свойство не наследуется.

Синтаксис

Text-decoration-color: currentColor; text-decoration-color: salmon; text-decoration-color: #00ff00; text-decoration-color: rgba(255, 128, 128, 0.5); text-decoration-color: transparent; text-decoration-color: inherit; text-decoration-color: initial;

1.4. Краткая запись свойств линии оформления: свойство text-decoration

Поддержка браузерами

IE: —
Edge: —
Firefox: 36, 35 -moz-
Chrome: 57
Safari: 12.1, 7.1 -webkit-
Opera: 44
iOS Safari: 8 -webkit-
UC Browser for Android: 11.8
Chrome for Android: 73
Samsung Internet: 7.2

Свойство text-decoration является краткой формой записи свойств text-decoration-line text-decoration-style text-decoration-color в одном объявлении. Пропущенные значения устанавливаются на их начальные значения. Значение по умолчанию text-decoration: none solid currentColor; . Свойство не наследуется. Тем не менее, стиль всех линий оформления текста должен быть одинаковый для одного элемента.

1.5. Расположение линии оформления: свойство text-underline-position

Поддержка браузерами

IE: —
Edge: 12
Firefox: —
Chrome: 71
Safari: —
Opera: —
iOS Safari: —
UC Browser for Android: ?
Chrome for Android: 71
Samsung Internet: —

Свойство text-underline-position устанавливает положение линии подчеркивания, указанного в элементе.

Свойство наследуется.

Значения:
auto	Браузер может использовать любой алгоритм для определения позиции подчеркивания, тем не менее линия должна быть размещена на или под базовой линией текста. Значение по умолчанию.
under	Подчеркивание расположено под текстовым содержимым элемента. В этом случае подчеркивание обычно не пересекает нижний выносной элемент. Это значение можно комбинировать с left или right , если конкретная сторона предпочтительна в вертикальных типографских режимах.
left	В вертикальных типографских режимах подчеркивание выравнивается по левому краю текста. Тем не менее, это значение интерпретируется как under .
right	В вертикальных типографских режимах подчеркивание выравнивается по правому краю текста. Тем не менее, это значение интерпретируется как under .
inherit
initial

Синтаксис

Text-underline-position: auto; text-underline-position: under; text-underline-position: left; text-underline-position: right; text-underline-position: under left; text-underline-position: under right; text-underline-position: inherit; text-underline-position: initial; Рис. 2. Подчеркивание текста с обеих сторон в вертикальных типографских режимах с помощью значений left и right

2. Тень текста: свойство text-shadow

Поддержка браузерами

IE: 10
Edge: 12
Firefox: 3.5
Chrome: 4
Safari: 4
Opera: 10
iOS Safari: 3.2
UC Browser for Android: 11.8
Chrome for Android: 73
Samsung Internet: 4

Свойство text-shadow используется для добавления тени к тексту. Тень текста — интересный инструмент, который позволяет создавать удивительные эффекты. Тени могут быть однослойными или многослойными, размытыми, цветными или полупрозрачными. Задавая тень для элемента, можно указывать только одно значение длины и цвет, таким образом создавая цветную копию отдельного символа или слова. Также, с помощью тени можно сделать текст более читаемым, если контраст между цветом текста и фоном невелик.

Каждая тень применяется как к самому тексту, так и к элементам его оформления (свойство text-decoration). Одновременно можно задавать несколько теней, указывая их через запятую. Тени накладываются друг на друга, но не перекрывают сам текст. Первая тень всегда расположена сверху над остальными тенями. Свойство наследуется.

Каждая тень определяется двумя или тремя значениями длины и необязательным цветом. Допустимы длины, равные 0 .

Свойство не наследуется.

Рис. 3. Синтаксис свойства text-shadow

text-shadow
Значения:
x-offset	Задает горизонтальное смещение тени. Положительное значение рисует тень, смещенную вправо от текста, отрицательная длина — влево.
y-offset	Задает вертикальное смещение тени. Положительное значение смещает тень вниз, отрицательное — вверх.
blur	Задает радиус размытия. Отрицательные значения не допускаются. Если значение размытия равно нулю, то край тени четкий. В противном случае, чем больше значение, тем больше размыт край тени.
цвет	Задает тени. Если цвет отсутствует, используемый цвет берется из свойства color .
none	Значение по умолчанию, означает отсутствие тени текста. Убирает тень элемента из группы элементов с заданным свойством.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

В отличие от box-shadow , текстовые тени не обрезаются и могут отображаться, если текст частично прозрачен. Как и box-shadow , текстовые тени не влияют на макет и не вызывают прокрутку или увеличение размера прокручиваемой области.

Синтаксис

Text-shadow: 2px 2px 4px pink; text-shadow: #fc0 1px 0 10px; text-shadow: 5px 5px #4D4644; text-shadow: blue 2px 5px; text-shadow: 5px 10px; text-shadow: inherit; text-shadow: initial;

2.1. Примеры тени текста

Плакатная тень

Тень текста

Text-shadow-1 { background: #77F7DE; color: white; text-shadow: -2px -2px 0 #4D4644, 2px -2px 0 #4D4644, -2px 2px 0 #4D4644, 2px 2px 0 #4D4644, 4px 4px 0 white, 5px 5px 0 white, 6px 6px 0 white; letter-spacing: 0.1em; }

3D тень

Тень текста

Text-shadow-2 { background: linear-gradient(-45deg, #FEE864, #F5965E); color: #f4f4f4; text-shadow: -1px -1px white, 1px 1px gray, 2px 2px #7a7a7a, 3px 3px #757575, 4px 4px #707070, 5px 5px #6b6b6b, 6px 6px #666666, 7px 7px #616161, 8px 8px #5c5c5c, 9px 9px #575757, 10px 10px #525252, 11px 11px #4d4d4d, 18px 18px 30px rgba(0, 0, 0, .4), 18px 18px 10px rgba(0, 0, 0, .4); }

Тень-текст

Тень текста

Text-shadow-3 { background: #FFE6DB; color: #FFE6DB; letter-spacing: .1em; text-shadow: 3px 0 rgba(250, 111, 142, .5), 6px 0 rgba(250, 111, 142, .4), 9px 0 rgba(250, 111, 142, .3), 12px 0 rgba(250, 111, 142, .2), 15px 0 rgba(250, 111, 142, .1); }

В этом уроке мы покажем шесть удивительных текстовых эффектов CSS3: эффект трехмерности, созданный с помощью тени текста, эффекты с градиентами и масками изображений, эффекты с переходами и свойством background-clip и другие эффекты. Без сомнения все они могут пригодиться, так как с помощью CSS3 можно добиться по-настоящему впечатляющих результатов. Часть вышеописанных эффектов работает в большинстве браузеров, поддерживающих CSS3, но несколько примеров работает только на движке Webkit. Следовательно, что бы получить максимальное впечатления, посмотрите демонстрацию в браузерах, поддерживающих движок Webkit, таких как Chrome, Safari и Opera.

Для начала давайте добавим общие стили для всех дальнейших экспериментов:

#main div { font-size : 120px ; font-weight:bold ; position : relative ; }

Здесь мы задали размер шрифта и его толщину. Теперь давайте начнем.

Эффект №1 - Трехмерный текст с помощью тени текста CSS3

Сложно представить все возможности, которые предоставляет традиционное свойство тени текста. В CSS3 свойство тени текста применяет тень к тексту. Можно задать горизонтальный размер тени, вертикальный размер тени, расстояние размытие и цвет тени:

Text-shadow : h-shadow v-shadow blur color ; /* пример: */ text-shadow : 2px 2px 5px #FF7777 ;

Чтобы добавить больше глубины тексту, нужно просто добавить несколько теней, например:

#eff1 { color : #00b506 ; text-shadow : 0px 0px 0 rgb (-28 ,153 ,-22 ) , 1px 1px 0 rgb (-55 ,126 ,-49 ) , 2px 2px 0 rgb (-83 ,98 ,-77 ) , 3px 3px 0 rgb (-111 ,70 ,-105 ) , 4px 4px 0 rgb (-139 ,42 ,-133 ) , 5px 5px 0 rgb (-166 ,15 ,-160 ) , 6px 6px 0 rgb (-194 ,-13 ,-188 ) , 7px 7px 0 rgb (-222 ,-41 ,-216 ) , 8px 8px 7px rgba(0 ,0 ,0 ,0 .75 ) , 8px 8px 1px rgba(0 ,0 ,0 ,0 .5 ) , 0px 0px 7px rgba(0 ,0 ,0 ,.2 ) ; }

Эффект №2 - градиент текста CSS3 c помощью -webkit-mask-image для движка Webkit

Этот эффект использует маски CSS3, свойство -webkit-mask-image. Пока что это свойство не поддерживается другими браузерами, но надеемся, оно будет поддерживаться в будущем:

#eff2 { color : #00b506 ; text-shadow : 1px 1px 1px #000000 ; -webkit-mask-image: -webkit-gradient(linear, left top , left bottom , from(rgba(0 ,0 ,0 ,1 ) ) , color-stop(50 % , rgba(0 ,0 ,0 ,.3 ) ) , to(rgba(0 ,0 ,0 ,1 ) ) ) ; }

Эффект №3 - радужный фон текста CSS3 с помощью -webkit-text-fill-color для движка Webkit

Чтобы добиться такого эффекта, используем свойство background-clip с нестандартным значением text, которое поддерживается только браузерами на движке Webkit:

#eff3 { background-image : -webkit-linear-gradient(left , #ff0000 , #ff7f00 , #ffff00 , #00ff00 , #00ffff , #0000ff , #8b00ff ) ; background-image : -moz-linear-gradient(left , #ff0000 , #ff7f00 , #ffff00 , #00ff00 , #00ffff , #0000ff , #8b00ff ) ; background-image : -ms-linear-gradient(left , #ff0000 , #ff7f00 , #ffff00 , #00ff00 , #00ffff , #0000ff , #8b00ff ) ; background-image : -o-linear-gradient(left , #ff0000 , #ff7f00 , #ffff00 , #00ff00 , #00ffff , #0000ff , #8b00ff ) ; background-image : linear-gradient(to right , #ff0000 , #ff7f00 , #ffff00 , #00ff00 , #00ffff , #0000ff , #8b00ff ) ; -webkit-text-fill-color : transparent ; -webkit-background-clip : text ; }

Эффект №4 - Сияющий текст с помощью переходов CSS3 и -webkit-background-clip для движка Webkit

В браузере на движке Webkit полоса света временами пробегает по тексту. Для достижения этого эффекта использовано то же свойство background-clip с нестандартным значением text:

#eff4 { background : #00b506 -webkit-gradient(linear, left top , right top , from(#00b506 ) , to(#00b506 ) , color-stop(0 .5 , #ffffff ) ) 0 0 no-repeat ; color : rgba(255 , 255 , 255 , 0 .1 ) ; font-size : 120px ; font-weight : bold ; position : relative ; -webkit-animation: shine 2s infinite; -webkit-background-clip : text ; -webkit-background-size : 300px ; } @-webkit-keyframes shine { 0 % { background-position : top left ; } 100 % { background-position : top right ; } }

Эффект №5 - обведенный текст CSS3 с помощью свойства text-stroke для движка Webkit

Можно легко добавить интересную плоскую обводку текста с помощью свойства -webkit-text-stroke:

#eff5 { color : #00b506 ; -webkit-text-stroke: 1px #000 ; }

Эффект №6 - трехмерный поворот текста с помощью свойства трансформации поворота вокруг оси Y CSS3

Можно повернуть текст с помощью переходов и трансформации поворота вокруг оси Y:

#eff6 { color : #00b506 ; } #eff6 p { color : #8A2BE2 ; cursor : pointer ; display : inline-block ; -webkit-transition: .5s ; -moz-transition: .5s ; -o-transition: .5s ; transition: .5s ; } #eff6 p:hover { -webkit-transform: rotateY(-180deg) ; -moz-transform: rotateY(-180deg) ; -0 -transform: rotateY(-180deg) ; transform: rotateY(-180deg) ; filter: progid:DXImageTransform .Microsoft .BasicImage (rotation=2 ) }

Заключение

В этом уроке мы рассмотрели способы создания различных текстовых эффектов с помощью свойств CSS3. Надеемся, Вам понравился этот урок и он Вам пригодится. Не все свойства, который были использованы для этого урока, работают во всех браузерах, но все они используются только для создания красивых эффектов, не влияющих на функциональность, так что их можно применять, например, с помощью правила @supports, только для поддерживающих эти свойства браузеров.

Перевод — Дежурка

Каждый веб-дизайнер хочет создавать только стоящие веб сайты, которые оценят все пользователи интернета.

Конечно, невозможно удовлетворить всем вкусам. Еще, как веб-дизайнер вы должны просто попытаться сделать все возможное, чтобы создать сайт, который понравится посетителям! К счастью, уже доступны самые мощные инструменты и ресурсы, чтобы создавать потрясающие веб-сайты и мы собрали для вас некоторые полезные фрагменты CSS, которые помогут сделать интересную фишку в ваших проектах!

Это 15 удивительных текстовых эффектов с помощью CSS3 – все подобраны и мы думаем, что они помогут добавить блеск оригинальности в ваших проектах. Некоторые из них полезны для определенных целей, а другие подходят для многократного использования.

Если вы любите цветы и вы хотите замечательный и полный цвета текста эффект, то это предложение идеальное решение для вас! Это очень подходит для отображения имени креативного агентства или для портфеля проектов. Конечно, он может быть использован для любого другого типа проектов – если вы хотите выделиться, то этот текстовый эффект-отличный выбор!

Волновой эффект действительно потрясающий! Это может использоваться, чтобы добавить немного таинственности. Было бы интересно использовать его для того, чтобы подчеркнуть скидку или специальное предложение, которое работает только в течение очень короткого периода времени.Что вы думаете?

Это очень интересный текстовый эффект; я думаю, что из-за цветовой схемы используется он может быть применен, чтобы подчеркнуть винтажный дизайн. Это умное использование теней текста и он имеет потенциал, чтобы привлечь внимание пользователей. Не забывайте, что Винтаж никогда не умрет!

Следующий текстовый эффект работает как магнит для зрителей. Вы можете использовать это, чтобы улучшить форму, чтобы подчеркнуть новый продукт, предлагаемый для продажи или просто для привлечения глазах зрителей. Это заманчивые и мудрый веб-дизайнер будет использовать его на его/ее преимущество!

Я думаю, что тенденция среди веб-дизайнеров является создание более динамичной онлайн присутствий. Прохладный скользящий эффекты и переходы страниц чаще всего используются возможности добавления больший динамизм сайт. Все же, если вы хотите еще больше динамизма, этот удивительный текст с помощью CSS3 эффект может быть хорошим вариантом. Я думаю, что это простое, но эффективное решение!

Самые требовательные клиенты-это дети, но это не должно заставить вас отказаться создании сайтов для них. Если вы работаете на малыша, связанных с проектом или смешной один, то вы можете использовать этот эффект для текста! В Jokerman шрифт имеет свою особую красоту, не так ли?

CSS3 и 3D-моделирования имеют общего больше, чем только цифра “3”! С помощью CSS3 позволяет создавать красивые 3D эффекты как один из этого фрагмента.Этот эффект подойдет для большой пул проектов и я думаю, что вы должны дать ему попробовать!

Иногда, играя с огнем может быть весело! Не волнуйся, я не пироман, я просто поражена этим прикольный текстовый эффект! Я не помню, чтобы видел этот текстовый эффект в макете других сайтов, так вот еще один повод использовать его и создать оригинальный сайт!

В ситуации, которую Вы цените больше дискретной текстовый эффект, этот “туманный эффект” - это моя рекомендация. Это правда, что он может негативно повлиять на юзабилити вашего сайта. С другой стороны, если Вы не рискуете, Вы не выиграете! Конечно, это могут быть переделаны, чтобы соответствовать Вашим требованиям!

Хотя этот текстовый эффект является довольно сложной, она реализуется с помощью CSS, нет никакого JavaScript. Лично я считаю, что он может быть использован для музыкальных сайтах или выделить определенный элемент с веб-сайта.

Это очень дискретный эффект, но я думаю, что он может добавить “Вау” эффект в макеты. Металлические выглядят чудесно создан и появляющиеся/исчезающие моменты акцентировать.

Я может быть субъективна, потому что я большой фанат "Звездных Войн" фильм, но этот текстовый эффект действительно классный. Это делает ваши проекты более интересные и, несомненно, поклонники этого фильма влюбилась в ваш сайт из-за этого эффекта.

Этот текстовый эффект существенно способствует повышению взаимодействия пользователь-сайт.Это показывает еще раз, что CSS3 имеет большой потенциал и талантливый веб-дизайнер сможет создать красивые анимации с помощью всего нескольких строк кода.

Это последний пункт из этого списка, но Вы не должны игнорировать его. Гораздо больше, Вишенка на торте, дело в том, что нет более 10 CSS3 удивительные текстовые эффекты. Я думаю, что вы должны тщательно проверять их все и изучить, как эти привлечении эффекты были реализованы.

Те, которые все еще думают, что атрибуты CSS не достаточно, чтобы создать интересные текстовые эффекты должны дать прислушаться к этому! Она сочетает в себе несколько эффектов - анимация, 3D-перспективы, теней и текстовые настройки. Я думаю, что тени и обводки сочетание-это старомодно, но этот проект создан с целью показать, чего можно достичь с помощью “чистого CSS”.

Типографика является самой любимой игрушкой веб дизайнеров. CSS имеет в своем составе один очень интересный инструмент - text-shadow (тень текста), который на первый взгляд кажется достаточно простым, но с его помощью можно создать запоминающиеся эффекты, если подключить изобретательность и воображение.

Основы использования теней

Свойство text-shadow очень просто использовать. Оно поддерживается всеми современными браузерами и даже без использования префиксов. Но поддержка в IE (даже в IE9) отсутствует. Можно использовать инструменты, например, Modernizr , которые помогут вытянуть эффекты CSS3 даже в старых версиях IE.

Синтаксис

Для создания тени текста используется синтаксис свойства text-shadow , который приводится ниже. Нужно определить четыре параметра: первые два задают положение тени, третий устанавливает уровень размытия, а четвертый определяет цвет тени.

Text-shadow: смещение_по_горизонтали смещение_по_ вертикали размытие цвет;

Ниже приводится пример тени текста, которая смещена на два пикселя вниз и на четыре пикселя вправо, размыта на три пикселя и имеет черный цвет с уровнем непрозрачности 30%.

Text-shadow: 2px 4px 3px rgba(0,0,0,0.3);

Результат использования данного свойства будет выглядеть следующим образом:

Почему используется rgba?

Вам не обязательно использовать rgba для задания цвета тени при определении свойства. Однако, rgba добавляет еще одну размерность при определении тени - уровень прозрачности.

Данный метод существенно проще, чем другие способы определения цвета. Вам не надо акцентировать внимание на определении оттенка цвета тени, который может быть лишь немного темнее или светлее цвета фона. С rgba вы можете просто использовать белый или черный цвета и увеличить их прозрачность, чтобы добиться нужного оттенка фона при смешении красок.

С помощью свойства text-shadow можно создавать различные эффекты для текста, не ограничиваясь простыми падающими тенями. Например, здесь приводится код для формирования иллюзии вдавленного текста.

Сначала нужно установить цвет текста немного темнее, чем цвет фона. А затем надо использовать свойство text-shadow с белым цветом и увеличенной прозрачностью.

Цвет фона #222, а цвет текста имеет уровень непрозрачности 60%. Белая тень позиционируется немного вниз и вправо с уровнем непрозрачности 10%.

Body { background: #222; } #text h1 { color: rgba(0,0,0,0.6); text-shadow: 2px 2px 3px rgba(255,255,255,0.1); }

Совсем необязательно размывать тень. Четкая тень может отлично сочетаться с дизайном сайта.

Text-shadow: 6px 6px 0px rgba(0,0,0,0.2);

Настоящее веселье начинается, когда вы отринете прочь ограничение наличия только одной тени. Используя запятую для разделения определений вы можете использовать столько теней, сколько нужно!

Text-shadow: shadow1, shadow2, shadow3;

Вот пример использования двух теней. Первая имеет тот же цвет, что и фон.

Text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);

Смещение вниз на большое расстояние

Как только вы освоите использование нескольких теней, результат будет все более и более выразительным. Очень просто создать 3D эффект для текста.

В примере используется четыре тени, все смещены вниз на разные дистанции и размыты.

Text-shadow: 0px 3px 0px #b2a98f, 0px 14px 10px rgba(0,0,0,0.15), 0px 24px 2px rgba(0,0,0,0.1), 0px 34px 30px rgba(0,0,0,0.1);

Смещение вниз на небольшое расстояние и сильное размытие

Вот другое воплощение той же идеи. Три тени смещены на меньшее расстояние и сильнее размыты.

Text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);

3D текст от Mark Dotto

Эффект используется на сайте MarkDotto.com . В нем используется 12 различных теней для создания отличного эффекта 3D.

Text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);

Вдавленный текст от Gordon Hall

Notice in the example above I called my technique the “quick and dirty” letterpress effect. That’s because there’s a much more involved way to create some seriously inset text that’s much more believable.

Gordon uses some serious CSS voodoo to pull off not only an outer shadow but a genuine inner shadow as well. Check out his blog post for a full explanation of the technique.

Background-color: #666666; -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; color: transparent; text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;

Свечение

Text-shadow: 0px 0px 6px rgba(255,255,255,0.7);

Text-shadow: -10px 10px 0px #00e6e6, -20px 20px 0px #01cccc, -30px 30px 0px #00bdbd;

Множественные источники света

Text-shadow: 0px 15px 5px rgba(0,0,0,0.1), 10px 20px 5px rgba(0,0,0,0.05), -10px 20px 5px rgba(0,0,0,0.05);

Color: rgba(0,0,0,0.6); text-shadow: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);

Заключение

Как и большинство эффектов CSS, тени очень легко реализовать. Но сочетание простых действий могут в результате привести к поразительным эффектам.

Раньше создать интересные текстовые эффекты, например, сложную тень (самая банальная тень не в счет) можно было только силами графического редактора, вроде Adobe Photoshop, и то, как понимаете на выходе можно было получить только картинку в формате.gif, .png или.jpg. Но с развитием стандартов ситуация меняется. Уже сейчас CSS3 открывает головокружительные возможности оформления для веб-мастера, нужно только знать как использовать эту мощь. Давайте рассмотрим некоторые классные текстовые эффекты которые можно получить используя лишь один простое свойство текста в CSS3 - text-shadow. Оригинал статьи можно найти на сайте на сайте LINE25 .

Перед тем как перейти непосредственно к эффектам, немного теории. Свойство text-shadow в CSS3 позволяет задавать:

• смещение тени по отношению к тексту по осям X и Y - X-offset и Y-offset;
• уровень размытия тени (хотя может быть в данном случае лучше подходит термин — растушевка) - blur;
• цвет тени - color:

Но это еще не все. Вы может так же задавать несколько значений для каждого параметра. В этом и кроется вся мощь! Давайте посмотрим что с этим можно придумать.

Винтажный или ретро текст

text-shadow : 5px 5px 0px #eee , 7px 7px 0px #707070 ;

text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;

Эффект достаточно прост, но в тоже время эффектен. В его основе две тени, одна из них того же цвета, что и сам текст, другая тень обычно цвета фона.

Неоновый текст

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 ;

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 теней. Каждый уровень имеет собственное значение растушевки (8 значений) и цвет (2 значения).

Инсет (вдавленный текст)

text-shadow : 0px 2px 3px #666 ;

text-shadow: 0px 2px 3px #666;

Эффект вдавленного текста, достаточно просто реализуется за счет небольшого смещения тени по оси Y и легкой растушевки.

Анаглифический текст

text-shadow : 8px 8px 0 rgba (255 , 0 , 180 , 0.5 ) ;

text-shadow: 8px 8px 0 rgba(255,0,180,0.5);

Крутой эффект, где помимо всего прочего используются возможности RGBa (в том числе альфа-канал). Еще несколько лет назад было сложно представить что такое возможно без графического редактора, теперь вот — пожалуйста!

Горящий текст

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: 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 ;

text-shadow: 10px 10px 0 #ffd217, 20px 20px 0 #5ac7ff, 30px 30px 0 #ffd217, 40px 40px 0 #5ac7ff;

По сути является многоуровневой вариацией эффекта «Ретро текст». Все тени четкие, без растушевки.

Посмотреть как эти эффекты выглядят в живую, (а не только на скриншотах) можно на этой демо-странице . Эти эффекты — верхушка айсберга, количество возможных вариантов сложно представить. Ведь это всего лишь одно свойство текста — тень! Чем не демонстрация недюжинных возможностей CSS3? Вообще очень радует развитие веб стандартнов, главное чтобы за этим успевали браузеры и одинаково воспринимали указанные значения параметров CSS и HTML.

P.S. Если вы работаете в интернете то просто обязаны создать свое wordpress портфолио из бесплатных, функциональных и качественных шаблонов.