Тень css шрифта: text-shadow | htmlbook.ru

Тень — Tailwind CSS

​Основы использования

​Добавление внешней тени

Используйте утилиты shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl или shadow-2xl для применения теней внешнего блока разного размера к элементу.

<div></div>
<div></div>
<div></div>
<div></div>

​Добавляем внутреннюю тень

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

shadow-inner

<div></div>

​Удаление тени

Используйте shadow-none, чтобы удалить существующую тень блока из элемента. Это чаще всего используется для удаления тени, которая была применена в меньшей контрольной точке.

shadow-none

<div></div>

---

​Применяя условно

​Наведение, фокус и другие состояния

Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover:shadow-lg, чтобы применять утилиту shadow-lg только при hover.

<div>
  <!-- ... -->
</div>

Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.

​Контрольные точки и медиа-запросы

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

md:shadow-lg, чтобы применить утилиту shadow-lg только на экранах среднего размера и выше.

<div>
  <!-- ... -->
</div>

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

---

​Использование пользовательских значений

​Настройка вашей темы

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

theme.boxShadow или theme.extend.boxShadow в вашем файле tailwind.config.js.

Если предоставляется тень DEFAULT, она будет использоваться для утилиты shadow без суффикса. Любые другие ключи будут использоваться как суффиксы, например, ключ '2' создаст соответствующую утилиту shadow-2.

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      boxShadow: {
        '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
      }
    }
  }
}

Дополнительные сведения о настройке темы по умолчанию смотрите в документации настройка темы.

​Произвольные значения

Если вам нужно использовать одноразовое box-shadow

value, которое не имеет смысла включать в вашу тему, используйте квадратные скобки, чтобы сгенерировать свойство на лету, используя любое произвольное значение.

<div>
  <!-- . .. -->
</div>

Узнайте больше о поддержке произвольных значений в документации по произвольным значениям.

Текст с тенью на CSS3

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

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

Применяемый типовой CSS-код:

text-shadow: <Смещение-X> <Смещение-Y> <Размытие>* <Цвет>*

Смещение-X: горизонтальное смещение тени по отношению к тексту. Отрицательное значение помещает тень слева от текста.

Смещение-Y: вертикальное смещение тени по отношению к тексту.

Отрицательное значение помещает тень на верхней части текста.

Размытие *: установка значения размытия. По умолчанию 0, если ничего не указано.

Цвет *: установка цвета тени. Значение может быть определено либо в начале либо в самом конце кода. По умолчанию, если ничего не указано, присваивается цвет интерфейса.

Примечание: значения, отмеченные звездочками (*) являются необязательными.

Установка на сайт

1. Для любого из представленных видов тени создаём класс (для каждого свой) в разделе head или стилях CSS, например, basic:

.basic
{
text-shadow: 5px 5px 0 #CCCCCC;
}

2. В разделе body помещаем код:

<h2>Привет, друзья!</h2>

Рассмотрим примеры и их CSS

1. Обычная тень:

text-shadow: 5px 5px 0 #CCCCCC;

2.

Размытая тень:

text-shadow: 5px 5px 7px #959595;

3. Тень и заданный цвет текста:

color: #ADD8E6;
text-shadow: 5px 5px 3px #414141;

4. Эффект легкого вдавливания:

Есть несколько способов для достижения такого эффекта. В данном случае определяем только смещение тени по вертикали, оставляя смещение по горизонтали X=0, а цвет тени задаём светлее, чем цвет шрифта текста.

  
.inset{
text-shadow: 0 -2px 1px #8a8a8a;
}

Вот более яркий пример, сделано на темном фоне:

background: #494949;
color: black;
text-shadow: 0 1px 2px #8a8a8a;

5. Несколько теней:

К одному элементу одновременно можно применить несколько теней, что сделает его более привлекательным. Чтобы добавить несколько текстовых теней элементу, просто отделите каждое определение тени текста запятой:

text-shadow: 5px 5px 5px red, -5px -5px 5px orange;

На примере чуть выше показано, как две тени (или более) могут быть одновременно добавлены в текстовый элемент, каждый со своими смещениями и цветами.

6. 3D-тень:

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

color: #12c911;
text-shadow: 1px 1px black, 2px 2px #149c14, 3px 3px #149c14, 4px 4px #149c14, 5px 5px #149c14, 6px 6px #149c14, 7px 7px #149c14, 8px 8px #149c14;

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

7. Светящиеся тени:

Вы можете создать «светящийся текст» с помощью нескольких текстовых теней. Вертикальное и горизонтальное смещение делаем нулевым, постепенно увеличиваем размытость очередной тени и выставляем цвет с каждым разом темнее. Таким образом создаём эффект «сияния»:

background: black;
text-shadow: 0 0 5px #FFFFA0, 0 0 10px #FFFF4D, 0 0 15px #FFFF41, 0 0 20px 
#FFFF2A, 0 0 25px #FFFF2B, 0 0 30px #FEFE00, 0 0 35px #F7F700;

Спасибо за внимание.

Посещайте мой сайт. Пока! L.M.

css text-shadow — Справочник по CodeProject

Свойство text-shadow добавляет тени к тексту. Он принимает разделенный запятыми список теней для применения к тексту и текстовых украшений элемента.

Пример

CSS

Код копирования

.красный текст-тень {
   тень текста: красный 0-2px;
} 

HTML

Копировать код

<р>
   Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
   Инвентарь veritatis и др. квази-архитекторы beatae vitae dicta sunt explicabo.  
 

CSS

Код копии

.белый-с-синей-тенью {
   text-shadow: 1px 1px 2px черный, 0 0 1em синий, 0 0 0.2em синий;
   белый цвет;
   шрифт: 1.5em Georgia, "Bitstream Charter", "URW Bookman L", "Century Schoolbook L", с засечками;
} 

HTML

Копировать код

<р>
   Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventorye
   veritatis и др. квазиархитекторы beatae vitae dicta sunt explicabo.
 

CSS

Код копии

.золото на золоте {
   тень текста: rgba(0,0,0,0.1) -1px 0, rgba(0,0,0,0.1) 0 -1px,
   rgba(255,255,255,0,1) 1px 0, rgba(255,255,255,0,1) 0 1px,
   rgba(0,0,0,0.1) -1px -1px, rgba(255,255,255,0,1) 1px 1px;
   цвет: золото;
   фон: золото;
} 

HTML

Копировать код

 
<р>
   Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventorye
   veritatis и др.  квазиархитекторы beatae vitae dicta sunt explicabo.
 

Синтаксис  

CSS

Код копии

/* смещение-x | смещение-y | радиус размытия | цвет */
тень текста: 1px 1px 2px черный;

/* цвет | смещение-х | смещение-y | радиус размытия */
тень текста: #CCC 1px 0 10px;

/* смещение-х | смещение-y | цвет */
тень текста: 5px 5px #558ABB;

/* цвет | смещение-х | смещение-y */
тень текста: белый 2px 5px;

/* смещение-х | смещение-у
/* Использовать значения по умолчанию для цвета и радиуса размытия */
тень текста: 5px 10px;

/* Глобальные значения */
тень текста: наследовать;
тень текста: начальная;
тень текста: не установлена; 

Значения

<цвет>

Дополнительно. Можно указать до или после значений смещения. Если цвет не указан, будет использоваться цвет, выбранный UA.

Примечание:  Если вы хотите обеспечить согласованность между браузерами, явно укажите цвет.

<смещение-x> <смещение-y>

Обязательно. Эти значения длины определяют смещение тени от текста. <смещение-x> указывает расстояние по горизонтали; отрицательное значение помещает тень слева от текста. указывает расстояние по вертикали; отрицательное значение помещает тень над текстом. Если оба значения равны 0 , то тень размещается за текстом (и может создавать эффект размытия, если установлено <радиус размытия> ).
Чтобы узнать, какие единицы измерения можно использовать, см. .

<радиус размытия>

Дополнительно. Это значение . Если не указано, по умолчанию используется 0 . Чем выше это значение, тем больше размытие; тень становится шире и светлее.

Формальный синтаксис

CSS

Код копии

нет | < a href="css/value_definition_syntax#hash_mark_(. 23)" title="Hash mark">#
где 
 = [ {2,3} && ? ]
где 
 =  |  |  | < hsla()> |  |  | текущий цвет | < устаревший-системный-цвет>
где 
 = rgb(  23)" title="Hash mark">#{3} )
 = rgba( #{3} ,  )
  = hsl( , ,  )
 = hsla( < оттенок>, ,  ,  )
 = 
 = ActiveBorder | ActiveCaption | AppWorkspace < a href="css/value_definition_syntax#single_bar" title="Одна полоса">| Фон | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Выделите | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | Информационный фон | Информационный текст | Меню | Текст меню | Полоса прокрутки | ThreeDDarkShadow |  ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDSShadow | Окно | WindowFrame | WindowText< /code>
где 
 =  | 
 = 
 =  
 

Описание  

Свойство text-shadow добавляет тени к тексту. Он принимает разделенный запятыми список теней для применения к тексту и текстовых украшений элемента.

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

Несколько теней применяются спереди назад, причем первая указанная тень находится сверху.

Это свойство применимо к обоим ::first-line и ::first-letter псевдоэлементы.

Исходное значение	нет
Применяется ко всем элементам	. Это также относится к ::first-letter и ::first-line .
Унаследованное	да
Медиа	визуальное
Расчетное значение	плюс цвет три абсолютные длины
Анимируемый	да, как теневой список
Канонический порядок	уникальный однозначный порядок, определяемый формальной грамматикой

Совместимость с браузером  

• Настольный
• Мобильный

Особенность	Хром	Firefox (Геккон)	Internet Explorer	Опера	Сафари (веб-кит)
Базовая опора	2,0	3,5 (1. 9.1) [1]	10 [3]	9,5 [2]	1,1 (100) [4]

Особенность	Андроид	Firefox Mobile (Геккон)	Интернет-телефон	Опера Мобайл	Мобильный сафари
Базовая опора	?	?	?	?	?

[1] Gecko теоретически поддерживает бесконечные текстовые тени (не пытайтесь). Gecko 2 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) и более поздние версии ограничивают радиус размытия на уровне 300 по соображениям производительности. Если значение не указано, Gecko использует значение свойства color элемента.

[2] Opera поддерживает максимум 6-9text-shadows по соображениям производительности. Радиус размытия ограничен 100px. Opera с 9. 5 по 10.1 придерживается старого обратного порядка прорисовки (CSS2, первая указанная тень находится внизу).

[3] Internet Explorer 5.5 поддерживает фильтр Microsoft Shadow и DropShadow .

[4] В Safari любые тени, для которых явно не указан цвет, являются прозрачными. Safari 1.1–3.2 поддерживает только одну тень текста (отображает первую тень списка, разделенного запятыми, и игнорирует остальные). Safari 4.0 (WebKit 528) и более поздние версии поддерживают несколько теней текста.
Konqueror поддерживает text-shadow, начиная с версии 3.4.

См. также  

• коробка-тень

Технические характеристики  

Спецификация	Статус	Комментарий
Переходы CSS Определение «тени текста» в этой спецификации.	Рабочий проект	Списки text-shadow как анимируемый.
CSS Text Decoration Level 3 Определение text-shadow в этой спецификации.	Кандидат в рекомендации	Свойство CSS text-shadow было неправильно определено в CSS2 и удалено в CSS2 (уровень 1). Спецификация CSS Text Module Level 3 улучшила и уточнила синтаксис. Позже он был перемещен в новый рабочий проект модуля оформления текста CSS уровня 3.

Лицензия

© Mozilla Contributors, 2016 г.
Под лицензией Creative Commons Attribution-ShareAlike License версии 2.5 или более поздней.
https://developer.mozilla.org/en-us/docs/web/css/text-shadow

CSS Свойство CSS CSS-текст NeedsMobileBrowserСовместимость Свойство Ссылка

текстовая тень | Campaign Monitor

text-shadow | Монитор кампании

Рабочий стол Посмотреть все 11

Мобильный Посмотреть все 16

Веб-почта

Текст и шрифты

Настольный компьютер

• Настольный компьютер AOL
• Apple Mail 10
• IBM Notes 9
• Перспективы 2000–03
• Перспективы 2007–16
• Outlook Express
• Outlook для Mac
• Почтовый ящик
• Тандерберд
• Почта Windows 10
• Почта Windows Live

Мобильный

• Android 4. 2.2 Почта
• Android 4.4.4 Почта
• Приложение AOL Alto для Android
• Приложение AOL Alto для iOS
• Блэкберри
• Приложение Gmail для Android
• Приложение Gmail для Android IMAP
• Приложение Gmail для iOS
• Мобильная веб-почта Gmail
• Почта iOS 10
• Почта iOS 11
• Приложение Outlook для Android
• Приложение Outlook для iOS
• Windows Phone 8 Почта
• Yahoo! Приложение Почта для Android

  Частично.

  No related posts.