Тень у css текста: text-shadow | htmlbook.ru — Вебджем.рф | Создание и продвижение сайтов

Содержание

text-shadow — тень текста | CSS справочник

Поддержка браузерами


12.0+	10.0+	3.5+	4.0+	9.6+	4.0+

Описание

CSS свойство text-shadow позволяет добавить одну или более тень для текста. Тень текста не влияет на его размер и расположение.

Для каждой тени можно задать от 2 до 4 параметров. Если добавляется несколько теней, то список параметров для каждой тени указывается через запятую.

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

Примечание: для добавления тени к блоку используйте CSS свойство box-shadow.

Значение по умолчанию:	нет
Применяется:	ко всем элементам, а также к псевдо-элементам ::first-letter и ::first-line
Анимируется:	да
Наследуется:	да
Версия:	CSS3
Синтаксис JavaScript:	object.style.textShadow=»2px 2px #ff0000″

Синтаксис

text-shadow: х_тень у_тень размытость цвет|none|inherit;

Значения свойства

Значение	Описание
х_тень	Обязательный параметр. Положение горизонтальной тени. Допустимы отрицательные значения.
у_тень	Обязательный параметр. Положение вертикальной тени. Допустимы отрицательные значения.
размытость	Уровень размытости тени (указывается в единицах измерения, поддерживающихся CSS). Необязательный параметр.
цвет	Цвет тени. Необязательный параметр.

Пример

text-shadow:

2px 2px red

5px 5px red

20px 20px red

-10px 10px red

-10px -10px red

5px 5px red

5px 5px 1px red

5px 5px 2px red

5px 5px 3px red

5px 5px 4px red

5px 5px 5px red

5px 5px 10px red

5px 5px 10px blue

5px 5px 10px black

5px 5px 10px #00FF00

#myh2 {
text-shadow: 2px 2px red;
}

Тень текста CSS — задаём красивый стиль заголовкам и абзацам!

Добрый час! Давайте сегодня займёмся дизайном сайта и сделаем тень текста в файле style. css конструктора WordPress. Рассмотрим, как присвоить тень заголовку сайта и описанию. А также заголовкам h2 — h6 и обычному тексту в абзацах.

Тень текста в CSS

Для начала сравним три примера. Я покажу на своём сайте. Это скриншот текста и заголовков до применения стилей CSS.

А это текстовый дизайн после вставки стилей CSS.

И третий вариант — применение стилей полностью ко всему тексту сайта. Конечно, я не рекомендую делать тень текста в абзацах. Возможно, некоторым читателям это затруднит восприятие. Но если хотите, право ваше.

Применение свойства text-shadow

Переходим к практике. Заходим в файловый менеджер и открываем корневую папку сайта. Нам необходимо найти файл style.css в папке установленной темы. Он имеет примерно следующий адрес:

wordpress/public_html/wp-content/themes/ваша_тема/style.css

Ваша тема — это та, которую вы установили в качестве шаблона. Но лучше, на её основе сделайте дочернюю. Иначе все ваши труды исчезнут после ближайшего обновления.

Итак, я покажу, какие стили прописаны у меня. Вы можете скопировать код и вставить у себя. А затем поменять значения на своё усмотрение. Также я ниже приведу расшифровку всех свойств.

h2#logo, p.wtitle, h2, h3, a#logo.blog-name, p.sitedescription {
	text-shadow: #778899 2px 2px 3px;
}

Это стили из моего файла. И если вы хотите применить тень ко всему тексту в статьях и рубриках, то подключите дополнительно такой код. Либо просто допишите через запятую тег

к вышеприведённому коду.

p {
	text-shadow: #778899 2px 2px 3px;
}

У меня они перечислены в строчку, так как ко всем свойствам применено одно значение. То есть, тень с одинаковыми параметрами. Это цвет, направление и размытие. Возможно, что вы захотите использовать различные значения для каждого элемента текста. Тогда это будет выглядеть примерно так:

h2#logo {
	text-shadow: mediumblue -2px 2px 0px;
} 
p.wtitle {
	text-shadow: lightgray 2px 2px 4px;
}
h2, h3, h4 {
	text-shadow: #778899 2px 2px 1px;
}
h5, h5, h6 {
	text-shadow: green -2px 1px 4px;
}
a#logo. blog-name {
	text-shadow: grey -3px 0px 3px;
} 
p.sitedescription {
	text-shadow: blue 2px 2px 5px;
}
p {
	text-shadow: #C0C0C0 1px 1px 2px;
}

Расшифровка элементов текста и значений тени

А теперь посмотрим на расшифровку элементов текста.

h2#logo — заголовок сайта h2 в качестве логотипа
p.wtitle — заголовки виджетов
h2, h3 — текстовые заголовки (можно задать для h2 — h6)
a#logo.blog-name — название сайта, являющееся ссылкой
p.sitedescription — описание сайта
p — текстовый абзац

text-shadow — это сама тень текста с произвольными параметрами. Цвет можно прописать как в числовом формате, так и в буквенном. Например, blue или grey. Где взять названия цветов для html? В интернете множество таблиц с оттенками.

Значения в пикселях для тени. Первые два — это смещение по осям X и Y. Возможны и отрицательные значения. А третье — это размытие. Если размытие равно нулю, то тень будет чёткая и яркая. Лучше, конечно, создавать тень в одном направлении для всех элементов.

Если у вас не сработают данные стили по отношению к той или иной текстовой категории, попробуйте определить их следующим образом. Возможно, они имеют иное название из-за установленной темы WordPress.

В браузере наведите курсор на нужную часть текста и нажмите правую кнопку мыши. А затем — Исследовать элемент. После этого в правом поле отыщите его наименование. При наведении на строчки справа — на вашем сайте будут подсвечиваться элементы и подсказки.

Также можете поэкспериментировать со стилями блока кода в записях или дизайном полосы прокрутки на сайте WordPress.

Сменили тему, хотите пересоздать миниатюры или удалить лишние размеры? Воспользуйтесь плагином Regenerate Thumbnails.

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

❮ Предыдущий Полное руководство по CSS Далее ❯

Пример

Базовая тень текста:

h2 {
тень текста: 2px 2px #ff0000;
}

Попробуйте сами »

Другие примеры «Попробуйте сами» ниже.

Определение и использование

Свойство text-shadow добавляет тень к тексту.

Это свойство принимает разделенный запятыми список теней, которые будут применены к текст.

Показать демо ❯

Значение по умолчанию:	нет
Унаследовано:	да
Анимация:	да. Читать о анимированном Попытайся
Версия:	CSS3
Синтаксис JavaScript:	объект .style.textShadow=»2px 5px 5px красный» Попытайся

Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Собственность
тень текста	4,0	10,0	3,5	4,0	9,6

Синтаксис CSS

text-shadow: h-shadow v-shadow цвет радиуса размытия |нет|начальный|наследовать;

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

Значения свойств

Значение	Описание	Демо
h-тень	Обязательно. Положение горизонтальной тени. Допускаются отрицательные значения	Демо ❯
v-тень	Обязательно. Положение вертикальной тени. Допускаются отрицательные значения	Демо ❯
радиус размытия	Дополнительно. Радиус размытия. Значение по умолчанию: 0	Демо ❯
цвет	Дополнительно. Цвет тени. Полный список возможных значений цвета см. в CSS Color Values	Демонстрация ❯
нет	Значение по умолчанию. Нет тени	Демо ❯
начальный	Устанавливает для этого свойства значение по умолчанию. Читать про начальный
унаследовать	Наследует это свойство от родительского элемента. Читать о унаследовать

Совет: Подробнее о допустимых значениях (единицы длины CSS)

Дополнительные примеры

Пример

Text-shadow с эффектом размытия:

h2 {
text-shadow: 2px 2px 8px #FF0000;
}

Попробуйте сами »

Пример

Тень текста на белом тексте:

h2 {
цвет: белый;
text-shadow: 2px 2px 4px #000000;
}

Попробуйте сами »

Пример

Text-shadow с красным неоновым свечением:

h2 {
text-shadow: 0 0 3px #FF0000;
}

Попробуйте сами »

Пример

Text-shadow с красно-синим неоновым свечением:

h2 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

Попробуйте сами »

Связанные страницы

Учебник CSS: тень текста CSS

Ссылка HTML DOM: свойство textShadow

❮ Предыдущая Полное руководство по CSS Следующий ❯

ВЫБОР ЦВЕТА

Лучшие учебники

Учебник по HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3.

CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery

2 Top 9 HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference

Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
Справочник по jQuery

Основные примеры

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

W3Schools работает на основе W3.CSS.

Тень текста CSS

❮ Назад Далее ❯

Тень текста

Свойство text-shadow добавляет тень к тексту.

В простейшем случае вы указываете только горизонтальную тень (2 пикселя) и вертикальную тень (2 пикселя):

Текстовый эффект тени!

Пример

h2 {
text-shadow: 2px 2px;
}

Попробуйте сами »

Затем добавьте цвет (красный) к тени:

Текстовый эффект тени!

Пример

h2 {
text-shadow: 2px 2px красный;
}

Попробуйте сами »

Затем добавьте к тени эффект размытия (5 пикселей):

Текстовый эффект тени!

Пример

h2 {
text-shadow: 2px 2px 5px красный;
}

Попробуйте сами »

Дополнительные примеры теней текста

Пример 1

Тень текста на белом тексте:

h2 {
цвет: белый;
text-shadow: 2px 2px 4px #000000;
}

Попробуйте сами »

Пример 2

Text-shadow с красным неоновым свечением:

h2 {
text-shadow: 0 0 3px #ff0000; Пример 3
}

Попробуйте сами »

Пример 4

h2 {
цвет: белый;
text-shadow: 1px 1px 2px черный, 0 0 25px синий, 0 0 5px темно-синий;
}

Попробуйте сами »

Совет: Перейдите к нашей главе «Шрифты CSS», чтобы узнать, как изменить шрифты, размер текста и стиль текста.

Совет: Перейдите к нашей главе Текстовые эффекты CSS, чтобы узнать о различных текстовых эффектах.

Проверьте себя с помощью упражнений

Упражнение:

Измените цвет текста всех элементов

на «красный».

<стиль>
п {
  : красный;
}

<тело>
   Это заголовок 
  Это абзац
  Это абзац

Начать упражнение

Свойство тени текста CSS

Свойство	Описание
тень текста	Определяет эффект тени, добавляемый к тексту

❮ Предыдущий Следующий ❯

ВЫБОР ЦВЕТА

Лучшие учебники

Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3.CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery

902 Справочник Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3. CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры

ФОРУМ | О

Тень у css текста: text-shadow | htmlbook.ru

text-shadow — тень текста | CSS справочник

Поддержка браузерами

Описание

Синтаксис

Значения свойства

Пример

Тень текста CSS — задаём красивый стиль заголовкам и абзацам!

Тень текста в CSS

Применение свойства text-shadow

Расшифровка элементов текста и значений тени

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

Пример

Определение и использование

Поддержка браузера

Синтаксис CSS

Значения свойств

Дополнительные примеры

Пример

Пример

Пример

Пример

Связанные страницы

ВЫБОР ЦВЕТА

Лучшие учебники

Основные примеры

Тень текста CSS

Тень текста

Текстовый эффект тени!

Пример

Текстовый эффект тени!

Пример

Текстовый эффект тени!

Пример

Дополнительные примеры теней текста

Пример 1

Пример 2

Пример 4

Проверьте себя с помощью упражнений

Упражнение:

Это заголовок

Свойство тени текста CSS

ВЫБОР ЦВЕТА

Лучшие учебники

Основные примеры

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

Рубрики