Как сделать тень css для текста
Перейти к содержимому

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

  • автор:

Свойство text-shadow

Задает тень текста используя два параметра. Первый — сдвиг по оси X, второй — сдвиг по оси Y. Цвет тени будет равен цвету текста. Сдвиг по осям может быть как положительным, так и отрицательным числом. Возможные единицы: px, em, rem, vh, vw

 .example-1 

text-shadow: 1px 2px #000;

Задает тень текста используя три параметра. Первый — сдвиг по оси X, второй — сдвиг по оси Y, третий — цвет тени. Для определения цвета можно использовать ключевые слова названия цвета, шестнадцатеричные значения: #ccc, RGB: rgb(0, 0, 0), RGBa: rgba(0, 0, 0, 0.9) и currentColor.

 .example-2 

text-shadow: 1px 2px 3px #000;

Задает тень текста используя четыре параметра. Первый — сдвиг по оси X, второй — сдвиг по оси Y, третий — размытие тени, четвертый — цвет тени

 .example-3 

text-shadow: 1px 2px 2px #000, 1px 2px 2px red;

Задает множество теней для текста, используя запятую. Возможно задавать сколько угодно теней.

 .example-3 

text-shadow

CSS свойство text-shadow позволяет добавить одну или более тень для текста. Тень текста не влияет на его размер и расположение.

Для каждой тени можно задать от 2 до 4 параметров. Если добавляется несколько теней, то список параметров для каждой тени указывается через запятую.

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

Примечание: для добавления тени к блоку используйте CSS свойство box-shadow.

Значение по умолчанию: нет
Применяется: ко всем элементам, а также к псевдо-элементам ::first-letter и ::first-line
Анимируется: да
Наследуется: да
Версия: CSS3
Синтаксис JavaScript: object.style.textShadow=»2px 2px #ff0000″

Синтаксис

text-shadow: х_тень у_тень размытость цвет|none|inherit;

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

Значение Описание
х_тень Обязательный параметр. Положение горизонтальной тени. Допустимы отрицательные значения.
у_тень Обязательный параметр. Положение вертикальной тени. Допустимы отрицательные значения.
размытость Уровень размытости тени (указывается в единицах измерения, поддерживающихся CSS). Необязательный параметр.
цвет Цвет тени. Необязательный параметр.

text — shadow

Свойство text — shadow даёт возможность добавить тень буквам в тексте.

Пример

Скопировать ссылку «Пример» Скопировано

Добавим нашем заголовку весёлую розовую тень!

 

Улыбнись!

h1>Улыбнись!h1>
 h1  text-shadow: 5px 5px #ffe2e7;> h1  text-shadow: 5px 5px #ffe2e7; >      

Как пишется

Скопировать ссылку «Как пишется» Скопировано

У тени для текста много общего с тенью для блока — box — shadow .

Каждая тень состоит из следующих значений:

  • Два или три значения размера с единицами измерения.
    • Если задано только два значения, то они интерпретируются как смещение по осям x и y.
    • Если задано и третье значение тоже, то оно отвечает за размытие тени.

    Посмотрим на каждую из составляющих тени внимательнее:

    Смещения по осям x и y — обязательные значения для тени. Могут принимать любые числовые значения, в том числе отрицательные. Значение по умолчанию равно 0 для обеих осей. Если первое значение положительное, то тень будет справа от буквы, если отрицательное — слева. Если второе значение положительное, то тень будет снизу, если отрицательное — сверху.

    Радиус размытия — опциональное значение, положительное числовое значение с единицами измерения. По умолчанию значение 0, что делает его указание необязательным. Если не указываете его или пишете 0, то край тени будет резким, без размытия. Чем больше значение, тем шире область размытия и тем светлее сама тень.

    Цвет — вроде бы опциональное, но на самом деле обязательное значение цвета тени. Почему? Если не указывать цвет, то решение остаётся за браузером. Как правило, браузер возьмёт значение свойства color текста, которому прописываете тень. Но Safari (sic!) отрисует прозрачную тень. Если вам действительно нужен цвет тени, совпадающий с цветом текста, то это можно указать явно при помощи ключевого слова current Color .

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

    Как понять

    Скопировать ссылку «Как понять» Скопировано

    «Объёмный» текст, созданный при помощи тени — старая уловка типографов и шрифтовиков.

    Пример объёмного текста

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

    Подсказки

    Скопировать ссылку «Подсказки» Скопировано

    �� Свойство можно анимировать ��

    На практике

    Скопировать ссылку «На практике» Скопировано

    Алёна Батицкая советует

    Скопировать ссылку «Алёна Батицкая советует» Скопировано

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

    �� На ретина-экранах тени могут выглядеть достаточно грязно. Обязательно проверяйте отображение текста с тенями на экранах с DPR ≥ 2.

    Как добавить тень к тексту в css

    Для добавления тени к тексту можно воспользоваться CSS свойством text-shadow .

    Тень описывается её смещением по осям X и Y относительно текста, радиусом размытия и цветом.

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

    h1  text-shadow: 3px -4px 5px red; > 

    В результате у заголовка мы получим тень красного цвета, которая относительно текста будет смещена по оси X на 3 пикселя вправо (так как значение положительно), по оси Y на 4 пикселя вверх (так как значение отрицательно), а радиус размытия тени будет составлять 5 пикселей.

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

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