Свойство 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>
На странице преобразуется в следующее
Пример №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>
На странице преобразуется в следующее
Для обращения к 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
• Линейный градиент
• Радиальный градиент