Font css shadow: text-shadow | htmlbook.ru

Leave a Comment / Css / By /

CSS text shadow

❮ Назад Полный CSS Справочник Дальше ❯


Пример

Базовый текст-тень:

h2 {
    text-shadow: 2px 2px #ff0000;
}

Подробнее примеры ниже.

Определение и использование

Свойство text-shadow добавляет тень к тексту.

Это свойство принимает разделенный запятыми список теней, которые будут применены к тексту.

Значение по умолчанию:none
Inherited:yes
Animatable:yes. Читайте о animatable
Version:CSS3
Синтаксис JavaScript: object.style.textShadow=»2px 5px 5px red»

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

Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Свойство
text-shadow4. 010.03.54.09.6

Синтаксис CSS

text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;

Примечание: Чтобы добавить в текст более одной тени, добавьте список теней с разделителями-запятыми.

Значения свойств

ЗначениеОписание
h-shadowОбязательно. Положение горизонтальной тени. Допустимы отрицательные значения
v-shadowОбязательно. Положение вертикальной тени. Допустимы отрицательные значения
blur-radiusДополнительные. Радиус размытия. Значение по умолчанию — 0
colorДополнительные. Цвет тени. Посмотрите на значения цвета CSS для полного списка возможных значений цвета
noneЗначение по умолчанию. Без тени
initialПрисваивает этому свойству значение по умолчанию. (Читайте о initial)
inheritНаследует это свойство из родительского элемента. (Читайте о inherit)

Tip: Read more about allowed values (CSS length units)

Другие примеры

Пример

Text-тень с эффектом размытия:

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

Похожие страницы

CSS Справочник: CSS Text Effects

HTML DOM Справочник: textShadow Свойство

❮ Назад Полный CSS Справочник Дальше ❯

css властивість text-shadow

  • Головна
  • css
  • властивості
  • text-shadow

CSS властивість

text-shadow додає тінь до тексту.

Властивість text-shadow приймає, такі, розділені пропусками, значенні:

  • Зміщення тіні.
  • Радіус розмиття тіні.
  • Колір тіні.

Властивості text-shadow приймає список значень. Кожен елемент у списку може мати два, три або чотири значення.

Перші два значення — значення довжини, які визначають горизонтальне зміщення тіні та вертикальне зсув відповідно (це необхідні значення). Значення третьої довжини може бути визначено радіусом розмиття тіні (необов’язково). І значення кольору можна використовувати для визначення кольору тіні (необов’язково).

Ви можете застосувати кілька тіньових ефектів в рамках одного визначення властивості, розділяючи кожен набір значень комою. Кілька тіньових ефектів застосовуються в зазначеному порядку, і, таким чином, можуть накладатися один на одного, але вони ніколи не накладають сам текст.

Коли дано більше однієї тіні, тіні розташовуються спереду до спини (найперші ближче до користувача, наступні всі далі). Тобто перша задана тінь показується зверху.

Тіні тексту під текстом можуть відображатися, якщо він є частково прозорим. Також, тіні тексту не впливають на макет і не викликають прокручування чи збільшують розмір прокручуваної області.

Ця властивість стосується як псевдоелементів ::first-child, так і ::first-letter.

Нотатка:

Послідовність задання параметрів заборонено порушувати.

Запропонувати свою пораду чи нотатку

ПорадаНотатка

Синтакс

 
text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;

Властивість text-shadow може отримувати 7 значень:

none

Тінь відсутня.

h-shadow

Обов’язково. Зміщення тіні по горизонталі. Допускаються від’ємні значення.

v-shadow

Обов’язково. Зміщення тіні по вертикалі. Допускаються від’ємні значення.

blur-radius

Радіус розмиття тіні.

color

Колір тіні.

initial

Встановлює властивість у значення без задання.

inherit

Вказує на спадковість властивості від свого батьківського елемента (якщо відповідна властивість встановлена).

Значення без задання:none
Наслідує:Так
Анімується:Так
JavaScript синтаксис:object.style.textShadow=»2px 5px 5px red»

Переглядачі

  • Стаціонарні переглядачі
  • Мобільні переглядачі
Переглядач
text-shadow

2. 0

10.0

3.5

1.1

9.5

12.0

Переглядач
text-shadow

2.1

1.0

1.2

Приклади

  • Приклад 1
  • Приклад 2
  • Приклад 3

Наведіть на рядок тексту для того, щоб побачити тінь.

Приклад використання
Базова тінь для тексту
h2 { 


  text-shadow: 2px 2px #ff0000; 


}
Додаткові посилання
text-decoration-color
text-decoration
text-decoration-line
text-decoration-style
box-decoration-break
 Тень текста CSS — javatpoint 
 следующий →
← предыдущая
  
 Как следует из названия, это свойство CSS добавляет тени к тексту. Он принимает разделенный запятыми список теней, примененных к тексту. Его свойство по умолчанию — none. Он применяет один или несколько эффектов text-shadow к текстовому содержимому элемента.
 Давайте посмотрим на синтаксис свойства text-shadow.
  Синтаксис 
 text-shadow: h-shadow v-shadow цвет радиуса размытия | нет | начальная | наследовать;
  Значения 
  h-shadow:  Это необходимое значение. Он определяет положение горизонтальной тени и допускает отрицательные значения.
  v-shadow:  Это также обязательное значение, указывающее положение вертикальной тени. Он не допускает отрицательных значений.
  радиус размытия:  Это радиус размытия, который является необязательным значением. Его значение по умолчанию равно 0,
 
.
  color:  Это цвет тени, а также необязательное значение.
  нет:  Это значение по умолчанию, что означает отсутствие тени.
  начальный:  Используется для установки значения свойства по умолчанию.
  inherit:  Он просто наследует свойство от своего родительского элемента.
 Давайте разберемся, используя некоторые иллюстрации.
 Пример — простая тень 
  <голова> свойство веса шрифта <стиль> п.простой{
 text-shadow: 3px 3px красный;
 }   <тело>
 Простая тень
 
 Протестируйте сейчас
 Пример — нечеткая тень 
  <голова> свойство веса шрифта <стиль> п. нечеткий {
 тень текста: 3px 3px 3px фиолетовый;
 размер шрифта: 30px;
 выравнивание текста: по центру;
 } 
   <тело>
 Нечеткая тень
 
 Протестируйте сейчас
 Пример — несколько теней 
  <голова> свойство веса шрифта <стиль> р. мульти{
 text-shadow: -3px -3px 3px синий, 3px 3px 3px красный;
 размер шрифта: 30px;
 выравнивание текста: по центру;
 }   <тело>
 Множественные тени
 
 Протестируйте сейчас
 Пример — эффект свечения 
  <голова> свойство веса шрифта <стиль> .мульти{
 text-shadow: 0 0 .1em голубой;
 цвет фона: черный;
 размер шрифта: 50px;
 выравнивание текста: по центру;
 } 
 
  <тело> <дел> Эффект свечения 
 Протестируйте сейчас
 Next TopicCSS text-transform
 ← предыдущая
следующий →
 Как использовать свойство text-shadow 
 Содержание 
  •  1. Добавление тени текста в CSS
  •  2. Синтаксис свойства text-shadow CSS
  •  2.1. Доступные значения
  •  3.

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

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