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

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

Если вы ищете генератор текстовых теней CSS, инструмент CSS генератора текстовых теней или генератор теневых текстов CSS, на выходе получается одно и то же объявление. щелкните жесткий предустановку, и в поле "Созданный CSS" отображается тень текста: 2px 2px 0px #00000099; это один черный слой с непрозрачностью 60%, с непрозрачностью, записанной в последние две шестизначные цифры. Нажмите "Неоновое свечение", и вы получите три слоя, разделенных запятыми, размытыми 7px, 14px и 28px. Копируйте CSS копирует всю строку, включая точку с запятой.

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

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

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