3 Level Glassmorphism Design In CSS | CSS Tutorial

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

Просмотров 70 тыс.

50% 1

In this video, I will introduce to everyone 3 Level Glassmorphism Design In CSS. in the topic CSS Tutorial. glassmorphism design is a form of design that creates a see-through effect when two elements overlap each other. There are many levels of creating glassmorphism in CSS, so which level are you using it at? This video will explain and explain. Upgrade your CSS level.
Steps - By Steps:
00:00 What is Glassmorphism Design?
01:08 Level 1
01:45 Level 2
03:27 Level 3
05:04 Supported browsers
-----
Hello everyone, I'm creating a lot of new projects every day and sharing them 😍, including things you'll love to know about javascript and web Developer, Designer. Subscribe to the channel so you don't miss it ✅.
#css #html #javascript
-----
Theme VsCode I'm Using: • Create Your Own VSCode...
Featured video series
React Js Tutorial: • React JS
Design Slider - Carousel web: • Design Slider - Carous...
E-Commerce Web Coding: • E-Commerce Website Code
Design Parallax SCrolling Effect: • Reponsive Parallax Scr...
Web Applycation Code: • Web Application Code
Javascript Tutorial: • Javascript Tutorial
CSS Tutorial: • CSS Tutorial
Many other impressive videos: / @lundeveloper
Contact With me:
Instagram: / lundev.web
Email: hohoang.dev@gmail.com
Buy me a cup of coffee by clicking the thanks button on any video. Thank you very much for your support 😍.
Here, I share all my knowledge about Developer and Web Design including languages such as HTML, CSS, SASS, Javascript, Vue, React, Bootstrap, Tailwind along with clean code techniques and UI UX Design.

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

20 июн 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@Alosage. 24 дня назад

Mr Beast AI voice is a horrible choice.....

@SOMEONE-eq5bu 18 дней назад

Agreed

@mackit 11 дней назад

It’s like listening an alien pretending to be a human

@J_u_r_i 8 дней назад

lol i didnt even noticed 😂

@kadenhansen 7 дней назад

Not to mention illegal.

@iorg96 7 дней назад

Guys.... I can't hear sh*t !!! tf are u taking about ?????

@amndev94 21 день назад

Just a note for young developers : if you're work is to develop big web apps for clients, you dont need to learn these (coming from a full stack developer). Young designers: learn everything from this guy.

@p.cnunes7098 17 дней назад

yep, its a sad reality that the highest paying jobs are the most boring LOLOL and unless its a game website... people praise simplicity

@Aviation_4D 13 дней назад

dude! wanna connect? i am a beginner full stack dev. need some guidance/directions.

@thecrusader.25225 11 дней назад

@@Aviation_4DI'm a beginner too. Wanna make projects together?

@Aviation_4D 11 дней назад

@@thecrusader.25225 do you use discord?

@Aviation_4D 11 дней назад

@@thecrusader.25225 sure, let's connect.

@d3manify 24 дня назад

I can suggest adding something like a "border: 2px solid rgba(255, 255, 255, 0.25)" for niceer border and "box-shadow: 0 0px 80px 0 rgba(85, 127, 173, 0.37)". Values depend on the picture, but the idea is clear ;)

@Ikmat 27 дней назад

excellent! the info's helping a lot for the Glassmorphism Design

@whyisthiscodenotworking 25 дней назад

The Mr beast ai sound, The sound effects in the middle of video, The video editing, And the presentation, Code clarity Everything's looking good ! You just earned a sub 🔥🔥🔥

@kneel.downnn 2 дня назад

Yup that was excellent!

@hdlrpnzr 27 дней назад

cool, thanks for the tip

@lundeveloper 27 дней назад

😍😍😍

@manuelcastillo7623 13 дней назад

Oh I’m lucky today, I’m discover you!! I feel like Cristobal Colón now XD nice video!

@lundeveloper 13 дней назад

Thank you so much 😍😍😍

@irwankaryantotandek6058 13 дней назад

Ok, subscribed!

@marketdilemma 4 дня назад

Heavy editted

@sunnymeghrajani5412 16 дней назад

Interesting😃👍

@Tofu-it8mm 16 дней назад

You got a new Subscriber 😇 Nice work dude.

@lundeveloper 16 дней назад

Geat, Thank you so much ❤️❤️

@somarjaber1275 14 дней назад

You are a legend

@lundeveloper 13 дней назад

Thank you so much bro 🔥🔥

@FlavioRicardoDesign 12 дней назад

About the color codes, you can use the HEX color codes too, you just need add the fourth octet, that's represent the alpha channel, like this: #ffffff80, it's same that's rgba(255,255,255,128)

@Ayush-_-007 16 дней назад

Great work brother... promise you that i will give you atleast 100 more subs (every one from my class)

@lundeveloper 16 дней назад

Wow Tha k you so much brother 😍😍

@paulopma 21 день назад

Following because of the sudden violin notes 😆

@lundeveloper 21 день назад

Next time I will play the violin a lot to get more people to follow me 🤣

@wireinet 7 дней назад

Cool! Thanks! One question (not for theme of this video) --- how you create rainbow active tab in vs code? and gradient in the css rules? Looks great!! Thanks for video! Love Glassmorphism!

@lundeveloper 7 дней назад

You will find the answer in the description of this video

@XCanG 4 дня назад

If you gonna use this backdrop-filter, then you don't need to convert any colors, just use #rrggbbaa or short #rgba notation. And for the future it was a bad recommendation to suggest rgba, because future syntax use just rgb / hsl / hsb / lab / lch / _etc._ like that: rgb(255 255 255 / 30%) or rgb(0 0 0 / .3) This is recommended approach for the future. And when you don't need alpha, just close bracket after 3 numbers.

@TiamiyuAbdulsalam 13 дней назад

This guy is not from planet earth, You are so great, Your presentation is Top-notch.

@Fnydo 26 дней назад

Tutorial for creating website like you used.

@user-rb3sw3ku6t 27 дней назад

Very cool! Thanks!

@lundeveloper 27 дней назад

I'm glad it's useful 😍😍

@nustaniel 8 дней назад

Nice video, but man that AI voice is grating. It really hurts my ears. Some constant little sound-hissing in the higher frequencies.

@lundeveloper 27 дней назад

Does anyone know how to this code but don't know what it's called? 🤭

@thehourseman 27 дней назад

i know because i this in every website

@petergrijalvagarcia1241 26 дней назад

Damn... The algorithm finally doing some good shit. Nice style u earned a sub 🤙🏻 Thanks👌🏻

@prathamdhas4363 12 дней назад

What is name of background music you used in between the video

@Brechtvdh 20 дней назад

The -webkit- should go before the regular in your code. Or am i stupid?

@hoa-moc-lan3048 27 дней назад

What theme do you use for vscode? I find it very beautiful

@venkateshmist819 19 дней назад

Plz tell me

@abcdabcd8605 18 дней назад

I think he had posted a video regarding that

@techwake360 27 дней назад

Awesome

@lundeveloper 27 дней назад

Thank you so much 😍

@jmg9509 26 дней назад

Is that Mr.Beasts voice? Lmaooo

@DaysOfUIUX 21 день назад

Doing daily UIUX, at day 1

@p.cnunes7098 17 дней назад

Tip from a Fullstack dev(with a job)..... choose 1 Fullstack 4-10 hour long tutorial in react or nextJS... finish it then make it better, work on it for a couple weeks, make it a decent project, make it your own... then choose another 4-10 hour long tutorial ... FULLSTACK apps .... in 6 months you will be proficient in an industry level framework and language(typescript) .....

@NgocNguyen-bh3qf 21 день назад

Nice vid, btw are you a Vietnamese? :)

@lundeveloper 21 день назад

That's right, hello countryman ^^

@srijansagar1250 19 дней назад

TRULY A LUNDEV

@rahulkumargautam3358 10 дней назад

using backdrop-filter: blur() also makes the content a little bit blur. I don't use these for this reason.

@spacemanXVI. 10 дней назад

What do you use instead?

@rahulkumargautam3358 10 дней назад

@@spacemanXVI. I used to create pseudo element for backgrounds and then use backdrop filter on it. This gives much clearer and better result.

@MdRifatAhmedMohammadNaiem 11 дней назад

I was wondering, why MrBeast started making coding related video and the comments cleared it out 🤣

@vedbhanushali608 9 дней назад

wow beautiful thank you sir.

@lundeveloper 9 дней назад

Thank you so much 😍😍

@theeanon 7 дней назад

So you guys aren't gonna talk about his voice😂

@CodeingWithHadi 16 дней назад

Everything's looking good ! You just earned a sub because Everything is just crazy good sound effect in the middle of the video make it more Intresting

@lundeveloper 16 дней назад

Thank you so much bro 😍❤️

@felix_co 21 день назад

You can add transparent to hex #colors, add level at the end, like #ffffff40 or #dddddd20...

@lundeveloper 20 дней назад

Thank you 😍😍

@p.cnunes7098 17 дней назад

text-blue-500/30 .... done, tailwind CSS is king

@gvsjayanth5671 4 дня назад

Read it as an Indian Heck of a channel name

@DetectiveNoir_ 24 дня назад

I see a Tailwind logo on Css file 👀

@mdkawsarali8247 26 дней назад

It is a good video

@muchis 26 дней назад

good enough without the tiktok voice

@kitchentaste8705 17 дней назад

please i am new to VS CODE AND I RALLY LIKE URR R VS THEEMEE PLEASE SAY HOW TO DOWNLOAD

@bachnguyen2367 16 дней назад

i see, ưepkit :))))

@lundeveloper 15 дней назад

Ồ yé :)))

@bachnguyen2367 13 дней назад

@@lundeveloper tôi cứ nghĩ đây là kênh nước ngoài cho đến khi xem được vid này :V

@lundeveloper 13 дней назад

@@bachnguyen2367 🫣🫣🫣🫣 Đã bị bại lộ 🫣🫣🫣

@denisblack9897 12 дней назад

Omg, someone help me: how to change syntax highlighting to these beautiful gradients?😅

@lunacc9683 27 дней назад

Where do you get the images you use for your website?

@dipereira0123 15 дней назад

Sir, This is not Web Development. THIS IS ART!!! its beautifull!!!!

@lundeveloper 15 дней назад

Thank you so much brother 😍😍

@diegocamacho6060 7 дней назад

Development by itself its art

@LuongHuynh-pc2jd 4 дня назад

Ủa, dùng bàn phím telex mà studio code nó vẫn nhận dạng được luôn à ông?

@lundeveloper 4 дня назад

Sao hăm

@sontuphan3055 15 дней назад

yo I caught the “ư”, are u vnmese? lmao

@lundeveloper 15 дней назад

🫣

@ChristianJedAluko 27 дней назад

Cool tips. Do you have the source code for this website(I’m trying to learn web development)

@lundeveloper 27 дней назад

Of course, please subscribe to the channel to see that video as soon as possible 😍

@divyanshudhruv 27 дней назад

Sir, you always teach and show one of the best tutorials of UI/UX and web design and thats also even better and clearer than most of the videos. Keep it up ✌🏻✌🏻

@lundeveloper 27 дней назад

Thank you very much, let's try together ❤️❤️

@divyanshudhruv 27 дней назад

@@lundeveloper Sir, do you have a github account? If so, can you share it,😅