• Как заработать на сайте
  • Как заработать в интернете
  • Инвестиции в интернете
  • Партнерские программы
  • Рейтинг парт. программ
  • SEO продвижение
  • Вопросы и ответы
  • Термины оптимизатора
  • HTML-уроки
  • Интернет
  • Мои услуги
  • Реклама на сайте
  • Обратная связь
Стоимость баннера за месяц: 30$ (подробности)
Главная → HTML уроки и советы → CSS → Свойство CSS text-shadow

Свойство 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="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="primer2">Фиксированная или жесткая тень</div> <div class="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="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="primer4">Вдавленные буквы - вариант 1</div> <div class="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="primer6">Небольшой 3D текст</div> </body> </html>

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

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

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

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


Читайте также:
• Свойство css border
• Свойство css background
• Свойство css transition
• Свойство text-decoration
• Свойство vertical-align
• Свойство white-space
• Свойство word-wrap
• Свойство z-index
• Линейный градиент
• Радиальный градиент

← Перейти в каталог CSS уроков

Основные разделы
  • Главная
  • Партнерские программы
  • Рейтинг партнерских программ
  • Статьи про SEO
  • Термины SEO
  • Описание бирж
  • HTML-уроки и советы
  • CSS-уроки
  • Биткоины
  • PHP-уроки
  • Бинарные опционы
  • Социальные сети
  • Обзоры систем
  • Все про CMS
  • Реклама в интернете
Важно
  • Продвижение сайта
  • Аудит внутренней оптимизации
  • Куплю Ваш сайт
  • Куплю Вашу подпись на форуме
  • Подписаться на рассылку
  • Реклама на сайте
  • Карта сайта
  • Обратная связь
© 2010-2022 - Zarabotat-Na-Sajte.ru