| Kosten | Вторник, 29 Октября 2019, 22:18 | Сообщение 1 |
| Приятный 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%);
}
}
Демонстрация
| | Страна: (RU) |
| |
| Kosten | Четверг, 31 Октября 2019, 20:27 | Сообщение 2 |
|
| Неоновый текстовый эффект
See the Pen
Neon Text Effect by Kocsten (@kocsten)
on CodePen.
| | Страна: (RU) |
| |
| Kosten | Четверг, 31 Октября 2019, 20:27 | Сообщение 3 |
|
| Мерцающий неоновый текст
See the Pen
Shimmering neon text by Kocsten (@kocsten)
on CodePen.
| | Страна: (RU) |
| |
| Kosten | Четверг, 31 Октября 2019, 20:29 | Сообщение 4 |
|
| Неоновый текст
See the Pen
Fancy neon effect by Kocsten (@kocsten)
on CodePen.
| | Страна: (RU) |
| |
| Kosten | Четверг, 31 Октября 2019, 20:31 | Сообщение 5 |
|
| Причудливый неоновый эффект CSS
See the Pen
Neon Text by Kocsten (@kocsten)
on CodePen.
| | Страна: (RU) |
| |
