Домой / Рецепты CSS / Эффект неонового текста с помощью CSS
Эффект неонового текста с помощью CSS

Эффект неонового текста с помощью CSS

Набор разноцветных эффектов неонового текста, которые созданы благодаря использованию только CSS свойств.

Используя свойство text-shadow можно создавать неоновый текст в любых цветовых гаммах, изменяя только цвет и параметры тени.

Демо

HTML

<h1 class="pink">neon pink</h1>
<h1 class="red">neon red</h1>
<h1 class="green">neon green</h1>
<h1 class="blue">neon blue</h1>
<h1 class="yellow">neon yellow</h1>

CSS

@font-face {
 font-family: 'Open Sans';
 font-style: normal;
 font-weight: 700;
 src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzKRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}
body {
 background: #000;
 font-family: 'Open Sans', sans-serif;
}
h1 {
 text-transform: uppercase;
 text-align: center;
 font-weight: bold;
 font-style: italic;
 font-size: 100px;
}
h1.pink {
 color: #ffffff;
 text-shadow: 0 0 5px #ffffff, 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 40px #ff00de, 0 0 80px #ff00de, 0 0 90px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
}
h1.red {
 color: #ffffff;
 text-shadow: 0 0 5px #ffffff, 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 40px #ff0000, 0 0 80px #ff0000, 0 0 90px #ff0000, 0 0 100px #ff0000, 0 0 150px #ff0000;
}
h1.green {
 color: #ffffff;
 text-shadow: 0 0 5px #ffffff, 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 40px #00ff00, 0 0 80px #00ff00, 0 0 90px #00ff00, 0 0 100px #00ff00, 0 0 150px #00ff00;
}
h1.blue {
 color: #ffffff;
 text-shadow: 0 0 5px #ffffff, 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 40px #0000ff, 0 0 80px #0000ff, 0 0 90px #0000ff, 0 0 100px #0000ff, 0 0 150px #0000ff;
}
h1.yellow {
 color: #ffffff;
 text-shadow: 0 0 5px #ffffff, 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 40px #ffff00, 0 0 80px #ffff00, 0 0 90px #ffff00, 0 0 100px #ffff00, 0 0 150px #ffff00;
}
Набор разноцветных эффектов неонового текста, которые созданы благодаря использованию только CSS свойств. Используя свойство text-shadow можно создавать неоновый текст в любых цветовых гаммах, изменяя только цвет и параметры тени. HTML CSS @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzKRDOzjiPcYnFooOUGCOsRk.woff) format('woff'); } body { background: #000; font-family: 'Open Sans', sans-serif; } h1 { text-transform: uppercase; text-align: center; font-weight: bold; font-style: italic; font-size: 100px; } h1.pink { color: #ffffff; text-shadow: 0 0 5px #ffffff, 0 0&hellip;

Обзор

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

Оценка

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

Рейтинг: 3.96 ( 6 голосов )
97

2 комментария

  1. Аватар
    провидец

    в html не работает

    • Аватар

      Оно и не должно работать в html. В html пишется только структура страницы, к которой в последствии подключается страница стиля css.

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

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

*