Продолжим экспериментировать с различными текстовыми эффектами и создадим “огненный” текст используя возможности CSS.

огненный текст

Код класса:

.fire-text {

text-align: center;

margin: 200px auto;

font-size: 120px;

color: #fff;

text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;

}

За эффект огня отвечает аттрибут text-shadow. Смело поэкспериментируйте с цветами, чтобы понять, за что отвечает конкретный параметр.

Демо доступно на Codepen.

Опубликовано

Похожие записи

Подробнее

ArtsLab

Блог для тех, кто интересуется разработкой сайтов, веб-дизайном и новыми событиями в интернете. В моем блоге Вы найдете записи на различные околокомпьютерные темы, обзоры сервисов и новинок, статьи по кодингу, советы, скрипты, темы и хаки для wordpress, уроки phostohop и многое другое.

4gray artslab artslabinfo