Как задать тень тексту css

Как задать тень тексту при градиентном фоне текста?

Как тексту можно задать тень text-shadow, чтобы градиент остался? Если я добавляю тень тексту, то текст становится черным.

text-shadow: 0 0 1px #000;

введите сюда описание изображения

Отслеживать
задан 23 мар в 10:23
FrontEnder007 FrontEnder007
175 8 8 бронзовых знаков

Добавить под градиентный текст еще один слой с уже обычным точно таким же текстом и применить тень к нему.

23 мар в 10:53

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Тени при помощи filter: drop-shadow(); — поддерживается всеми браузерами кроме IE

.text

tesrfdfs

Отслеживать
ответ дан 23 мар в 11:08
Евгений Ли Евгений Ли
1,378 1 1 золотой знак 1 1 серебряный знак 9 9 бронзовых знаков

Важное на Мете

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как сделать обводку текста в CSS?

Тень текста CSS

Приветствую вас, дорогие посетители сайта Impuls-Web!

Сегодня я хотела бы продолжить тему форматирования и показать, как можно сделать обводку текста CSS.

Навигация по статье:

Обводка теста css-свойством text-shadow
Онлайн-генератор теней

Обводка теста css-свойством text-shadow

Для того, что бы придать эффект обводки мы можем использовать css-свойство text-shadow для задания тени тексту.

По заданию параметров, данное свойство очень похоже на box-shadow и имеет следующий вид:

text-shadow:

Эксперимент с тенью

#content .teni p < font-size : 25px ; color : #fff !important ; text-shadow : 1px 1px 1px #000 ;

Эксперимент с тенью

Так же, как и в случае с тенью для блока, если нам нужна обводка текста css по контуру, то нам нужно задать тень четыре раза.

Вот как это будет выглядеть:

Обводка текста в CSS

#content .obvod p< font - size : 30px ; color : #E2A126!important; text - shadow : 1px 0 1px #000, 0 1px 1px #000, - 1px 0 1px #000, 0 - 1px 1px #000;

Обводка текста в CSS

В принципе, ни чего сложного. Если понять закономерность и немного поэкспериментировать, то у вас обязательно получиться добиться нужного вам результата.

По заданию цветов на сайте у меня есть отдельные статьи, которые так же могут быть для вас полезными:
Изменение цвета шрифта в CSS. Коды цветов HTML и CSS
Как определить цвет на сайте

Онлайн-генератор теней

Если же вам не хочется заморачиваться или вы постоянно путаетесь в параметрах свойства, то вы можете воспользоваться специальным генератором обводки текста на CSS3.

Здесь все просто:

1. Переходите на страницу сервиса
2. Рабочая область поделена на две части. В левой части вам нужно задать параметры для текста, а в правой вы можете посмотреть, что в результате получится.

Обводка текста CSS

Настройка генератора обводки

Если вы не знаете как определить класс или идентификатор элемента на странице, то вам будет полезна эта статья с видеоинструкцией:
Как определить ID и класс элемента на странице?

Надеюсь, показанные мой в этой статье инструменты, помогут вам сделать для своего сайта красивую обводку текста CSS. Не забывайте делиться статьей в социальных сетях, и обязательно подписывайтесь на мою рассылку новостей.

Хорошего вам дня! И до скорых встреч!

С уважением Юлия Гусарь

HTML тег

Тег

определяет параграф или текстовый абзац. Элемент является блочным, а значит его содержимое всегда начинается с новой строки и занимает всю доступную ширину. Следующие один за другим абзацы разделяются между собой отбивкой, величину которой можно задавать при помощи CSS свойства margin . Для перевода строки внутри абзаца используется тег .

Пробелы между открывающим тегом

и его содержимым игнорируются браузером. Чтобы установить отступ (красную строку), используйте CSS свойство text-indent .

Синтаксис

Текстовые абзацы и параграфы заключаются в открывающий (

) и закрывающий (

) теги. Если нет закрывающего тега нет, то считается, что конец абзаца совпадает с началом следующего блочного элемента.

Тег

не может содержать таблицы и другие блочные элементы.

Пример

html> html> head> title>Заголовок окна веб-страницы title> head> body> p>Это параграф p> body> html>

Результат

pexample1

Использование CSS

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

Пример

html> html> head> title>Заголовок окна веб-страницы title> style> div.paragraph < text-align: center; > style> head> body> h1>Заголовок окна веб-страницы h1> div class="paragraph"> p>Выравнивание текста по центру установлено при помощи CSS свойства text-align p> div> body> html>

Результат

pexample2

Атрибуты

Атрибут	Значение	Описание
align	right left justify	Определяет выравнивание текста. Не поддерживается в HTML5

Как добавить стиль к тегу ?

Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега :

CSS свойство font-style задает стиль шрифта: normal | italic | oblique | initial | inherit
CSS свойство font-family создает приоритетный список названий семейства шрифтов и/или общее имя шрифтов для выбранных элементов.
CSS свойство font-size задает размер щрифта.
CSS свойство font-weight устанавливает насыщенность шрифта.
CSS свойство text-transform задает регистр текста (заглавные или строчные буквы).
CSS свойство text-decoration устанавливает оформление текста. Оно является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.

Цвет текста внутри тега :

CSS свойство color определяет цвет контента и оформления текста.
CSS свойство background-color устанавливает фоновый цвет элемента.

Стили форматирования текста для тега :

CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
CSS свойство word-break указывает перенос строки.

Другие свойства для тега :

CSS свойство text-shadow добавляет тень к тексту.
CSS свойство text-align-last выравнивает последнюю строку текста.
CSS свойство line-height устанавливает межстрочный интервал.
CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
CSS свойство word-spacing устанавливает расстояние между словами в тексте.

Как задать тень тексту css

Еще один способ украсить веб-страницу – сделать текст с тенью в CSS. При грамотном применении данного стиля можно удачно выделить заголовок, абзац, часть текста. Вы можете настроить цвет тени, ее смещение и размытие.

Задать в CSS тень текста можно с помощью свойства text-shadow, которое поддерживается всеми браузерами, кроме Internet Explorer версии 9 и ранее. Также есть проблемы с Opera Mini – этот браузер лишь частично поддерживает свойство. Ниже показан пример записи стиля и значений свойства:

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

3px – первое значение отвечает за смещение тени по оси X (вправо, влево). Положительным значением тень сдвигается вправо, а отрицательным – влево.
5px – второе значение отвечает за смещение тени по оси Y (вниз, вверх). Положительным значением тень сдвигается вниз, а отрицательным – вверх.
6px – третье значение отвечает за радиус размытия тени. Этот параметр указывать необязательно. По умолчанию размытие равняется 0 пикселей, что делает тень четкой и неразмытой.
#6c9 – четвертое значение отвечает за цвет тени. Этот параметр указывать необязательно. По умолчанию цвет тени устанавливается такой же, как у текста, к которому применяется стиль.

Как выглядит тень в браузере (скриншот):

Тень для текста CSS – вид в браузере

Скриншот: текст с тенью, CSS

Несколько теней CSS для текста

Также допускается использовать несколько групп значений для свойства text-shadow. Это означает, что вы можете установить несколько теней для одного текста. Для этого нужно записать группы значений через запятую.

Результат применения такого стиля виден на скриншоте:

Несколько теней текста CSS

Скриншот: несколько теней для текста CSS

С помощью свойства CSS text-shadow можно создавать действительно красивые вещи. Вы можете экспериментировать: устанавливать большое количество различных теней, задавать цвет не только в шестнадцатеричном виде, но и в формате RGBA, используя альфа-канал для настройки прозрачности. Вот что может получиться, если уделить этому свойству достаточное количество внимания:

Тень для текста CSS

Скриншот: объемная тень текста в CSS

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

css3

Эта статья учебника будет посвящена такой теме как добавление тени и множественной тени к текстовой информации. В CSS 3 за это отвечает свойство text-shadow, которое в настоящее время имеет широкое применение на веб-страницах.

Синтаксис этого свойства следующий:

К обязательным значениям относятся только h-shadow (горизонтальная тень) и «v-shadow (вертикальная тень), значение радиуса размытия указывать необязательно, как и цвет тени (по умолчанию чёрный).

Для лучшего восприятия данная информация собрана в таблицу:

Значение	Описание
none	Тень у элемента отсутствует. Это значение по умолчанию.
h-shadow	Обязательное значение. Задаёт расположение горизонтальной тени. Допускается использование отрицательных значений.
v-shadow	Обязательное значение. Задаёт расположение вертикальной тени. Допускается использование отрицательных значений.
blur-radius	Необязательное значение. Задаёт радиус размытия. По умолчанию значение 0.
color	Необязательное значение. Задаёт цвет тени (Имя цвета \| HEX \| RGB(A) \| HSL(A)). Значением по умолчанию является черный цвет.

Давайте рассмотрим пример добавления текстовой тени к абзацу (элемент

css3

В этом примере мы для всех азацев (элемент

) установили цвет текста белый, а для текстовой тени (свойство text-shadow) установили значения для расположения горизонтальной и вертикальной тени равными 1 пиксель, а радиус размытия установили равным 4 пикселям.

Кроме того, с использованием псевдоэлемента ::selection задали следующие стили для всех абзацев при выделении текста пользователем: цвет текста черный, цвет заднего фона оранжевый, значения для расположения горизонтальной и вертикальной тени установили равными -1 пиксель (тень сдвигается в противоположную сторону), а радиус размытия установили равным 4 пикселям.

Результат нашего примера:

Рис. 68 Пример использования свойства text-shadow (текстовая тень).

Множественная текстовая тень

Допускается добавление нескольких текстовых теней к элементу, для этого необходимо добавить дополнительное значение тени, либо теней, разделяя их при этом запятыми. Множественные тени наносятся по z-оси спереди назад (с первой заданной тенью сверху).

Пример блока объявлений для множественной тени:

Давайте рассмотрим следующий пример:

В данном примере мы применили множественную тень (8 теней) к первому элементу, установили для него высоту строки 150px (свойство line-height) и задали горизонтальное выравнивание по центру (свойство text-align со значением center ). Для следующих блоков указали как положительное значение для горизонтальной тени, так и отрицательное, благодаря чему тень смещается в левую, а не правую сторону.

Для последнего блока мы установили радиус размытия 6px, а значения горизонтальной и вертикальной тени указали 0px, что придает некий неоновый эффект.

Рис. 68а Пример создания множественной текстовой тени.

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл) в любую папку на вашем жестком диске:

Если у Вас возникают трудности при выполнении практического задания, Вы всегда можете открыть пример в отдельном окне и проинспектировать страницу, чтобы понять какой код CSS был использован.

Текстовые эффекты

В посте представлены некоторые эффекты на основе text-shadow .

text-shadow — это свойство, описывающее тень, отбрасываемую текстом. В отличие от box-shadow , тень не обрезается фигурой, ей нельзя задать размер (только радиус размытия) и она не поддерживает параметр inset , то есть нельзя сделать внутреннюю тень.

Тем не менее, используя несколько теней с различными параметрами можно сделать имитацию обводки (которую было бы проще получить, если бы тень поддерживала размер) и имитацию внутренней тени, что позволяет сделать вдавленный текст.

Сочетая тени, градиенты и псевдо-элементы можно сделать много интересного.

Проведите курсором над текстом примеров, чтобы увидеть эффекты при наведении.

Установка тени для блока и текста в CSS

Посмотрите на макеты сайтов и почти на всех обязательно присутствуют тени у блоков, картинок и реже у текста. Прошли те времена, когда верстальщики вырезали из PSD макета элементы вместе с тенями. Тогда ещё не было CSS-правил для теней.

Как сделать тень блоку в CSS

Нужно блоку добавить всего одно свойство, box-shadow и передать несколько параметров.

box-shadow: 10px 10px 15px #ebe6e6;

Смещение тени по X. Указываем на сколько пикселей сместить тень вправо от элемента или влево с отрицательным значением.

Смещение тени по Y. Задаем количество пикселей с отрицательным значением для смещения вверх и с положительным значением для смещения вниз.

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

Цвет тени. Можно указать как в шестнадцатеричной системе, так и в формате RGB-a.

Я обычно задаю цвет тени в формате RGB-a. Наличие альфа-канала, позволяет сделать тень полупрозрачной. Так она получается мягкой и более естественной.

box-shadow: 10px 10px 15px rgba (235, 230, 230, 0.5);