| author | handle | source | date | likes | retweets | replies |
|---|---|---|---|---|---|---|
Ajay Yadav 🎯 |
@ATechAjay |
December 30, 2021 1:03 PM |
19 |
9 |
2 |
💚 Day 4️⃣4️⃣/ 1️⃣0️⃣0️⃣ Master in CSS Design series!
💥Today we going to design a signUp form using this awesome glassmorphism design.
❓What's the main logic behind it with the codepen link?
#100DaysOfCode
[#webdev elopment](https://twitter.com/hashtag/webdevelopment)
#webdev
Let me explain! pic.twitter.com/JBXqasGSvq
📌This design is created using two CSS properties.
1️⃣ Background color 2️⃣ Backdrop-filter with "blur" value.
👉NOTE: The backdrop is also known as background.
→ So, first of all, we have to set the background color of the "signup" form with low intensity.
→ As well as we have to set the gaussian blur with some low values. pic.twitter.com/JwUCXtkMnx
→ After that, I am going to add the background color of "h3" elements that is "sign up".
→ Here, I increased the alpha value to 0.2!
→ And, the same value we have used in the "button" element as well. pic.twitter.com/jpr3bL2z5G
→ When we hover over the button the alpha value increased to 0.3!
-- That's All😍💚 pic.twitter.com/S8bsaH7GuY
→ codepen link: codepen.io/atechajay/pen/…