Домой / Рецепты CSS / Неоновый текст с помощью CSS
Неоновый текст с помощью CSS

Неоновый текст с помощью CSS

Красивый пример создания эффекта неонового текста.

Неоновый текст реализован с помощью CSS свойства text-shadow.

Демо

HTML

<link href='http://fonts.googleapis.com/css?family=Dosis:600' rel='stylesheet' type='text/css'>
<p>PORTLAND</p>

CSS


body {
 background: #111;
 font-family: 'Dosis', Helvetica, Arial, sans-serif;
 font-weight: 600;
}

p {
 text-transfrom: uppercase;
 color: white;
 font-size: 6em;
 text-align: center;
 animation: neonGlow 2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

@keyframes neonGlow {
 0% {
 text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.8), 0 0 22px rgba(255, 255, 255, 0.8), 0 0 40px rgba(66, 220, 219, 0.8), 0 0 60px rgba(66, 220, 219, 0.8), 0 0 80px rgba(66, 220, 219, 0.5), 0 0 100px rgba(66, 220, 219, 0.5), 0 0 140px rgba(66, 220, 219, 0.5), 0 0 200px rgba(66, 220, 219, 0.5);
 }

100% {
 text-shadow: 0 0 2px rgba(255, 255, 255, 0.8), 0 0 8px rgba(255, 255, 255, 0.8), 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(66, 220, 219, 0.8), 0 0 30px rgba(66, 220, 219, 0.8), 0 0 40px rgba(66, 220, 219, 0.8), 0 0 50px rgba(66, 220, 219, 0.5), 0 0 80px rgba(66, 220, 219, 0.5);
 }
}


Красивый пример создания эффекта неонового текста. Неоновый текст реализован с помощью CSS свойства text-shadow. HTML CSS body { background: #111; font-family: 'Dosis', Helvetica, Arial, sans-serif; font-weight: 600; } p { text-transfrom: uppercase; color: white; font-size: 6em; text-align: center; animation: neonGlow 2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); } @keyframes neonGlow { 0% { text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.8), 0 0 22px rgba(255, 255, 255, 0.8), 0 0 40px rgba(66, 220, 219, 0.8), 0 0 60px rgba(66, 220, 219, 0.8), 0 0…

Обзор

Проголосуйте за урок

Оценка

Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

Рейтинг: 4.4 ( 2 голосов )
100

Оставить комментарий

Ваш email не будет опубликован.

*