CSS-генератор теней текста

Генератор теней CSS — это визуальный редактор для свойства CSS Text-Shadow. Вы настраиваете горизонтальное смещение, вертикальный смещение, радиус размытия, цвет и непрозрачность с помощью слайдеров и смотрите эффект рендеринга в образце текста, затем копируете точный CSS. Вместо того, чтобы угадывать значения пикселей и обновлять свою страницу, вы формируете тень напрямую и читаете код, который она создает.

Свойство text-shadow проще, чем box-shadow - у него нет радиуса расширения и нет ключевого слова inset - но наслоение - это то, где оно становится мощным. одно объявление может укладывать несколько теней, каждая со своими смещениями, размытием и цветом. Укладка слоев - это то, как вы строите неоновые свечения, жесткие контуры, ретро-трехмерные надписи, эффекты высокоточного тиснения и длинные плоские тени. Написание их вручную - это скрипка, поэтому этот инструмент управляет слоями и выводит допустимое по спецификации, разделенное запятыми объявление в правильном порядке рисования.

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

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