Огненный текст без фотошопа

Пятница, 18 Марта 2016 г. 19:21 + в цитатник

Цитата сообщения Вера_Паничкина

Прочитать целиком В свой цитатник или сообщество!

Огненный текст без фотошопа

Огненный текст
без фотошопа

Автор поста

Егорова Таня
Сегодня я расскажу, как сделать эффект огня на буквах. Это очень легко. Выбираете нужное "пламя" в рамке ниже. Копируете код из окошечка и вставляете вместо моих слов "Здесь будет Ваш текст" свой текст. Если захотите оформить таким огненным текстом стихи, то оставляйте между строк расстояние. Лучше всего такой текст смотрится на темных фонах. На светлом яркость теряется.
На фото ниже выделены параметры, которые можно менять в коде.
ск (700x133, 30Kb)

ТЕКСТ 1

<div style="font-size: 20px;color:#000000;font-family: Verdana;text-shadow: rgb(255, 255, 0) 0px -1px 2px, rgb(255, 204, 0) -1px -3px 3px, rgb(255, 153, 0) -1px -5px 4px, rgb(255, 102, 0) -1px -7px 5px, rgb(255, 51, 0) 0px -9px 6px, rgb(255, 0, 0) 4px -11px 7px; ">Здесь будет Ваш текст</div>

ТЕКСТ 3

<div style="font-size: 20px;color: #fff799; font-family: Verdana; margin: 10px auto; padding: 70px 0pt 0pt; text-shadow: 0pt 0pt 10px rgb(254, 252, 201), 5px -5px 15px rgb(255, 255, 0), -10px -10px 20px rgb(255, 174, 52), 10px -20px 25px rgb(236, 118, 12), -10px -30px 30px rgb(205, 70, 6), 0pt -40px 35px rgb(151, 55, 22), 5px -45px 40px rgb(69, 27, 14); text-transform: uppercase;">Здесь будет Ваш текст</div>

ТЕКСТ 2

<div style="font-size: 20px;color:#3f2305;font-family: Verdana;text-shadow: rgb(255, 255, 0) 0px -2px 4px, rgb(255, 204, 0) -2px -6px 6px, rgb(255, 153, 0) -2px -10px 8px, rgb(255, 102, 0) -2px -14px 10px, rgb(255, 51, 0) 0px -18px 12px, rgb(255, 0, 0) 2px -22px 14px; ">Здесь будет Ваш текст</div>

ТЕКСТ 4

<div style="font-size: 20px;color: #ffcc66; font-family: Verdana; margin: 10px auto; padding: 70px 0pt 0pt; text-shadow: 0pt 0pt 20px rgb(254, 252, 201), 10px -10px 30px rgb(254, 236, 133), -20px -20px 40px rgb(255, 174, 52), 20px -40px 50px rgb(236, 118, 12), -20px -60px 60px rgb(205, 70, 6), 0pt -80px 70px rgb(151, 55, 22), 10px -90px 80px rgb(69, 27, 14); text-transform: uppercase;">Здесь будет Ваш текст</div>

Из блога Егоровой Татьяны

Удачи!
еще разные уроки

Серия сообщений "генератор текста":
Часть 1 - Анимированные надписи
Часть 2 - Генераторы красивых шрифтов по алфавиту (очень много)
Часть 3 - Огненный текст без фотошопа
Часть 4 - Генератор печатей
Часть 5 - Сайти-генератор!Пишем красиво, блестяще, под наклоном
Часть 6 - Анимированный машинописный текст
Часть 7 - Генератор оригинальных надписей
Часть 8 - Генератор текста и кнопок