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

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

  • автор:

Свойство CSS text-shadow

Свойство CSS text-shadow отвечает за задание тени у текста. Очень схож со свойство box-shadow.

Синтаксис CSS text-shadow

text-shadow: X Y R color;
  • X — сдвиг тени относительно текста по оси Х (чаще всего задается в пикселях px);
  • Y — сдвиг тени относительно текста по оси Y (чаще всего задается в пикселях px);
  • R — радиус тени (чаще всего задается в пикселях px);
  • color — цвет (можно задавать в любом формате, см. названия html цветов)

Синтаксис text-shadow допускает задание нескольких теней через запятую. Например

text-shadow: X1 Y1 R1 color1, X2 Y2 R2 color2, . ;

Приоритет тени (какая выше, какая ниже) зависит от конкретной версии CSS. В CSS3 первая тень в списке размещается на самом верху, последняя в списке — в самом низу. В CSS2 наоборот.

Примеры: как сделать тень у текста в html

Пример №1. Простая тень у текста в html

Ниже представлен самый простой пример с тенью у текста. Здесь мы применили оба смещения (X и Y), а также сделали радиус размытия.

html> head> style> .primer1< padding: 10px; color: #0000CD; font-size: 20px; text-shadow: 3px 1px 7px #191970; > /style> /head> body> div class css">primer1">Текст с тенью/div> /body> /html>

На странице преобразуется в следующее

Текст с тенью

Пример №2. Фиксированная или жесткая тень у текста в html

Ниже представлены два примера. Тень в обоих случаях одинаковая (фиксированная), т.е. без размытия. Обратите внимание, какой эффект создается, если текст будет на черном фоне.

html> head> style> .primer2< padding: 10px; color: #0000CD; font-size: 20px; text-shadow: 1px 2px 0px #1E90FF; > .primer2_1< padding: 10px; color: #0000CD; font-size: 20px; text-shadow: 1px 2px 0px #1E90FF; background: #000; > /style> /head> body> div class css">primer2">Фиксированная или жесткая тень/div> div class css">primer2_1">Фиксированная или жесткая тень с фоном/div> /body> /html>

На странице преобразуется в следующее

Фиксированная или жесткая тень
Фиксированная или жесткая тень с фоном

Пример №3. Двойная тень у текста в html

html> head> style> .primer3< padding: 10px; color: #0000CD; font-size: 20px; text-shadow: 2px 1px 0px #fff, 4px 2px 0px #00FA9A; > /style> /head> body> div class css">primer3">Двойная тень/div> /body> /html>

На странице преобразуется в следующее

Двойная тень

Пример №4. Вдавленные буквы у текста в html

html> head> style> .primer4< padding: 10px; color: #333; font-size: 20px; text-shadow: 2px 2px 3px rgba(255,255,255,0.1); > .primer5< padding: 10px; color: #000; font-size: 20px; text-shadow: -1px -1px #666, 1px 1px #fff; background: #000; > /style> /head> body> div class css">primer4">Вдавленные буквы - вариант 1/div> div class css">primer5">Вдавленные буквы - вариант 2/div> /body> /html>

На странице преобразуется в следующее

Вдавленные буквы — вариант 1
Вдавленные буквы — вариант 2

Пример №5. Вдавленные буквы у текста в html

html> head> style> .primer6< padding: 10px; color: #fff; font-size: 20px; 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); background: #555; > /style> /head> body> div class css">primer6">Небольшой 3D текст/div> /body> /html>

На странице преобразуется в следующее

Небольшой 3D текст

Для обращения к margin из JavaScript нужно писать следующую конструкцию:

[window.]document.getElementById("elementID").style.margin value">VALUE"

Тень текста

Итак, вы уже добавили сторонние шрифты на свой сайт, задали необходимый размер шрифта и цвет. Научились управлять декорациями шрифта. Теперь настало время поговорить о том, как добавить тень HTML-шрифта.

Тень к тексту невозможно сделать средствами HTML, самый правильный и простой способ сделать тень — CSS. Для этого существует специальное свойство CSS shadow (text-shadow). Рассмотрим его применение:

   Оформление текста CSS - "Нубекс"  .nubex 

Конструктор сайтов "Нубекс"

Значение параметра text-shadow задается следующим образом:

text-shadow: [сдвиг по оси X] [сдвиг по оси Y] [радиус размытия тени] [цвет]

В случае, если тень для текста необходимо убрать, просто нужно прописать:

text-shadow: none;

Разберемся теперь, что означают указанные параметры и как их правильно задать:

  • Сдвиг по оси X (Y) — указывает смещение тени по оси X (Y). Параметр можно задать как положительным числом, так и отрицательным. В первом случае тень будет смещена вправо (вниз), во втором — влево (вверх);
  • Радиус размытия тени — при увеличении этого значения размер тени увеличивается, она становится более сглаженной и светлой. Вид сглаживания отличается при отображении в различных браузерах;
  • Цвет — устанавливает цвет тени.

Все параметры, кроме цвета, задаются в пикселях (px). Цвет можно задать как названием (red, green, blue), так и в шестнадцатиричном формате (#383838).

Тени возможно комбинировать. Для этого нужно несколько теней прописать через запятую:

text-shadow: 1px 1px 1px #787878, 2px 2px 2px blue;

Кроссбраузерность

Практически все современные браузеры корректно работают с тенями и способны отображать большое множество теней. Но нужно помнить, что некоторые браузеры имеют с этим проблемы. Например, браузер Internet Explorer стал поддерживать свойство text-shadow только начиная с версии 10. Для более ранних версий использовалось свойство filter:

filter: Shadow(Color=#787878, Direction=60, Strength=2);

Записанный код создает тень цвета #787878, с углом 60 градусов от вертикали и смещением в 2 пикселя.

Обводка текста CSS

С помощью свойства text-shadow можно сделать и обводку текста. Суть следующая: для текста создаются 8 теней для всех возможных комбинаций X и Y: 1,0; 1,1; . ; 1,-1. Атрибут text-shadow в таком случае выглядит примерно так:

В приведенном примере к тексту белого цвета устанавливается черная обводка в 2 пикселя.

Внутренняя тень текста в CSS

Внутренняя тень текста в CSS

Пример создания эффекта внутренней тени для текста используя CSS. Достигается такой эффект внутренней тени благодаря использованию CSS свойства text-shadow.

HTML

Linguine al pesto

CSS

@import url(http://fonts.googleapis.com/css?family=Oleo+Script); html < background-color: rgb(119,122,77); background: -webkit-linear-gradient(-45deg, rgb(119,122,77) 25%, rgb(88,92,42) 25%, rgb(88,92,42) 50%, rgb(119,122,77) 50%, rgb(119,122,77) 75%, rgb(88,92,42) 75%); background-size:4px 4px; >h1 < text-align: center; font-family: 'Oleo Script', cursive; font-size: 9.375em; color: transparent; /*this hide the text*/ letter-spacing: 0.1em; text-shadow: /*this is the real color of the text - just blurred*/ 0 1px 5px rgb(88,92,42), /* these are the dark inset shadows the second one add a sharper look and depth to the top of the letters */ 0 -1px 0 rgba(0,0,0,1), 0 -3px 0 rgba(0,0,0,0.45), /* these are the highlights - using rgba you can change the last value if they are too (or too little) bright */ 0 1px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(255,255,255,0.2); >

Пример создания эффекта внутренней тени для текста используя CSS. Достигается такой эффект внутренней тени благодаря использованию CSS свойства text-shadow.   HTML CSS @import url(http://fonts.googleapis.com/css?family=Oleo+Script); html < background-color: rgb(119,122,77); background: -webkit-linear-gradient(-45deg, rgb(119,122,77) 25%, rgb(88,92,42) 25%, rgb(88,92,42) 50%, rgb(119,122,77) 50%, rgb(119,122,77) 75%, rgb(88,92,42) 75%); background-size:4px 4px; >h1< text-align: center; font-family: 'Oleo Script', cursive; font-size: 9.375em; color: transparent; /*this hide the text*/ letter-spacing: 0.1em; text-shadow: /*this is the real color of the text - just blurred*/ 0 1px 5px rgb(88,92,42), /* these are the dark inset shadows the second one add a sharper look and…

Обзор

Проголосуйте за урок
Оценка

Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

CSS тень текста

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

Для Internet Explorer — filtro.

тень для IE

filter:progid:DXImageTransform.Microsoft.Shadow(color=#AABBCC,strength=13, direction=310);

36 комментариев:

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

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

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