WordPress Elementor kullanıcıları için kısa ama etkili bir eğitim videosu hazırladım. 🎬
Bu videoda, sadece birkaç satır CSS kodu ile parlayan neon yazı efekti nasıl oluşturulur adım adım gösteriyorum.
Karanlık arka planlar üzerinde oldukça şık duran bu efekt sayesinde sitenizdeki başlıkları veya sloganları çok daha dikkat çekici hale getirebilirsiniz. 💡
https://www.youtube.com/watch?v=ebO5q4CYTl4
/*neon yazı efekti*/
:root {
--glow: #03bcf4;
}
selector h2 {
text-shadow: 0 0 10px var(--glow), 0 0 20px var(--glow), 0 0 40px var(--glow),
0 0 80px var(--glow), 0 0 160px var(--glow);
}/*Parlama ve yanıp sönme efekti*/
:root {
--dark: #0d1c45;
--white: #ffffff;
--glow: #03bcf4;
}
selector h2 {
animation: animate 5s linear infinite;
}
@keyframes animate {
0%,
18%,
20%,
50.1%,
60%,
65.1%,
80%,
90.1%,
92% {
color: var(--dark);
text-shadow: none;
}
18.1%,
20.1%,
30%,
50%,
60.1%,
65%,
80.1%,
90%,
92.1%,
100% {
color: var(--white);
text-shadow: 0 0 10px var(--glow), 0 0 20px var(--glow),
0 0 40px var(--glow), 0 0 80px var(--glow), 0 0 160px var(--glow);
}
}