• Страница 1 из 1
  • 1
Форум » Веб-разработка » Скрипты для сайтов » Эффект неонового текста при помощи CSS (Эффект неонового свечения текста с помощью CSS)
Эффект неонового текста при помощи CSS
Kosten
Дата: Вторник, 2019-10-29, 22:18 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25086
Награды: 57


Приятный CSS текст, который идет в неоновом эффекте, где все использовано на HTML и CSS. Свойство CSS3 text-shadow чрезвычайно полезно для создания множества различных текстовых эффектов, самый крутой из которых, вероятно, является эффектом, который заставляет текст выглядеть светящимся. В сочетании с некоторыми яркими цветами, применяемыми к тени текста, эффект свечения становится эффектом неонового свечения.



HTML

Код
<div class="container">
  <div class="blue-neon">
    <div class="red-neon">ZORNET.RU</div>
  </div>
</div>

CSS

Код
.container {
  min-width: 1000px;
  height: 380px;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: flick 0.1s ease-in-out infinite;
}

.blue-neon {
  display: none;
  width: 600px;
  height: 240px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  box-shadow:
    0 0 2px 4px rgba(200,230,255,0.5),
    0 -2px 2px 3px rgba(200,230,255,0.5) inset,
    0 0 2px 10px rgba(100,150,255,0.9),
    0 0 2px 7px rgba(100,150,255,1) inset,
    0 0 12px 13px rgba(0,50,255,0.9),
    0 0 12px 11px rgba(0,50,255,0.7) inset,
    0 8px 30px 18px rgba(0,0,0,0.8),
    0 8px 25px 12px rgba(0,0,0,0.7) inset;
}
.red-neon {
  padding-top: 20px;
  text-align: center;
  color: rgba(255, 232, 50, 0.9);
  text-shadow:
    0 0 5px rgba(255,245,0,1),
    0 0 28px rgba(255,44,0,0.9),
    0 8px 38px black,
    0 8px 10px black,
    0 2px 12px black,
    0 0 50px rgba(255,120,0,0.5),
    0 0 24px rgba(255,255,255,0.8);
  -webkit-text-stroke: 1px rgba(255, 160, 0, 0.45);
}

@keyframes flick {
  0%, 100% {
    background-image: radial-gradient(
    rgba(255,190,0,0.4) 0%,
    rgba(70,140,255,0.2) 52%,
    transparent 70%);
  }
  40% {
    background-image: radial-gradient(
    rgba(255,190,0,0.4) 0%,
    rgba(70,140,255,0.2) 50%,
    transparent 68%);
  }
}

Демонстрация
Прикрепления: 8450609.jpg(46.6 Kb)
Страна: (RU)
Kosten
Дата: Четверг, 2019-10-31, 20:27 | Сообщение 2
Оффлайн
Администраторы
Сообщений:25086
Награды: 57


Неоновый текстовый эффект


See the Pen
Neon Text Effect
by Kocsten (@kocsten)
on CodePen.


Страна: (RU)
Kosten
Дата: Четверг, 2019-10-31, 20:27 | Сообщение 3
Оффлайн
Администраторы
Сообщений:25086
Награды: 57


Мерцающий неоновый текст


See the Pen
Shimmering neon text
by Kocsten (@kocsten)
on CodePen.


Страна: (RU)
Kosten
Дата: Четверг, 2019-10-31, 20:29 | Сообщение 4
Оффлайн
Администраторы
Сообщений:25086
Награды: 57


Неоновый текст


See the Pen
Fancy neon effect
by Kocsten (@kocsten)
on CodePen.


Страна: (RU)
Kosten
Дата: Четверг, 2019-10-31, 20:31 | Сообщение 5
Оффлайн
Администраторы
Сообщений:25086
Награды: 57


Причудливый неоновый эффект CSS


See the Pen
Neon Text
by Kocsten (@kocsten)
on CodePen.


Страна: (RU)
Форум » Веб-разработка » Скрипты для сайтов » Эффект неонового текста при помощи CSS (Эффект неонового свечения текста с помощью CSS)
  • Страница 1 из 1
  • 1
Поиск: