Большинство текстовых эффектов CSS, которые выглядят сложными, сделаны из одного свойства. неоновый знак на целевой странице, жесткий контур на названии игры, сложенный оранжевый надпись, которая выглядит как конверт с пластинками 1970-х годов: каждый из них - единый text-shadow объявление с несколькими слоями, разделенными запятыми Синтаксис короткий.Твердая часть - это выделение смещений и размытия значений, которые хорошо читаются, и запоминание того, какой слой рисует сверху.
Это руководство охватывает text-shadow грамматика, как работает наслоение, рецепты, лежащие в основе общих эффектов с точными значениями, которые они используют, и ошибки, которые делают затененный текст трудно читать или медленно рендерить. Каждый пример можно перестроить в Генератор текстовых теней CSS, который показывает результат в прямом эфире и пишет декларацию для вас.
TL;DR:
text-shadowберет список теней, разделенный запятыми, каждая из которых записывается какoffset-x offset-y blur-radius color. Первая тень в списке рисует сверху. У него нет значения спреда и нетinsetключевое слово, в отличие отbox-shadow. Свечения - это несколько теней с нулевым смещением и растущим размытием, контуры - это четыре жесткие тени по одному пикселю, а трехмерный текст - это стопка твердых теней, каждая из которых находится на один пиксель дальше. Генератор текстовых теней Toolz создает их с помощью ползунков и восьми предустановок: на стороне клиента, бесплатно, без регистрации.
Что такое свойство CSS Text-Shadow?
выше text-shadow свойство рисует одну или несколько теней за глифами элемента & #39;s текста. Оно определено в W3C Модуль текстового украшения CSS, уровень 3и его ценность либо none или список теней, разделенный запятыми.
Каждая тень состоит из до четырех частей:
| Часть | Требуется | Что делает | Допустимые значения |
|---|---|---|---|
| Горизонтальное смещение | да | Перемещает тень вправо (положительно) или влево (отрицательно) | Любая длина, например. 2px, -0.1em |
| Вертикальное смещение | да | Перемещает тень вниз (положительно) или вверх (отрицательно) | Любая длина |
| Радиус размытия | Нет, по умолчанию 0 |
Смягчает край; больший означает более размытый | Ноль или положительная длина. Отрицательный недействителен |
| Цвет | Нет, по умолчанию currentColor |
Цвет теней, включая прозрачность | Любой цвет CSS |
Цвет может идти первым или последним. text-shadow: #000 1px 1px а text-shadow: 1px 1px #000 являются те же тень. если вы оставите цвет вне, тень берет текст 's собственный цвет, который редко является то, что вы хотите для тени капли, но удобный для быстрого свечения цвета текста.
Тень никогда не меняет макет. он не отталкивает соседние элементы и не увеличивает ящик element's, поэтому большое размытие может вылиться за пределы ящика и быть отрезанным родителем с overflow: hidden, йо-
Чем text-shadow отличается от box-shadow?
text-shadow следует форме каждой буквы, при этом box-shadow следует прямоугольник элемента 's пограничный ящик. это практическое различие, и он решает, к какому из них вы тянетесь. грамматика также отличается.
| важничать | text-shadow |
box-shadow |
|---|---|---|
| Форма тени | Каждый контур глифа | Ящик element's, включая закругленные углы |
| Радиус разброса | Недоступно | Да, четвертая длина |
inset ключевое слово |
Недоступно | да |
| Несколько слоев | Да, разделенные запятыми | Да, разделенные запятыми |
| Порядок окраски | Сначала указано сверху | Сначала указано сверху |
| Цвет по умолчанию | currentColor |
currentColor |
| Типичное использование | Заголовки, логотипы, разборчивость изображений | Карты, пуговицы, возвышение |
Недостающее значение спреда - это то, почему для контуров текста нужно четыре тени вместо одной. с box-shadow можно писать 0 0 0 2px black чтобы вырастить сплошное кольцо С текстом нет возможности расширить глиф, поэтому вы подделываете его, смещая копии в нескольких направлениях. если вы стаируете контейнер, а не слова, то руководство по генератору теней коробки покрывает раскидистые, вставные и возвышающиеся слои.
Как работает наложение нескольких теней текста?
Единое объявление может удерживать сколько угодно теней, разделенных запятыми, а браузер рисует первую, наиболее близкую зрителю Последняя тень в списке сидит сзади Сам текст всегда рисует над всеми.
Этот порядок имеет значение всякий раз, когда слои перекрываются. сравните эти два объявления:
/* Sharp dark layer on top of a soft glow */
text-shadow: 2px 2px 0 #000, 0 0 12px #ff0;
/* Soft glow painted over the sharp layer */
text-shadow: 0 0 12px #ff0, 2px 2px 0 #000;
В первом хрустящая черная копия остается острой, а за ней сидит желтая дымка Во втором желтое свечение омывает черную копию и смягчает ее. те же тени, другой взгляд.
Генератор следует тому же правилу.Слой 1 во вкладках слоя является первой тенью на выходе, поэтому он рисует сверху. Добавление слоя добавляет его в конец списка, за другими. чтобы переместить слой вперед, вы удаляете его и воссоздаете, или редактируете скопированный CSS вручную.
Какие значения записывает генератор Toolz?
выше генератор текстовых теней дает каждому слою пять элементов управления и записывает объявление в фиксированном формате.Знание этого формата помогает, когда вы вставляете результат в кодовую базу с ее собственными соглашениями.
| Контроль | Диапазон | Шаг | Написано как |
|---|---|---|---|
| Смещение X | от -50px до 50px | 1px | Npx |
| Смещение Y | от -50px до 50px | 1px | Npx |
| Размытие | от 0px до 100px | 1px | Npx, включая 0px |
| Цвет | Цветосборщик | -- | 6-значный шестигранник |
| Непрозрачность | от 0% до 100% | 1% | Добавлено в виде двух шестигранных цифр после цвета |
Непрозрачность складывается в цвет в виде 8-значного шестигранного значения, следующего за шестнадцатеричная нотация цветового модуля CSS уровня 4. Последние две цифры - это альфа-канал по шкале от 0 до 255, поэтому инструмент умножает непрозрачность на 255, округляет и преобразует в гекс.
Вот как это получается при некоторых помутнениях:
| Ползунок непрозрачности | Раз 255 | Округленный | Шестигранная альфа | Цвет примера |
|---|---|---|---|---|
| 100% | 255 | 255 | ff |
#000000ff |
| 90% | 229,5 | 230 | e6 |
#4466eee6 |
| 70% | 178,5 | 179 | b3 |
#4466eeb3 |
| 60% | 153 | 153 | 99 |
#00000099 |
| 35% | 89,25 | 89 | 59 |
#00000059 |
| 25% | 63,75 | 64 | 40 |
#00000040 |
Каждый текущий браузер читает 8-значный гекс. Если вы должны поддерживать очень старый браузер, перепишите цвет как rgba() после копирования: #00000099 становиться rgba(0, 0, 0, 0.6), йо-
Инструмент принимает только ввод ползунка и пикера, поэтому значения целые пиксели. Для тени, измеренной в em, который масштабируется с размером шрифта, копировать CSS и менять местами единицы в вашей таблице стилей. А 2px смещение по тексту тела 16px 0.125em, йо-
Как создать неоновый эффект свечения текста?
Неоновое свечение - это несколько теней с нулевым смещением, одинаковым ярким цветом и увеличивающимся размытием. каждый слой добавляет более широкое и слабое ореол, и вместе они выглядят как свет, истекающий в окружающий воздух.
Генератор открывается на своем предустановке Neon Glow, которая производит это
text-shadow: 0px 0px 7px #4466eeff, 0px 0px 14px #4466eee6, 0px 0px 28px #4466eeb3;
Три слоя, размытие удвоение каждый раз (7, 14, 28), непрозрачность шаг вниз от 100% до 90% до 70%. плотный слой 7px дает буквы яркое ядро, а слой 28px распространяет цвет наружу. на темном фоне с белым текстом это читается как освещенная трубка. на светлом фоне большая часть эффекта исчезает, поэтому предварительный просмотр имеет свет bg /Темный bg переключение: проверить оба, прежде чем отправить свечение на сайт с переключателем темы.
Чтобы сделать свечение сильнее, добавьте четвертый слой при размытии 56px или повторите слой 7px дважды. Повторение слоя укладывает его непрозрачность и делает ядро более интенсивным, не расширяя его.
Как вы намечаете текст текстовой тенью?
Поместите четыре твердые тени (размытие 0) по одному пикселю на каждой диагонали. Их перекрытие прослеживает край каждого глифа.
Предварительный набор "Очерк" пишет:
text-shadow: -1px -1px 0px #000000ff, 1px -1px 0px #000000ff, -1px 1px 0px #000000ff, 1px 1px 0px #000000ff;
Это хорошо работает в одном пикселе В двух или трех пикселях разрывы начинают показывать в средних точках кривых и прямых краев, потому что четыре копии покрывают только диагонали Для более толстого контура добавить еще четыре слоя на прямых осях (0 -2px, 2px 0, 0 2px, -2px 0) итак, каждую букву окружают восемь копий.
Есть нетеневая альтернатива. -webkit-text-stroke рисует реальный штрих по пути глифа и поддерживается текущими браузерами несмотря на его префикс, Он сосредоточен на контуре, поэтому он ест тонкими буквами, и он указан в стандарте совместимости WHATWG, а не в модуле CSS. Для небольших, четких контуров на отображаемом тексте трюк с четырьмя тенями остается наиболее предсказуемым вариантом.
Как вы делаете 3D или экструдированный текст?
Сложите несколько твёрдых теней одного цвета, каждая смещается на один пиксель дальше вниз и вправо. каждая копия добавляет один пиксель глубины, и глаз читает стопку как сторону твёрдой буквы.
Предварительная установка Retro 3D:
text-shadow: 1px 1px 0px #e99537ff, 2px 2px 0px #e99537ff, 3px 3px 0px #e99537ff, 4px 4px 0px #00000040;
Три оранжевых слоя строят трехпиксельную экструзию, а четвертый черный слой с непрозрачностью 25% располагается на один пиксель дальше в качестве контактной тени, которая заземляет буквы. для более глубокой экструзии продолжайте добавлять оранжевые слои со смещениями 4, 5, 6 и перемещайте темный слой к концу. Двенадцать слоев для экструзии 12 пикселей - это нормально для заголовка большого героя.
В предустановке Long Shadow используется та же идея с пробелами и угасающей непрозрачностью:
text-shadow: 1px 1px 0px #00000033, 3px 3px 0px #00000026, 6px 6px 0px #0000001a, 10px 10px 0px #0000000f;
Смещения растут (1, 3, 6, 10), а непрозрачность падает (20%, 15%, 10%, 6%), поэтому тень уходит по диагонали, а не образует твердый блок.
Какой рецепт текстовой тени соответствует какому эффекту?
Вот все восемь предустановок в генераторе, за каждой стоит идея, чтобы вы могли их адаптировать.
| Пресет | Слои | Смещения | Размытие | Идея |
|---|---|---|---|---|
| Мягкий | 1 | 0, 2px | 4px | Тонкая тень с черным оттенком 35%, безопасная для большинства заголовков |
| Жесткий | 1 | 2px, 2px | 0 | Четкая офсетная копия черного цвета 60%, плоский принт |
| Неоновое свечение | 3 | 0, 0 | 7, 14, 28px | Тот же цвет, растущее размытие, светлый на темный |
| Ретро 3D | 4 | Диагональ от 1 до 4px | 0 | Ступенчатые печатные копии плюс слабая контактная тень |
| Контур | 4 | диагонали +/-1px | 0 | Четыре копии, прослеживающие край глифа |
| Эмбосс | 2 | -1px/-1px и 1px/1px | 0 | Белый подсветка вверху слева, темный оттенок внизу справа |
| Огненный огонь | 3 | 0, -1 /-2 /-4px | 4, 10, 18px | Желтый или оранжевый или красный, поднимается вверх |
| Длинная тень | 4 | Диагональ 1, 3, 6, 10px | 0 | Растущий разрыв, угасающая непрозрачность |
Тиснение - это то, что люди неправильно читают. Он объединяет светлую тень вверх и влево с темной тенью вниз и вправо, которая имитирует свет сверху слева, попадая на рельефные буквы. Поменяйте местами два цвета, и текст вместо этого выглядит вжатым в страницу, классический эффект высокой печати. Оба работают только тогда, когда цвет текста близок к цвету фона; в высококонтрастном тексте основные моменты исчезают.
Огонь - единственная предустановка с отрицательными вертикальными смещениями. каждый слой движется дальше вверх и становится все более размытым и красным, поэтому кажется, что тепло поднимается над буквами.
Ущерб ли тень текста читаемости или доступности?
Может, и риск растет с размытием и смещением Тень не меняет контрастного отношения, которое измеряет WCAG, которое рассчитывается между цветом текста и цветом фона.The Минимальный контраст WCAG 2.1 просит 4,5:1 для обычного текста и 3:1 для большого текста, и свечение не помогает вам встретить это на бумаге.
На практике тонкая темная тень за светлым текстом на занятой фотографии облегчает выделение букв, потому что она отделяет края глифов от изображения. тяжелое свечение на маленьком тексте делает обратное: ореол заполняет счетчики букв типа & quot;e & quot; и & quot;a & quot; и слово превращается в mush.
Некоторые рекомендации, которые выдерживают:
- Держите тени текста тела тонкими. Что-то вроде
0 1px 2px rgba(0, 0, 0, 0.3)изобилует. - Сохраните многослойные эффекты для большого отображаемого текста, примерно 32px и выше.
- Проверьте влияние как на светлый, так и на темный фон, если на вашем сайте есть переключатель тем.
- Не полагайтесь на тень, чтобы спасти низкий контраст. сначала исправить цвет текста.
- Проверьте при наименьшем размере курс на телефоне, где тень пропорционально больше.
Что замедляет тень текста и какие ошибки являются распространенными?
Размытие - дорогая часть. каждый размытый слой должен быть растрирован и размыт при каждой перекраске, а стоимость масштабируется с радиусом размытия и количеством текста. The Ссылка MDN на тень текста охватывает синтаксис. о стороне производительности просто рассуждать: трехслойное свечение на одном заголовке дешево, и одинаковое свечение на каждом абзаце длинной статьи, перекрашенное во время прокрутки, является распространенным источником jank на маломощных телефонах.
Ошибки, которые появляются снова и снова:
| Ошибка | Симптом | Исправить |
|---|---|---|
Написание значения спреда, например 0 0 4px 2px red |
Вся декларация игнорируется | Удалить четвертую длину; text-shadow не имеет расширения |
Добавление inset |
Декларация проигнорирована | Не поддерживается текстом; вместо этого используйте более легкий тиснение |
Отрицательное размытие, например. -2px |
Декларация проигнорирована | Размытие должно быть нулевым или положительным |
| Пропущенные запятые между слоями | Декларация проигнорирована, ничего не получается | Отделяйте каждую тень запятой |
| Свечение подрезано по краям | Ореол разрезан по прямой | Родитель имеет overflow: hidden; добавить заполнение |
| Светиться невидимым | Кажется, ничего не происходит | Светлое свечение на светлом фоне; тест на темноте |
Префикс поставщика -webkit-text-shadow |
Безобидно, но бесполезно | Используйте обычное text-shadow; ему не нужен префикс |
Первые три заслуживают напряжения. одна недопустимая часть делает недействительным все объявление, а не только этот слой, поэтому опечатка в четвертом слое двенадцатислойного трехмерного эффекта удаляет все двенадцать. Выход генератора & #39;s всегда действителен, что является одной из причин построить там стек и вставить его.
Когда следует использовать генератор вместо того, чтобы писать тени текста вручную?
Одну мягкую тень быстрее ввести, чем щелкнуть. Все, что имеет три или более слоев, быстрее построить визуально, потому что вы судите об образе, а об образе трудно судить по числам. Генератор также полезен для обучения: выберите предустановку, измените один слой и посмотрите, какая часть эффекта движется.
Генератор Toolz работает полностью в браузере.Предварительный просмотр, список уровней и CSS все вычисляются на странице, ничего не загружается, и он продолжает работать в автономном режиме после загрузки. Это бесплатно, никакой регистрации. копирование CSS засчитывается в суточное пособие на использование, как и другие инструменты на сайте; редактирование и предварительный просмотр не.
Чего он не делает: у него нет em или rem единицы, нет набранных полей с номерами, нет перетаскивания для порядка слоев и нет пользовательского шрифта в предварительном просмотре. Для них скопируйте объявление и настройте его в своем собственном стиле или в инструментах разработки браузера.
Если желаемый эффект представляет собой размытый или перекрашенный элемент, а не тень, CSS-фильтры таких как drop-shadow() а blur() применить к целым элементам, включая изображения. матовые панели за текстом - это работа для генератор стекломорфизмаи мягкие экструдированные кнопки принадлежат генератор нейморфизма. Полный набор визуальных создателей CSS находится на сайте Концентратор инструментов CSS, и Руководство генератора градиента CSS хорошо сочетается с текстовыми эффектами, когда вам нужен градиентный фон за светящимся заголовком.
Работающий пример: читаемый титул героя поверх фотографии
Скажите, что у вас есть белый текст 64px над яркой пляжной фотографией, и буквы продолжают исчезать в песке. цель - разборчивость во-первых, стиль во-вторых.
Начать в инструмент text-shadow с предустановкой Soft: 0px 2px 4px #00000059. На слишком тусклом занятом изображении. Повысьте непрозрачность до 60% и размывайте до 8px, что дает 0px 2px 8px #00000099. Края отделяются от фона, но тонкие штрихи все еще мерцают.
Добавьте второй слой с нулевым смещением, размытием 2px и черным 50%: 0px 0px 2px #00000080. Поскольку вы добавили его вторым, он рисует за первым слоем, но он обнимает край глифа и придает каждому удару тонкий темный край. Результат:
.hero-title {
color: #fff;
font-size: 64px;
text-shadow: 0px 2px 8px #00000099, 0px 0px 2px #00000080;
}
Два слоя, оба дешевые для рендеринга, и название держится на песке, небе и серфинге В телефоне, где курс падает до 36px, те же значения пикселей пропорционально тяжелее; конвертируя в em держит их в ногу (0 0.03em 0.125em при 64px).
