Text Shadow Generator
CSS text shadow
CSS text shadow Запускается локально в вашем браузере
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.30);
About the
Генератор текстовых теней устанавливает смещение, размытие, цвет и непрозрачность тени позади текста с помощью предварительного просмотра в реальном времени и CSS. В отличие от box-shadow, он не имеет значения расширения, что привлекает людей: единственный способ сделать тень текста тяжелее — объединить несколько теней в одном объявлении. Это наиболее полезно для разборчивости, когда на фотографии наносится легкая темная тень позади светлого текста, и она никогда не должна делать текст читабельным, потому что она исчезает в момент изменения фона.
Where people use the
- Добавление тонкой тени, чтобы подпись читалась поверх фотографии.
- Создание эффекта прессованного или выгравированного заголовка.
- Создание ретро- или неоновой текстовой обработки.
- Тестируем, насколько тяжелой должна быть тень, чтобы она выглядела дешево.
How to use the
- 1
Установите смещения
Смещение X перемещается вправо, смещение Y перемещается вниз. Смещение в один или два пикселя воспринимается как глубина; все большее начинает выглядеть как тень.
- 2
Установить размытие
Размытие смягчает края. Zero дает твердую копию текста, таким образом создаются контурные и ретро-эффекты.
- 3
Выберите цвет и непрозрачность
Темному тексту на светлом фоне нужна светлая тень, и наоборот. Сохраняйте непрозрачность низкой, если не хотите добиться очевидного эффекта.
- 4
Скопируйте CSS
Правило включает в себя цвет RGBA, готовый к вставке.
- 5
Сложите тени, если вам нужно больше веса
Добавьте в таблицу стилей вторую тень, разделенную запятой. Это единственный способ сделать тень текста толще, поскольку расширения нет.
Советы и лучшие практики
- Меньше значит больше: один или два пикселя при низкой непрозрачности лучше сильного размытия.
- Никогда не полагайтесь только на тень для обеспечения доступности; исправьте контраст внизу.
- Помните, что свойство наследуется, поэтому примените его к элементу, который вы имеете в виду.
Часто задаваемые вопросы
Почему нет значения спреда?
Потому что text-shadow его не поддерживает. Его синтаксис: смещение X, смещение Y, только размытие и цвет. Чтобы имитировать распространение, вы складываете несколько одинаковых теней с немного разными смещениями.
Могу ли я использовать его, чтобы сделать текст читаемым поверх изображения?
Только как дополнение. Тень полезна на полях, но неэффективна в загруженных областях и не учитывается при определении коэффициента контрастности WCAG, который измеряется по отношению к цвету фона. Добавьте сетку или сплошную панель, если разборчивость действительно имеет значение.
Как обвести текст?
Сложите четыре тени на расстоянии плюс и минус один пиксель в каждом направлении с нулевым размытием. Это создает эффект контура без необходимости -webkit-text-stroke, который поддерживается не везде.
Это замедляет страницу?
Одна статическая тень почти ничего не стоит. Анимация тени текста или применение большой размытой тени к большому количеству текста — вот где появляется стоимость перерисовки.
Наследуется ли он дочерними элементами?
Да. Тень текста наследуется, поэтому установка ее в контейнере применяет ее к каждому потомку с текстом, что иногда удивляет.