| author | handle | source | date | likes | retweets | replies |
|---|---|---|---|---|---|---|
Ajay Yadav 🎯 |
@ATechAjay |
December 3, 2021 9:54 AM |
12 |
11 |
2 |
💚Day 1️⃣7️⃣ / 1️⃣ 0️⃣0️⃣ days of Master in CSS Design series!
💥Today we going to design a text or any object like neon or glowing design.
❓What is the main logic behind it?
✅ In 2 steps!!
#100DaysOfCode
[#webdev elopment](https://twitter.com/hashtag/webdevelopment)
#CodeNewbie
#webdev
Let me explain👇🧵 pic.twitter.com/MiRoOhhx1S
💚 You can check out all the awesome design series from here.👇
⛔ If you want to add a glow or neon effect on a box, then you have to use the "box-shadow" property.
⛔But if you want to add a neon effect on a text then have to use the "text-shadow" property.
✅ In my case, I'm designing font awesome icons, which means all icons are text.
Syntax:
📌 text-shadow : x - offset || y - offset || blur value || color
📌 box-shadow : x - offset || y - offset || blur value || color
1️⃣ First of all, we have to design white glowing effects to the outer edge of the icon.
✅ To design like this effect we could increase the blur values of the text-shadow.
2️⃣ After that, we can add the same values with different colors for this blue effect. pic.twitter.com/3dmNEhizaJ
✅ To design like this effect we could increase the blur values with different colors of the text-shadow.
codepen: codepen.io/atechajay/pen/…