3 Level Glassmorphism Design In CSS | CSS Tutorial
Вставка
- Опубліковано 23 лип 2024
- 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.
Mr Beast AI voice is a horrible choice.....
Agreed
It’s like listening an alien pretending to be a human
lol i didnt even noticed 😂
Not to mention illegal.
Guys.... I can't hear sh*t !!!
tf are u taking about ?????
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.
yep, its a sad reality that the highest paying jobs are the most boring LOLOL and unless its a game website... people praise simplicity
dude! wanna connect? i am a beginner full stack dev. need some guidance/directions.
@@Aviation_4DI'm a beginner too. Wanna make projects together?
@@thecrusader.25225 do you use discord?
@@thecrusader.25225 sure, let's connect.
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 ;)
excellent! the info's helping a lot for the Glassmorphism Design
That's beautiful!
your channel is so helpful, amazing display of the content
You Rock!
Oh I’m lucky today, I’m discover you!! I feel like Cristobal Colón now XD nice video!
Thank you so much 😍😍😍
cool, thanks for the tip
😍😍😍
I hope if you can expand some more so the beginners can learn and understand 🎉
Thanks
using backdrop-filter: blur() also makes the content a little bit blur. I don't use these for this reason.
What do you use instead?
@@spacemanXVI. I used to create pseudo element for backgrounds and then use backdrop filter on it. This gives much clearer and better result.
You got a new Subscriber 😇
Nice work dude.
Geat, Thank you so much ❤️❤️
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)
Ok, subscribed!
Heavy editted
Interesting😃👍
This is a great channel!
Thank you so much
Great work brother... promise you that i will give you atleast 100 more subs (every one from my class)
Wow Tha k you so much brother 😍😍
You are a legend
Thank you so much bro 🔥🔥
Following because of the sudden violin notes 😆
Next time I will play the violin a lot to get more people to follow me 🤣
Does anyone know how to this code but don't know what it's called? 🤭
i know because i this in every website
The -webkit- should go before the regular in your code. Or am
i stupid?
What is name of background music you used in between the video
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!
You will find the answer in the description of this video
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 🔥🔥🔥
Yup that was excellent!
im still new, but when you click on the color wheel theres a slide bar that does basically that same thing as those values you enter at the end, eg 0.3 opacity just drop the left slide bar down
Tutorial for creating website like you used.
Could you make tutorial how to make this hero section with animation
Nice vid, btw are you a Vietnamese? :)
That's right, hello countryman ^^
Very cool! Thanks!
I'm glad it's useful 😍😍
This guy is not from planet earth, You are so great, Your presentation is Top-notch.
hey buddy, my I know the font you use in website for this video, especially the on on glassmorphism tab. I like it, thank you
In fact, you can use any color format and add transparency by using the color-mix css function. be careful with browser support though
please i am new to VS CODE AND I RALLY LIKE URR R VS THEEMEE PLEASE SAY HOW TO DOWNLOAD
So you guys aren't gonna talk about his voice😂
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.
Damn... The algorithm finally doing some good shit. Nice style u earned a sub 🤙🏻 Thanks👌🏻
TRULY A LUNDEV
Is that Mr.Beasts voice? Lmaooo
Omg, someone help me: how to change syntax highlighting to these beautiful gradients?😅
Doing daily UIUX, at day 1
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) .....
I see a Tailwind logo on Css file 👀
good enough without the tiktok voice
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
Thank you so much bro 😍❤️
10 seconds per jo background sound hai uska name kya hai
Nice video, but man that AI voice is grating. It really hurts my ears. Some constant little sound-hissing in the higher frequencies.
I was wondering, why MrBeast started making coding related video and the comments cleared it out 🤣
It is a good video
Awesome
Thank you so much 😍
Ủa, dùng bàn phím telex mà studio code nó vẫn nhận dạng được luôn à ông?
Sao hăm
What theme do you use for vscode? I find it very beautiful
Plz tell me
I think he had posted a video regarding that
i see, ưepkit :))))
Ồ yé :)))
@@lundeveloper tôi cứ nghĩ đây là kênh nước ngoài cho đến khi xem được vid này :V
@@bachnguyen2367 🫣🫣🫣🫣 Đã bị bại lộ 🫣🫣🫣
Read it as an Indian Heck of a channel name
wow beautiful thank you sir.
Thank you so much 😍😍
You can add transparent to hex #colors, add level at the end, like #ffffff40 or #dddddd20...
Thank you 😍😍
text-blue-500/30 .... done, tailwind CSS is king
yo I caught the “ư”, are u vnmese? lmao
🫣
Can u give the images
Hi, If you need images in the video, please message me, information is in the description
Where do you get the images you use for your website?
Cool tips. Do you have the source code for this website(I’m trying to learn web development)
Of course, please subscribe to the channel to see that video as soon as possible 😍
replace rgba(0, 0, 0, 0.23) to rgb(0 0 0 / .23)
Sir, This is not Web Development. THIS IS ART!!! its beautifull!!!!
Thank you so much brother 😍😍
Development by itself its art
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 ✌🏻✌🏻
Thank you very much, let's try together ❤️❤️
@@lundeveloper Sir, do you have a github account? If so, can you share it,😅
Ủa giọng tiếng Anh của anh nghe khác hẳn nhỉ
Không phải giọng anh nè ^^
@@lundeveloper Chắc chi em nghe hơi lạ. Nhưng phong cách này xịn thật ý
Cảm ơn anh ạ 🥰
Did you use ai generated audio for this video?
If not, Lun has the weirdest inflections and pacing I've ever heard lol. I love these tutorials, but the voice narration is distracting at times.
Content is good, but dear god the voice and the sound effects are horrendous..
Why can't you talk with your own voice? 🤔
I hope to never hear this AI voice ever again.
This is so fucking weird.
Why can’t you just use a normal ai voice. It sounds like an alien and the constant shouting makes it hard to listen to.
Lmao that editing and voice is horrible. Good video though
I want to use some of your shopping cart code. But it has bugs. Do you provide paid support? can I email you?
Of course, I've put contact information in the description.
LOL, bro is using telex while writing code 🫡
Garbagio 🤌
You need to go back to school