3 Level Glassmorphism Design In CSS | CSS Tutorial

Поділитися
Вставка
  • Опубліковано 1 січ 2025

КОМЕНТАРІ • 175

  • @dethArikYT
    @dethArikYT 7 місяців тому +115

    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
      @p.cnunes7098 7 місяців тому +23

      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
      @Aviation_4D 6 місяців тому +3

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

    • @thecrusader.25225
      @thecrusader.25225 6 місяців тому +7

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

    • @Aviation_4D
      @Aviation_4D 6 місяців тому

      @@thecrusader.25225 do you use discord?

    • @Aviation_4D
      @Aviation_4D 6 місяців тому

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

  • @Alosage.
    @Alosage. 7 місяців тому +386

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

    • @SOMEONE-eq5bu
      @SOMEONE-eq5bu 7 місяців тому +14

      Agreed

    • @mackit
      @mackit 6 місяців тому +32

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

    • @J_u_r_i
      @J_u_r_i 6 місяців тому +8

      lol i didnt even noticed 😂

    • @kadenhansen
      @kadenhansen 6 місяців тому +1

      Not to mention illegal.

    • @grim5996
      @grim5996 6 місяців тому +1

      I was about to say is Mr beast secret a programmer/designer

  • @d3manify
    @d3manify 7 місяців тому +25

    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 ;)

  • @manuelcastillo7623
    @manuelcastillo7623 6 місяців тому +8

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

    • @lundeveloper
      @lundeveloper  6 місяців тому

      Thank you so much 😍😍😍

  • @XCanG
    @XCanG 6 місяців тому +3

    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.

  • @aryanshahzad-rf7rc
    @aryanshahzad-rf7rc 16 днів тому

    thank you so much . your page helped me a lot

  • @rifathossain328
    @rifathossain328 17 днів тому

    😢 learning react , today while finishing a personal project i realised my css skill got rusty , thanks for the video ❤,

  • @Ikmat
    @Ikmat 7 місяців тому +4

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

  • @rahulkumargautam3358
    @rahulkumargautam3358 6 місяців тому +7

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

    • @spacemanXVI.
      @spacemanXVI. 6 місяців тому

      What do you use instead?

    • @rahulkumargautam3358
      @rahulkumargautam3358 6 місяців тому +2

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

  • @whyisthiscodenotworking
    @whyisthiscodenotworking 7 місяців тому +35

    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
      @kneel.downnn 6 місяців тому +1

      Yup that was excellent!

  • @FlavioRicardoDesign
    @FlavioRicardoDesign 6 місяців тому +5

    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)

  • @praveenjoe2773
    @praveenjoe2773 5 місяців тому

    bro i was searching for something like this for a while
    thanks brother

  • @halith_smh
    @halith_smh 4 місяці тому

    This is really one of the best tutorial

  • @Ayush-_-007
    @Ayush-_-007 7 місяців тому +2

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

    • @lundeveloper
      @lundeveloper  7 місяців тому

      Wow Tha k you so much brother 😍😍

  • @mohamadsharafi8194
    @mohamadsharafi8194 3 місяці тому +1

    your content is dope

  • @hazeify7798
    @hazeify7798 3 місяці тому

    i will watch your content to up my CSS game

  • @EugeneKoshelev
    @EugeneKoshelev 6 місяців тому +1

    That's beautiful!

  • @muskandodmani3579
    @muskandodmani3579 6 місяців тому +1

    your channel is so helpful, amazing display of the content

  • @firstlast493
    @firstlast493 6 місяців тому

    This is a great channel!

  • @Tofu-it8mm
    @Tofu-it8mm 7 місяців тому

    You got a new Subscriber 😇
    Nice work dude.

    • @lundeveloper
      @lundeveloper  7 місяців тому

      Geat, Thank you so much ❤️❤️

  • @TheMoments-
    @TheMoments- 5 місяців тому

    I hope if you can expand some more so the beginners can learn and understand 🎉
    Thanks

  • @Bb48knv
    @Bb48knv 6 місяців тому +3

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

  • @udk-tutorialsbyluke8434
    @udk-tutorialsbyluke8434 4 місяці тому

    Jo you dont need the rgba thing just do a Hex with 4 or 8 value digits. For example #0004 will give you a black with opacity 4/16 or #ff0000b0 is a more opace red. Enjoy🎉

  • @felix_co
    @felix_co 7 місяців тому +5

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

    • @lundeveloper
      @lundeveloper  7 місяців тому

      Thank you 😍😍

    • @p.cnunes7098
      @p.cnunes7098 7 місяців тому

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

  • @petergrijalvagarcia1241
    @petergrijalvagarcia1241 7 місяців тому +1

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

  • @corentin1574
    @corentin1574 6 місяців тому

    In fact, you can use any color format and add transparency by using the color-mix css function. be careful with browser support though

  • @Impact_TO
    @Impact_TO 4 місяці тому

    the sound effects are 10/10 😂😂😂😂

  • @Pharmtechie
    @Pharmtechie 6 місяців тому

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

  • @dipereira0123
    @dipereira0123 7 місяців тому

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

  • @shikharsharma3157
    @shikharsharma3157 2 місяці тому

    Please sir, make some videos on the different style's examples which you mentioned in the starting of your video.

  • @tanis6371
    @tanis6371 3 місяці тому

    Hey, amazing video! How did u create this shape on the headline?

  • @CodeingWithHadi
    @CodeingWithHadi 7 місяців тому

    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
      @lundeveloper  7 місяців тому +1

      Thank you so much bro 😍❤️

  • @ЕгорРура
    @ЕгорРура 7 місяців тому +1

    Very cool! Thanks!

    • @lundeveloper
      @lundeveloper  7 місяців тому

      I'm glad it's useful 😍😍

  • @_u_nknownuser
    @_u_nknownuser 3 місяці тому

    i love the meme thing 😂

  • @paulopma
    @paulopma 7 місяців тому

    Following because of the sudden violin notes 😆

    • @lundeveloper
      @lundeveloper  7 місяців тому

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

  • @NgocNguyen-bh3qf
    @NgocNguyen-bh3qf 7 місяців тому +1

    Nice vid, btw are you a Vietnamese? :)

    • @lundeveloper
      @lundeveloper  7 місяців тому +1

      That's right, hello countryman ^^

  • @wireinet
    @wireinet 6 місяців тому

    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
      @lundeveloper  6 місяців тому +1

      You will find the answer in the description of this video

  • @sunnymeghrajani5412
    @sunnymeghrajani5412 7 місяців тому

    Interesting😃👍

  • @irwankaryantotandek6058
    @irwankaryantotandek6058 6 місяців тому

    Ok, subscribed!

  • @danielkubeck6631
    @danielkubeck6631 5 місяців тому

    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

  • @harshrawat503
    @harshrawat503 2 місяці тому

    Uu are best

  • @DavidGutierrez-dj2kk
    @DavidGutierrez-dj2kk 5 місяців тому

    You Rock!

  • @divyanshudhruv
    @divyanshudhruv 7 місяців тому +1

    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
      @lundeveloper  7 місяців тому +1

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

    • @divyanshudhruv
      @divyanshudhruv 7 місяців тому

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

  • @hdlrpnzr
    @hdlrpnzr 7 місяців тому +1

    cool, thanks for the tip

  • @hoa-moc-lan3048
    @hoa-moc-lan3048 7 місяців тому +3

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

  • @MdRifatAhmedMohammadNaiem
    @MdRifatAhmedMohammadNaiem 6 місяців тому

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

  • @nustaniel
    @nustaniel 6 місяців тому +9

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

  • @lundeveloper
    @lundeveloper  7 місяців тому +7

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

    • @Taha001-r2n
      @Taha001-r2n 7 місяців тому +1

      i know because i this in every website

  • @jmg9509
    @jmg9509 7 місяців тому +3

    Is that Mr.Beasts voice? Lmaooo

  • @somarjaber1275
    @somarjaber1275 6 місяців тому

    You are a legend

    • @lundeveloper
      @lundeveloper  6 місяців тому

      Thank you so much bro 🔥🔥

  • @thoriq_aulia
    @thoriq_aulia 5 місяців тому

    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

  • @vedbhanushali608
    @vedbhanushali608 6 місяців тому

    wow beautiful thank you sir.

    • @lundeveloper
      @lundeveloper  6 місяців тому +1

      Thank you so much 😍😍

  • @vasiovasio
    @vasiovasio 3 місяці тому +1

    Use Kim Kardashian voice for the videos! 😂😂😂

  • @БаястанНурбек-ж6ж
    @БаястанНурбек-ж6ж 6 місяців тому

    Could you make tutorial how to make this hero section with animation

  • @muchis
    @muchis 7 місяців тому +3

    good enough without the tiktok voice

  • @shikharsharma3157
    @shikharsharma3157 2 місяці тому

    Please sir, create some videos on the designs of Glassmorphism at 0:32 seconds

  • @ivanbecerra8109
    @ivanbecerra8109 Місяць тому +1

    🗣3:33 🎼🎶🎵 🚬

  • @rifathossain328
    @rifathossain328 16 днів тому

    Does anyone know react-icons library,
    Having hard time sizing icons with css, don’t know why it doesn’t work with css properly, moreover using size as prop on icon component 1rem em etc also doesn’t work. Thank you all

  • @Jobwerk
    @Jobwerk 6 місяців тому

    Heavy editted

  • @Devloper.mind_
    @Devloper.mind_ 6 місяців тому +1

    10 seconds per jo background sound hai uska name kya hai

  • @darkhitech
    @darkhitech 7 місяців тому +2

    Doing daily UIUX, at day 1

    • @p.cnunes7098
      @p.cnunes7098 7 місяців тому

      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) .....

  • @bojanasamardzioska3040
    @bojanasamardzioska3040 4 місяці тому +1

    can you provide the html for this css?

  • @prathamdhas4363
    @prathamdhas4363 6 місяців тому

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

  • @techwake360
    @techwake360 7 місяців тому +1

    Awesome

  • @Brechtvdh
    @Brechtvdh 7 місяців тому

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

  • @denisblack9897
    @denisblack9897 6 місяців тому

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

  • @vr5856
    @vr5856 4 місяці тому

    Noice

  • @gvsjayanth5671
    @gvsjayanth5671 6 місяців тому

    Read it as an Indian Heck of a channel name

  • @mdkawsarali8247
    @mdkawsarali8247 7 місяців тому

    It is a good video

  • @kitchentaste8705
    @kitchentaste8705 7 місяців тому

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

  • @Fnydo
    @Fnydo 7 місяців тому

    Tutorial for creating website like you used.

  • @bachnguyen2367
    @bachnguyen2367 7 місяців тому

    i see, ưepkit :))))

    • @lundeveloper
      @lundeveloper  7 місяців тому +1

      Ồ yé :)))

    • @bachnguyen2367
      @bachnguyen2367 6 місяців тому +1

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

    • @lundeveloper
      @lundeveloper  6 місяців тому +1

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

  • @DetectiveNoir_
    @DetectiveNoir_ 7 місяців тому

    I see a Tailwind logo on Css file 👀

  • @LuongHuynh-pc2jd
    @LuongHuynh-pc2jd 6 місяців тому

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

  • @srijansagar1250
    @srijansagar1250 7 місяців тому

    TRULY A LUNDEV

  • @zorokutend
    @zorokutend 4 місяці тому

    "ưeb" - I am pretty sure this guy is Vietnamese :))

    • @lundeveloper
      @lundeveloper  4 місяці тому

      🤭🤭🤭🤭 Điệp viên đã bị bại lộ danh tính 😅

  • @sontuphan3055
    @sontuphan3055 6 місяців тому

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

  • @ChristianJedAluko
    @ChristianJedAluko 7 місяців тому

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

    • @lundeveloper
      @lundeveloper  7 місяців тому

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

  • @hjetwd
    @hjetwd 6 місяців тому

    replace rgba(0, 0, 0, 0.23) to rgb(0 0 0 / .23)

  • @Wysteria_Willow
    @Wysteria_Willow 7 місяців тому

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

  • @uyletruong9091
    @uyletruong9091 7 місяців тому

    Ủa giọng tiếng Anh của anh nghe khác hẳn nhỉ

    • @lundeveloper
      @lundeveloper  7 місяців тому +1

      Không phải giọng anh nè ^^

    • @uyletruong9091
      @uyletruong9091 7 місяців тому

      @@lundeveloper Chắc chi em nghe hơi lạ. Nhưng phong cách này xịn thật ý
      Cảm ơn anh ạ 🥰

  • @fachihul
    @fachihul 7 місяців тому +1

    Did you use ai generated audio for this video?

    • @Danachew
      @Danachew 7 місяців тому

      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.

  • @Mushashi147
    @Mushashi147 7 місяців тому

    Can u give the images

    • @lundeveloper
      @lundeveloper  7 місяців тому

      Hi, If you need images in the video, please message me, information is in the description

  • @virag-ky
    @virag-ky 6 місяців тому

    Why can't you talk with your own voice? 🤔

  • @LasTCursE69
    @LasTCursE69 6 місяців тому

    Content is good, but dear god the voice and the sound effects are horrendous..

  • @apps9129
    @apps9129 6 місяців тому +1

    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.

  • @fachihul
    @fachihul Місяць тому

    Is this channel using AI voice?

  • @genie_dev
    @genie_dev 6 місяців тому

    I hope to never hear this AI voice ever again.

  • @NicolasPL_
    @NicolasPL_ 6 місяців тому +1

    Lmao that editing and voice is horrible. Good video though

  • @silentshadow867
    @silentshadow867 6 місяців тому

    This is so fucking weird.

  • @jlonso1840
    @jlonso1840 4 місяці тому

    G0D

  • @christianjack1250
    @christianjack1250 7 місяців тому +1

    I want to use some of your shopping cart code. But it has bugs. Do you provide paid support? can I email you?

    • @lundeveloper
      @lundeveloper  7 місяців тому

      Of course, I've put contact information in the description.

  • @__kyune__
    @__kyune__ 6 місяців тому

    LOL, bro is using telex while writing code 🫡

  • @AmadeuMeniconi
    @AmadeuMeniconi 7 місяців тому

    Garbagio 🤌

    • @lundeveloper
      @lundeveloper  7 місяців тому

      You need to go back to school

  • @ThemuseGhost-d8r
    @ThemuseGhost-d8r 2 місяці тому

    please can i know where you get your images?😭😭 i only get trash photos🥲

    • @lundeveloper
      @lundeveloper  2 місяці тому

      Please check out the community tab, I've shared a lot of stuff there.