Text shadow css

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

 

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

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

Синтаксис

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

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

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


Использование тени для текста

 

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

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

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

 

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

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

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

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

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

 

Четкая тень


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

Четкая тень

Двойная тень

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

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

Двойная тень

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

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

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

3D эффект для текста

 

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


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

3D эффект для текста

 

3D текст от Mark Dotto

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

3D эффект для текста

 

Вдавленный текст от 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.

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

 

Свечение

Свечение текста

 

Супергерой

Супергерой

 

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


Свечение текста

 

Мягкое тиснение

Мягкое тиснение

 

Заключение

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

ruseller.com

Syntax

/* offset-x | offset-y | blur-radius | color */ text-shadow: 1px 1px 2px black;   /* color | offset-x | offset-y | blur-radius */ text-shadow: #fc0 1px 0 10px;   /* offset-x | offset-y | color */ text-shadow: 5px 5px #558abb;  /* color | offset-x | offset-y */ text-shadow: white 2px 5px;  /* offset-x | offset-y /* Use defaults for color and blur-radius */ text-shadow: 5px 10px;  /* Global values */ text-shadow: inherit; text-shadow: initial; text-shadow: unset; 

This property is specified as a comma-separated list of shadows.

Each shadow is specified as two or three <length>
values, followed optionally by a <color> value. The first two <length> values are the <offset-x> and <offset-y> values. The third, optional, <length> value is the <blur-radius>. The<color> value is the shadow’s color.

When more than one shadow is given, shadows are applied front-to-back, with the first-specified shadow on top.

This property applies to both ::first-line and ::first-letter pseudo-elements.

Values

<color>
Optional. The color of the shadow. It can be specified either before or after the offset values. If unspecified, the color’s value is left up to the user agent, so when consistency across browsers is desired you should define it explicitly.
<offset-x> <offset-y>
Required. These <length> values specify the shadow’s distance from the text. <offset-x> specifies the horizontal distance; a negative value places the shadow to the left of the text. <offset-y> specifies the vertical distance; a negative value places the shadow above the text. If both values are 0, the shadow is placed directly behind the text, although it may be partly visible due to the effect of <blur-radius>
.
<blur-radius>
Optional. This is a <length> value. The higher the value, the bigger the blur; the shadow becomes wider and lighter. If not specified, it defaults to 0.

Formal syntax

none | <shadow-t>#

where
<shadow-t> = [ <length>{2,3} && <color>? ]

where
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color>
m-color>

where
<rgb()> = rgb( <percentage>{3} | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )

where
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Examples

Simple shadow

Multiple shadows

Specifications

Specification Status Comment
CSS Transitions
The definition of ‘text-shadow’ in that specification.
Working Draft Specifies text-shadow as animatable.
CSS Text Decoration Module Level 3
The definition of ‘text-shadow’ in that specification.
Candidate Recommendation The CSS property text-shadow was improperly defined in CSS2 and dropped in CSS2 (Level 1). The CSS Text Module Level 3 spec refined the syntax. Later it was moved to CSS Text Decoration Module Level 3.

Initial value none
Applies to all elements. It also applies to ::first-letter and ::first-line.
Inherited yes
Media visual
Computed value a color plus three absolute lengths
Animation type a shadow list
Canonical order the unique non-ambiguous order defined by the formal grammar

Browser compatibility

Quantum CSS notes

  • Gecko has a bug whereby transitions will not work when transitioning from a text-shadow with a color specified to a text-shadow without a color specified  (bug 726550). This has been fixed in Firefox’s new parallel CSS engine (also known as Quantum CSS or Stylo, planned for release in Firefox 57).

developer.mozilla.org

совесть
Наташа, здравствуйте.
Просмотрел весь ваш блог.
Но кода баннера так и не нашел. Пожалуста создайте, а то у меня начинают спрашивать, где я все это набрался, а виновница торжества как бы не причем. Нужно наверное исправить досадную оплошность 🙂
NMitra
Отличная тема для статьи! Надо будет обдумать тонкости.
совесть
Понятно. Значит будем ждать.

Наташа, у меня на блоге в шапке уже стоит картинка http://myrussiammm.blogspot.com/
Можно ли поверх нее поставить еще одну картинку ?
Спасибо.

NMitra
Посмотрите здесь. Не получиться — спрашивайте
совесть
Пытался сделать как написано, но ни чего вообще не отобразилось.
Хотел поставить скруджа (с прозрачным фоном) справа от названия блога. но ни чего не вышло.
http://myrussiammm.blogspot.com/
NMitra
Пойдём другим путём.

Добавьте дополнительный гаджет: http://shpargalkablog.ru/2011/01/dobavit-blok-v-zagalovok-blogger.html.

А вместо кода баннера — изо Скруджа.

совесть
вроде картинка появилась. только она *столкнула* название блога вниз.
А как скруджа переместить вправо и вернуть весь текст обратно ?
совесть
http://shpargalkablog.ru/2011/01/dobavit-blok-v-zagalovok-blogger.html.
гаджет не находится поисковиком.
совесть
Кое как воткнул картинку в шапку. Название вниз сьехало. Ну да ничего и так не плохо.
Спасибо Наташенька за помощь.
NMitra
Да, вижу, но не пойму в чём дело. Нужен код шаблона блога. Попробовала на тестовом блоге. Название не уползает вниз, а ложиться поверх картинки.
совесть
Да я просто код картинки вставил в очередь к баннерам. И поменял гаджеты местами — название с картинкой. вот название и ушло вниз.
Наташа, а куда вам можно отправить код шаблона блога ?
NMitra
На почту. См. "Контакты" из меню.
Анонимный
как изменить стиль главного заголовка в блоге? спасибо.
NMitra
.Header h1 {…..}
NMitra
Для страниц, кроме главной

.Header h1 a {…..}

Анонимный
Слоенный текст , понравился как его сделать .
p {color: #FE6602;
font-family: 'Aclonica',serif;
font-size: 7em;
margin: 20px auto;
text-shadow: 0 1px 0 #000000, 0 2px 0 #888888, 0 3px 0 #777777, 0 4px 0 #FFFFFF, 0 5px 0 #555555, 0 6px 0 #444444, 0 7px 0 #333333, 0 8px 7px #001135;
}
Вот это вставляю не чего нет . И еще бы Белый с черной тенью.
NMitra
Куда вставляете-то? Мне не понятно какой платформой вы пользуетесь, что ждёте от текста — будет ли это заголовок статьи или название блога. В целом посмотрите тут http://shpargalkablog.ru/2011/08/kak-ispolzovat-css.html
Николай Коваль
Спасибо автору за статью!
На своем портале http://www.kovnik.com/ применил текстовый
объемный логотип по вашей технологии. Все нормально отображается в многих браузерах, кроме IE. А жаль…
(ОС Win8, IE 10).
NMitra
На сайте IE уже есть соответствующие инструкции http://msdn.microsoft.com/en-us/library/windows/apps/hh441185.aspx , предполагаю до реализации осталось не так много времени.
Артём Викторович
Здравствуйте, подскажите как сделать неоновую подсветку для названия и описания блога. Блог находится на Блогспот.
NMitra
Здравствуйте, добавьте CSS http://shpargalkablog.ru/2011/12/kak-izmenit-shablon-blogger.html

h1, h3 {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;}

Анонимный
Очень хорошая статья! Спасибо! 🙂
Анонимный
Ну наконец то нашёл, всё нравится, отлично, на примере генератора разобрался во всём. Как говорил герой известного фильма: — Достаточно одной таблэтки )))))))! Спасибо большое за помощь!
NMitra
Угу, генератор здесь не повредит
Marina Voronova
Наталья я просто тащусь от вас! спасибо вам большое! ;))
NMitra
Я тоже )) Спасибо, что напомнили 🙂
Анонимный
По поводу зеркального отражение лучше использовать урок из http://htmlbook.ru/blog/matritsa-preobrazovanii
{
-moz-transform: matrix(1, 0, 0, -1, 0, 0);
-webkit-transform: matrix(1, 0, 0, -1, 0, 0);
-o-transform: matrix(1, 0, 0, -1, 0, 0);
-ms-transform: matrix(1, 0, 0, -1, 0, 0);
opacity: 0.3;
}
NMitra
Есть ещё более вкусный вариант background: -moz-element; https://developer.mozilla.org/en-US/docs/Web/CSS/element?redirectlocale=en-US&redirectslug=CSS%2Felement Но поддерживается только Мозилой.
Сергей
Здравствуйте NMitra!
Скажите пожалуйста,как сделать,что бы вместо цвета надписи (color: #FE6602),вставить картинку-фон, например картинку-фон кирпичной стены?
span style="color: #FE6602; font-family: 'Aclonica',serif;font-size: 5em; margin: 20px auto;text-shadow: 0 1px #000000, 0 2px #888888, 0 3px #777777, 0 4px #FFFFFF, 0 5px 0 #555555, 0 6px 0 #444444, 0 7px 0 #333333, 0 8px 7px #001135;" Слоёный
NMitra
Здравствуйте, Сергей!
Добавьте в стили
background: url(http://….jpg);
Подробнее http://shpargalkablog.ru/2011/08/fon-dlya-saita-html.html (переключайте вкладки, чтобы увидеть результат)
Сергей
да, но это получается надпись на желаемом фоне(картинке), а мне хотелось бы, что бы желаемым фоном(картинкой),залились сами буквы надписи, а не цветом,…то есть, вместо оранжевого цвета букв слова Слоёный, была картинка
<span style="color: #FE6602; font-family:'Aclonica',serif; font-size: 7em; margin: 20px auto; text-shadow: 0 1px #000000, 0 2px #888888, 0 3px #777777, 0 4px #FFFFFF, 0 5px 0 #555555, 0 6px 0 #444444, 0 7px 0 #333333, 0 8px 7px #001135;"> Слоёный </span>
возможно ли такое с кодом HTML ???
NMitra
Есть -webkit-background-clip: text; ( http://shpargalkablog.ru/2013/11/gradient-text.html ), есть SVG (см. http://codepen.io/yoksel/pen/fsdbu и http://tympanus.net/codrops/2015/02/16/create-animated-text-fills/ )
Сергей
Это не работает в HTML, даже не отображается в HTML редакторах….нужно для оформления дневника на LiRu , http://www.liveinternet.ru/users/sergg62/
NMitra
К сожалению, пока только так или логотип нарисуйте в Фотошопе
Ремонт Компьютеров
Херня какая то.Куда че вставлять?
NMitra
http://shpargalkablog.ru/2011/08/kak-ispolzovat-css.html
http://shpargalkablog.ru/p/comments-blog.html (см. про админку)

shpargalkablog.ru

  • Gradient
  • Box Shadow
  • Text Shadow
  • Color
  • Font
  • Table
  • Column
  • Border
  • Border Radius
  • Transform
  • Background

Pick a predefined style from the gallery or generate a text shadow with your preferences. Set up the desired attributes to get the CSS code.

Shift the shadow right/down, set the blur and opacity and pick a color from the palette to get your CSS. Use the online editor to adjust your style manually. Follow the evolution of your shadow in the live preview where you can set a custom text and background color.

Just like the box shadow generator, this tool also allows you to add multiple shadows to your design with the Add new button. Create amazing projections define an unlimited list of dark areas or shapes produced by a body coming between rays of light and a surface. Check out the effect gallery for inspiration and to see how they’re built. Click one of them to populate the editor and to adjust their design. Picking an item from the gallery will erase your current work progress without any warning.

css text-shadow generator

Please note that the last five items in the gallery (Blurry, Emboss, Press, Carve, Ghost) can’t be adjusted once the’re loaded to preview because they use alpha channel colors and other attributes not supported by this website. For example the «Ghost» design has a completely transparent text color and all the visible and readable part is composed of shadows. Another item, called «Carved» is also transparent, and is using the background-clip: text which shows the background only where the text is.

Pro Developer`s Tip: Migrate your web app development/designing environment into the cloud with high performance citrix vdi from CloudDesktopOnline and experience the easy remote access to your essential web development tools from anywhere on any device(PC/Mac/android/iOS). Learn more about MS Azure and managed azure services by visiting one of the leading cloud hosting solutions providers – Apps4Rent.

html-css-js.com

Задача

Сделать тень для текста средствами CSS, без использования картинок. Чего мы этим добьемся?

  • гибкость — без использования картинок, текст легко менять
  • скорость — меньше картинок — меньше вес страницы, меньше обращений к серверу
  • SEO — текст лучше картинок оптимизируется, и надежней, чем использование техники замены текста картинкой

Текстовые тени для нормальных браузеров

Под нормальные браузеры попали все современные браузеры, которые шагают более-менее в ногу с рекомендациями W3C. В данном случае, эти браузеры понимают CSS3 свойство text-shadow, которое было рекомендовано еще в далеком 2003 году.

Итак, перечень браузеров, которые поддерживают свойство text-shadow:

  • Safari 3.1 (Mac/Win) — поддерживает, не поддерживаются множественные тени
  • Safari 4 (Mac/Win) — поддерживает полностью
  • Opera 9.5+ (Mac/Win/Lin) — поддерживает полностью
  • Firefox 3.1/3.5 (Mac/Win/Lin) — поддерживает полностью
  • Google Chrome 2 (Win) — поддерживает полностью
  • Shiira (Mac) — поддерживает, не поддерживаются множественные тени
  • Konqueror (Lin/Mac/Win) — поддерживает полностью
  • iCab (Mac) — поддерживает, не поддерживаются множественные тени
  • Safari on iPhone — поддерживает, не поддерживаются множественные тени
  • Nokia Symbian-Smartphones (Series 60) — поддерживает
  • Opera Mini 4.1 — поддерживает, не поддерживает размытость тени

Для этих браузеров, чтобы сделать тень тексту достаточно одной строки в CSS:

Получим вот такой модный заголовок:

Подробный синтаксис смотри в описании CSS свойства text-shadow.

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

Размытый текст

Дублирование текста

Множественные тени позволяют добиться еще нескольких эффектов:

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

Выпуклый текст

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

Теперь о грустном — что делать с горячо всеми "любимым" IE?

Текстовые тени в IE

Хотя IE вплоть до 8-й версии не понимает text-shadow, у него хватает своих "примочек". В частности для создания теней есть фильтр dropShadow (подробное описание фильтра dropShadow). Чтобы тени появились, у элемента должен быть установлен layout. Устанавить можно несколькими способами:

  • задав элементу свойства display: block + высоту(height) или ширину (width))
  • задав элементу position: absolute
  • задав float: left/right
  • задав zoom: 1

Казалось, что можно кричать «Ура!!!» и радоваться жизни, но посмотри, как этот фильтр в реальности работает:

Для тех кто не понял, по пуктам недостаки этого фильтра:

  • тень выглядит ужасно: угловатая, нет плавного, с полупрозрачностью перехода в фон
  • искажается начертание шрифта
  • тень практически не поддается регулированию (управлять можно только положением тени) — это можно частично обойти применив фильтр shadow вместо dropShadow, но критичные первые два недостатка остаются
  • обязательное наличие layout несколько ограничивает разработчика

Такой результат не приемлем в реальных проектах. Непонятно кто и как принял такую работу у разработчиков.

Kilian Valkhof предложил использовать эмуляцию тени:

  1. не применять фильтр непосредственно к тексту
  2. использовать вместо dropShadow и shadow комбинацию фильров glow и blur

Это позволит избежать искажения текста и сделать тень более гибкой.

Но даже с таким подходом, все равно остается ряд недостатков:

  • несемантический код — лишний элемент, да еще и с дублированием текста скажется не лучшим образом на логичной структурности содержимого, СЕО оптимизации. Эту проблему можено решить с помощью javascript, который будет вставлять для IE дополнительный элемент при загрузке страницы
  • не соотвествие отображению в других браузерах (которые понимают text-shadow) — фильтры позволяют проэмулировать тень, с минимальными настройками. Схожести тени с другими браузерами далеко не всегда получиться добиться
  • меньшая гибкость — фильтры не дадут всех возможностей text-shadow, например не получится реализовать множественные тени

Для создания теней для IE можно воспользоваться javascript (не в первый раз javascript спасает)

Тени для текста с помощью javascript

Из скриптов, что протестировал, для себя остановился на плагине для jquery "Drop Shadow". Его достоинства:

  • эмулирует тени с помощью вставки множества контенйнеров, т.е. без использования фильтров для IE. Это дает возможность сделать максимально схожими тени в IE с другими браузерами + нет нужды беспокоится о layout для IE
  • создает тени не только для IE, что иногда может быть полезно
  • малый вес скрипта — 4Kb (если удалить комментарии из кода), а если применить сжатие, еще меньше будет. В писаниии скрипта есть требовани — наличие скрипта jquery.dimensions.js, но я так и не понял зачем он. Тени создаются, удаляются, определеяются id и без него.
  • прост и понятен в использовании
  • можно с некоторым успехом проэмулировать множественные тени

Недостатки:

  • нельзя инициализировать скрипт по id элемента
  • если элементу задан фон, тень будет создана не для текста, а для элемента в целом
  • обязательное подключение библиотеки jquery (а это более 50Kb). Но популярность jquery практически ниверлирует этот недостаток
  • по опсианию скрипта так же требуется подключение jquery.dimensions.js (еще 2Kb). Но не понял зачем эта библиотека, вроде и без нее все нормально работает

Применение плагина Drop Shadow

Синтаксис:

Опции:

Параметры left и top — координаты начала тени относительно верхнего левого угла надписи (или объекта). Положительные значения сдвигаеют тень вправо и вниз, отрицательные — влево и вверх.

Blur определяет размер, дисперсию тени. Нормльная тень будет при значениях 1 или 2. При больших значения тень будет размытая (не желетльно использовать такие значения, т.к. влияет на скорость работы скрипта.

Opacity задает степень прозрачности. В основном изменять значение по умочанию стоит когда хочется добиться необычного отображения тени.

Color — имя или шестнадцатиричный код цвета тени.

Swap &mdahs; инвесия цветов основного текста и тени. В описании написано, что этот парметр предназанчен для особых эффектов, вроде рельефной или гравированной надписи…но я не въехал как можно такого добиться, с помощью этого праметра.

Пример:

  • скачать jquery
  • скачать jquery.dropshadow.js
  • скачать jquery.dimensions.min.js

Выводы об использовании теней для текста в реальных проектах

Тени для текста уже сейчас применять можно, но следует помнить об IE, который не так хорошо с ними дружит. Для IE есть два вараинта решения:

  1. закрывать глаза на неполное соотвествие дизайна теней в IE
  2. добиваться требуемого результата с помощью javascript

На каком варианте остановиться команде разработчиков и заказчику — дело сугубо индивидуальное. Мое мнение — не следует из-за IE отказываться от прекрасных новых возможностей.

xiper.net

Как сделать тень для текста

  • Содержание:
  • 1. Синтаксис свойства text-shadow
  • 2. Примеры тени для текста
  • 3. Эффекты для тени при наведении
  • 4. Анимация тени

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

IE: 10.0
Edge: 12.0
Firefox: 3.5
Chrome: 4.0
Safari: 4.0
Opera: 10.1
iOS Safari: 3.2
Android Browser: 2.1
Chrome for Android: 55.0

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

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

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

Первая длина задаёт смещение по оси Х, вторая — смещение по оси Y. Если значения длин отрицательные, то тень смещается влево и вверх от текста.

Третье значение устанавливает радиус размытия, который определяется как расстояние от контура тени до края эффекта размытия.

text-shadow-syntax
Рис. 1. Синтаксис свойства text-shadow
text-shadow
Значения:
x-offset Обязательное значение. Смещение тени по горизонтали относительно текста. Может принимать как положительные, так и отрицательные значения.
y-offset Обязательное значение. Смещение тени по вертикали относительно текста. Может принимать как положительные, так и отрицательные значения.
blur Необязательное значение. Определяет радиус размытия тени. Чем больше радиус, тем сильнее размыта тень.
цвет Необязательное значение. По умолчанию принимает цвет текста. Для установления значения можно использовать следующие форматы записи цвета: #RRGGBB, rgb(red, green, blue), rgba(red, green, blue, alpha).
none Значение по умолчанию, означает отсутствие тени текста. Убирает тень элемента из группы элементов с заданным свойством.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

2. Примеры тени для текста

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

2.2. 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);  }

2.3. Тень-текст

Тень текста

.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);  }

2.4. Ретро-тень

Тень текста

.text-shadow-4 {   color: #FB631E;   letter-spacing: .1em;   text-shadow: 4px 4px white, 6px 6px #D7CC88;  }

2.5. Многослойная тень

Тень текста

.text-shadow-5 {   background: #f1f1f1;   color: #fcc105;   letter-spacing: .1em;   text-shadow: 4px 4px #ff981d, 7px 7px rgba(200, 120, 22, .2);  }

2.6. Прозрачная тень

Тень текста

.text-shadow-6 {   color: transparent;   text-shadow: 4px -4px rgba(157, 217, 227, .7), -2px -2px rgba(159, 141, 105, .7), 0 2px rgba(254, 216, 21, .7);  }

2.7. Тень-зебра

Тень текста

.text-shadow-7 {   background: #E02A91;   color: white;   text-shadow: 2px 2px black, 4px 4px white, 6px 6px black, 8px 8px white, 10px 10px black, 12px 12px white, 14px 14px black, 16px 16px white, 18px 18px black, 20px 20px white, 22px 22px black, 24px 24px white, 26px 26px black;  }

2.8. Неоновая тень

Тень текста

.text-shadow-8 {   background: black;   color: white;   text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white, 0 0 20px crimson, 0 0 35px crimson, 0 0 40px crimson, 0 0 50px crimson, 0 0 75px crimson;  }

2.9. Тень-обводка

Тень текста

.text-shadow-9 {   color: white;   text-shadow: 1px 1px #732372, 1px -1px #732372, -1px 1px #732372, -1px -1px #732372, 3px 3px 6px rgba(0,0,0,.5);  }

2.10. Стиль LETTERPRESS

Тень текста

.text-shadow-10 {   background: #F9C941;   color: #F9C941;    letter-spacing: 2px;   text-shadow: 1px 1px #F3E7CF, -1px -1px #56433D;  }

2.11. Стиль ТВИТТЕР

Тень текста

.text-shadow-11 {   color: #3CF;    text-shadow: -1px 0 1px white, 0 -1px 1px white, 0 1px 1px white, 1px 0 1px white, 0 0 8px white, 0 0 8px white, 0 0 8px white, 2px 2px 3px black;  }

2.12. Тень с обводкой

Тень текста

.text-shadow-12 {   color:#E34C38;   text-shadow: 1px 1px white, 2px 2px white, -1px -1px white, -2px -2px white, -1px 1px white, 1px -1px white, -2px 2px white, 2px -2px white, -3px -3px 4px rgba(0,0,0,.3), -3px 3px 4px rgba(0,0,0,.3), 3px 3px 4px rgba(0,0,0,.3), 3px -3px 4px rgba(0,0,0,.3);   }

3. Эффекты для тени при наведении

See the Pen ENjrvy by Elena (@html5book) on CodePen.

See the Pen yVYOdY by Elena (@html5book) on CodePen.

html5book.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector