CSS :: Свойство text_shadow
http://belarusweb.net
Основы создания сайтов

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

css-свойство text-shadow (от англ. text shadowтень текста) создает одну или несколько теней для текста. Если теней несколько, их значения должны перечисляться через запятую.

Характеристики

  • Значение по умолчанию: none.
  • Применяется: ко всем элементам.
  • Наследуется: да.
  • Анимируется: да.
  • JavaScript: object.style.textShadow="value".

Синтаксис

text-shadow: none | <тень>[, <тень>]*, где

<тень> = <смещение x> <смещение y> <размытие> <цвет>

Значения

  • смещение x – обязательный параметр, который в случае положительных значений смещает тень относительно текста по горизонтали вправо, а в случае отрицательных значений – влево. Если значение параметра равно нулю, то смещение отсутствует.
  • смещение y – обязательный параметр, который в случае положительных значений смещает тень относительно текста вверх, а в случае отрицательных значений – вниз. Если значение параметра равно нулю, то смещение отсутствует.
  • размытие – необязательный параметр, который устанавливает радиус размытия тени. Чем больше радиус, тем больше тень становится размытой и осветвленной, особенно по краям. Если параметр не указывается, то браузер по умолчанию установит радиус размытия равный нулю, в результате чего тень будет полностью четкой с резким контуром.
  • цвет – определяет цвет тени. т.к. браузеры по умолчанию задают разный цвет тени, то желательно всегда задавать этот необязательный параметр.
  • none – тень добавляться не будет (используется по умолчанию).

Для указания числовых значений параметров свойства text-shadow разрешается использовать все доступные в CSS единицы измерения (смотреть), а для указания цвета – любое допустимое в CSS его значение.

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

Ссылки

Примеры

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
	
		p{
		width: 300px;
		height: 100px;
		margin: 3em;
		padding: 1em;
		border: solid 1px black;
		}
		
		.p_1{
		text-shadow: 2px 2px 3px blue;
        }
		
		.p_2{
		text-shadow: 2px 2px 5px blue,
					5px 5px 8px green,
					10px 10px 15px red;
		}
		
	</style>
	
</head>
<body>

	<p  class="p_1">
		Одна тень.
	</p> 
	
	<p  class="p_2">
		Несколько теней.
	</p> 
	
</body>
</html>	

Пример №1