Create a Stunning Glassmorphism Effect in CSS

Подписаться 9 тыс.

Просмотров 4,1 тыс.

50% 1

A step-by-step guide to creating immersive background effects and beautiful gradient headlines using backdrop-filter and background-clip CSS properties.
You will also learn how to animate gradient backgrounds, pick colors that connect your UI with the background images-and how @supports at-rule can help you ensure everything works in browsers that don't support some CSS properties.
Codepen Demo: 🔗 codepen.io/ZoranJambor/pen/Ex...
Links:
🔗 backdrop-filter: developer.mozilla.org/en-🔗 US/docs/Web/CSS/backdrop-filter
🔗 background-clip: developer.mozilla.org/en-US/d...
🔗 filter: developer.mozilla.org/en-US/d...
🔗 @supports: developer.mozilla.org/en-US/d...
🔗 Sip color picker: sipapp.io/
Timestamps:
00:00 Introduction
00:25 Demo setup
02:50 Creating glassmorphism effect
05:35 Adding gradient background to the button
07:26 Adding animated hover effect to the button
10:15 Adding gradient to the headline
12:05 Progressive enhancement using @supports at-rule
15:42 Conclusion
Subscribe to CSS Weekly Newsletter:
💌 css-weekly.com/
Keep up-to-date with CSS Weekly:
👉 Twitter: / cssweekly
👉 Instagram: / cssweekly
👉 Facebook: / cssweekly
Keep up to date with what I'm up to:
🔗 Blog: zoranjambor.com
👉 Twitter: / zoranjambor
👉 LinkedIn: / zoranjambor
- Zoran Jambor

Наука

Опубликовано:

6 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 21

@ViorelMocanu 2 года назад

Great tutorial! And newsletter! :) Keep up the great work!

@CSSWeekly 2 года назад

Thank you so much, Viorel! It means a lot! 🙏

@natalieklinke8061 2 года назад

I have to say thank you again. I didn't know the @supports rule and I were amazed learning about it. Hopefully we will see more content from you!

@CSSWeekly 2 года назад

Thank you, Natalie! I'm delighted you learned something! 🙂 Of course, I intend to publish something new every week.

@nathan_wind 2 года назад

Thank you for the well done video, you explained it all very well, and I loved seeing the filter stuff! Hope to see more great videos from you :)

@CSSWeekly 2 года назад

Thank you so much, Nathan! It means a lot! 🙏 I will be creating new videos weekly! :)

@HonestMarketingTips 2 года назад

Great video..as a backend developer I really find these little tips useful . Thanks

@CSSWeekly 2 года назад

Thank you. I'm delighted to hear you found it useful, Zvonko! 🙂

@valnuke 2 года назад

good job

@CSSWeekly 2 года назад

Thank you so much! 🙏

@soymuymuy 2 года назад

My man, I like your content. I do "listen" to videos more than I watch them as being a pro-dev with 20+ years experience, I can get most of the "information" just by listening to you as I drive or washing dishes or whatever I'm doing. That being said, the request I have (and this is something that will help your channel grow) is use a better mic / audio setup so that your voice comes through loud and clear and without room echo. Being someone with a slight accent (no offense intended), the sub-par audio quality makes it a little more difficult to understand you than I would hope. I'm just trying to help, your content is good and you should have more followers :)

@CSSWeekly 2 года назад

Hey Rick, thank you so much for the kind words and the generous advice; I really appreciate it. :) The mic was actually my most significant investment in the current setup (Rode VideoMic Pro+), but I'll definitively see if I can do something about it to improve this. And I certainly need to work on my pronunciation, so hopefully, I will get better at this with time. :)

@soymuymuy 2 года назад

@@CSSWeekly wow if that's the mic you have I'm surprised. Maybe look in to a dynamic range mic like the rode podmic. You'll need to keep it close to your mouth for that style but it should ignore room accoustics better.

@soymuymuy 2 года назад

@@CSSWeekly I'm not sure what kind of I/o that mic has but podmic has an xlr interface so you would need something like the scarlet solo USB xlr interface. You would probably need to record and muex the audio and video direct to the PC instead of the camera storage or just mix them together later in post. Alternatively you could put sound foam around the room at least off camera as to not mess with your asthetic and just try to populate the wall behind you with more decor that can help absorb sound bounce. Condenser mics like what you have pick up everything so you have to fight with acoustics way more than. With a dynamic mic that speak directly in to

@CSSWeekly 2 года назад

Thank you so much for the insight, Rick! 🙏 A new mic with the xlr interface is definitively outside of my budget right now, but with time I will invest more-and this will certainly be among the first things to consider. For now, I hope sound foam and vocal exercises can help at least a bit.

@natalieklinke8061 2 года назад

Thank you for this cool tutorial. One question regarding the CSS for the Button. You use display : block, width : fit-content. What is the benefit to use this declaration instead of just display: inline-block?

@CSSWeekly 2 года назад

You're right, Natalie, inline-block would work just as well. I simply used this as an opportunity to demonstrate how "fit-content" works. :)

@natalieklinke8061 2 года назад

@@CSSWeekly Ah ok, I was wondering if I missed something. As wasn't aware of fit-content - thanks for sharing!

@CSSWeekly 2 года назад

@@natalieklinke8061 Thank you for watching, Natalie! 🙂

@LukaPeharda 2 года назад

Great content! I have just one question, why did you use "display:block" and "width:fit-content" on the button when you could have just used "display:inline-block"? What am I missing here? :-)

@CSSWeekly 2 года назад

Thanks, Luka! You're right, inline-block would work just as well. I simply used this as an opportunity to demonstrate how "fit-content" works. :)