Вверх страницы

Вниз страницы

Forix ФоРуМ рунета

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » Forix ФоРуМ рунета » (x)HTML ★ WML ★ CSS » .т5. Свойство CSS text-shadow

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

Страница: 1

Сообщений 1 страница 4 из 4

1

  • Автор: МАЧОнаДАЧЕ
  • МАЧОнаДАЧЕ
  • Возраст: 41 [1983-02-26]
  • Сообщений: 1268
  • Откуда: Новокузнецк
  • Пол: Мужской
  • Награды:
  • Зарегистрирован: 20.12.2018
  • Уважение: [+40/-0]
  • Позитив: [+51/-3]
  • Провел на форуме:
    18 дней 20 часов
  • Последний визит:
    23.03.2021 06:39:30

Свойство 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]
<html>
<head>
<style>
.primer1{
padding: 10px;
color: #0000CD;
font-size: 20px;
text-shadow: 3px 1px 7px #191970;
}
</style>
</head>
<body>
<div class="primer1">Текст с тенью на Forix</div>
</body>
</html>
[/html]

Код

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

0

2

  • Автор: МАЧОнаДАЧЕ
  • МАЧОнаДАЧЕ
  • Возраст: 41 [1983-02-26]
  • Сообщений: 1268
  • Откуда: Новокузнецк
  • Пол: Мужской
  • Награды:
  • Зарегистрирован: 20.12.2018
  • Уважение: [+40/-0]
  • Позитив: [+51/-3]
  • Провел на форуме:
    18 дней 20 часов
  • Последний визит:
    23.03.2021 06:39:30

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

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

[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>
[/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>

0

3

  • Автор: МАЧОнаДАЧЕ
  • МАЧОнаДАЧЕ
  • Возраст: 41 [1983-02-26]
  • Сообщений: 1268
  • Откуда: Новокузнецк
  • Пол: Мужской
  • Награды:
  • Зарегистрирован: 20.12.2018
  • Уважение: [+40/-0]
  • Позитив: [+51/-3]
  • Провел на форуме:
    18 дней 20 часов
  • Последний визит:
    23.03.2021 06:39:30

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

[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>
[/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>

0

4

  • Автор: МАЧОнаДАЧЕ
  • МАЧОнаДАЧЕ
  • Возраст: 41 [1983-02-26]
  • Сообщений: 1268
  • Откуда: Новокузнецк
  • Пол: Мужской
  • Награды:
  • Зарегистрирован: 20.12.2018
  • Уважение: [+40/-0]
  • Позитив: [+51/-3]
  • Провел на форуме:
    18 дней 20 часов
  • Последний визит:
    23.03.2021 06:39:30

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

[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>
[/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>

0

Страница: 1

Вы здесь » Forix ФоРуМ рунета » (x)HTML ★ WML ★ CSS » .т5. Свойство CSS text-shadow

создать форум