2 CSS Ways to Modify Website Design Based on Device Interface

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

КОМЕНТАРІ • 112

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

    Do you want more 😋

    • @damianbetkowski6363
      @damianbetkowski6363 2 місяці тому +1

      Yes please!

    • @F4hk3n
      @F4hk3n 2 місяці тому +5

      Lun dev please please concentrate on web animations, i've seen a blowing mind websites using svg or gsap animations, we want more of that content

    • @abrowndude
      @abrowndude 2 місяці тому +2

      how can i make a button that switches between dark and light and system with this code

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

      Yep

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

      100%

  • @gmarsenopoulos
    @gmarsenopoulos 2 місяці тому +9

    I'm doing front end developing for almost three years now. Amazing how little I know about css to be hohest.. Finding your channel from youtube shorts was a gold mine literally! Cann you maybe share some of your sources so I can do some research on my own while waiting for your expert input on specific functionalities?
    Much love from Greece I hope your channel become massive!!

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

      @@gmarsenopoulos check out MDN Web Docs CSS guides and references, all css properties listed here ! And there's also everything about html and js !!

  • @SRIGHT0
    @SRIGHT0 2 місяці тому +4

    The only channel that might make me switch profession from back end to frontens.

  • @hussain.ahmd7
    @hussain.ahmd7 2 місяці тому +2

    bro my jaw just dropped...your content is amazing

  • @ЮлияРоманенко-к4ц
    @ЮлияРоманенко-к4ц Місяць тому +1

    Благодарю Вас , супер информация 👍👍👍👍👍🙏🙏🙏 Процветания Вам

  • @PicSta
    @PicSta 2 місяці тому +3

    I use CSS vars and override them depending on dark or light mode. This is my favourite way, although I think the light-dark() property makes a lot of sense, as you can directly dictate which colour you want. Even, you can create themes like "high contrast" or go wild on colours. Of course these are just ideas, options and not suitable for serious business websites.

  • @BeastGuru52
    @BeastGuru52 2 місяці тому +3

    best frontend developer with seemless explanation . keep it up!

  • @JerryAgenyi
    @JerryAgenyi 2 місяці тому +2

    Thank you so much. This is eye-opening for lazy Devs 😊

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

    Bro I swear you are too underrated, Another banger video keep it up buddy

  • @24pratikbhagwat68
    @24pratikbhagwat68 2 місяці тому

    Damn man really cool videos your css videos are one of a kind there is no other yt channels covers these css properties kudos man 👏 I have subscribed to your channel

  • @steel_hat_pirates
    @steel_hat_pirates 2 місяці тому +3

    First comment! Great Video :)

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

    I will start using this in all my projects

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

    Wow this is so crazy 🔥thank you very much for this one

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

    Amazing 🔥

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

    wouu😍 dark mode is most needed 😆

  • @akashinewgen
    @akashinewgen 2 місяці тому +5

    Just make css variables for the second one for easy color customization.🥰

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

    why i feel that separating the conditions from the main code is better. nice video

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

    exactly what i was looking for

  • @laitei-e40
    @laitei-e40 Місяць тому

    Sooooo good ❤

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

    This channel is sooo good

  • @Ga2-20
    @Ga2-20 2 місяці тому +1

    Could you show your approach of making more than 2 theme modes that user could choose? :)
    Thanks for good content 💪

  • @fahimul.islam.fahad.
    @fahimul.islam.fahad. 2 місяці тому

    Insightful as usual. Thanks 🎉

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

    Great content as always. ❤

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

    Thanks for this. Btw, you can also toggle theme on chrome dev tools.

  • @ベロラ
    @ベロラ 2 місяці тому

    thanks misterbis that was very helpful, I would always use javascript for this

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

    CSS Variables with override dark mode is also a great option !

  • @RajPal-x9o
    @RajPal-x9o 2 місяці тому +1

    Next video on cool js libraries ❤

  • @paradoxify_
    @paradoxify_ 2 місяці тому +4

    Great video but user can only change the theme from system settings this way, can u also show how user can choose the theme from the page itself, light, dark or system

    • @sunntle26
      @sunntle26 2 місяці тому +1

      I want to know too

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

    Great video, it was very insightful...
    Could you do a video on responsive faq section...that generates related FAQ based on the parent FAQ...just like in Google (people also ask)

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

    A great tutorial . . .

  • @astrougis
    @astrougis 2 місяці тому +2

    Great video!!!
    Is the new way, light -dark, working with variables in the :root? With "var" i mean...?

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

    Nice information about in this video ❤

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

    Thank you ✨

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

    Thanks Mr. Beast

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

    no way! ko nghĩ anh người việt luôn đấy

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

    Thanks for the explanation! I’m wondering, now it used system preferences, but is this also possible with a “switch to dark or light mode” button?

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

    Thank you

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

    I feel you can use it in real life producs because you can account for that in your code as well :)

  • @ManiKandan-bf8jy
    @ManiKandan-bf8jy 2 місяці тому

    Need a video for chrome developer tools advanced tricks 😌

  • @Machinegunjoe-Viterbo
    @Machinegunjoe-Viterbo 2 місяці тому

    I will name my first child after you!

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

    I think the first method is actually more organized and cleaner.

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

    he always got me with the "pooo" sound 😂😂😂😂😂😂

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

    @lundeveloper,
    Can you please tell me, How we can add the dropdown 0:23 to control the theme using the light-dark approach?
    Thank you

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

    What if you'd like to implement a theme switch like the one you showed at the beginning? We should rely on adding/removing classes, right?

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

    🤯 💥

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

    làm video chuẩn bị CV đi Lun ơi

  • @m.u.4449
    @m.u.4449 2 місяці тому

    Can you make a vid about the animation of letters? For example each letter of a word should fade in or something. Is this possible with only css maybe?

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

    There is an animation tool called rive that can make interactive web animation, I hope you explain it someday

  • @AVImations-39228
    @AVImations-39228 2 місяці тому

    The 100th like was mine LOL

  • @RichmondAwokojo-gs6hm
    @RichmondAwokojo-gs6hm 15 днів тому

    Hii can you do a video on splash screen please 🙏

  • @jobaer23.
    @jobaer23. 2 місяці тому

    If we use clip path in CSS, the border radius of the box can be given there, but the border radius cannot be given in different places of the shape that is created after using clip path.Now can you give border radius to those places inside the clip path Without using SVG.

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

    i think instead of light-dark function, better to use global var

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

    👍

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

    can u make a tailwind css tips?

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

    how can make use of this css feature if i wanna add a button to toggle the mode on my site?

  • @Radhakrishna95689
    @Radhakrishna95689 2 місяці тому +2

    How you found new thinks❤ please tell me

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

      By learning new thinks. Haha 😂

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

    How we will cover the toggle behaviour on site with own specific colors using light-dark way?

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

      maybe in reactJs using State change that value of light and dark via props?? is it possible?

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

      @ but how we do that with css variables with light-dark way?

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

      @@satindersingh780 with props.
      syntax:{props => props.variable === true ? Light : Dark}
      something like that. put the variable inside the element tag where you are sending the Boolean.

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

    How re-styling components of html like tailwind and bootstrap

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

    What's the theme name of your VS Code?? Please tell 🙏

  • @4arliEdinorog
    @4arliEdinorog 2 місяці тому

    Класс

  • @abhayff921
    @abhayff921 2 місяці тому +44

    if you're seeing this comment, it might be a sign to read 'Magnetic Aura' from Talesio ❤️

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

    Excuse me, what is your vscode theme?

  • @centyap
    @centyap 2 місяці тому +1

    Not working on my code

  • @joel-rg8xm
    @joel-rg8xm 2 місяці тому

    Could you translate to English or better yet re-create your ECommerce videos. That would be awesome.

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

    light-dark(black, red); this is not helpful for transition in CSS please check it. I have tried this with transition in CSS but transition stops using this "light-dark(black, red);". Can you solve it, please help me.

  • @Arman-qv6qy
    @Arman-qv6qy 2 місяці тому

    Second

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

    I store the color in a variable and only change the value of the variable when the scheme is dark. That's all

  • @DeveloperJS-w1s
    @DeveloperJS-w1s 2 місяці тому

    Bro I have a question
    How old are you?

  • @signalinternet5934
    @signalinternet5934 2 місяці тому +4

    Please 1 full project with react or react native

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

    I'm going with the light-dark() myself. 1) Using outdated browsers is dangerous. 2) Samsung isn't a concern for me, I just don't have any use for their phones, they don't follow the standards set by Android.

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

    third

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

      Thank you so much 🥰🥰🥰🥰

  • @miguelangelmadronerosequei9517
    @miguelangelmadronerosequei9517 2 місяці тому +15

    stop using the fart sound, it is very annoying and makes it difficult to continue watching the video.

    • @psenej
      @psenej 2 місяці тому +1

      😂😂 what ??? It’s fun and you can continue the video

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

      @psenej You have a weird concept of fun, weirdo

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

      How mentally weak are you? Maybe get off the internet for awhile.

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

      Doesn't bother me, but it's certainly not necessary. Still much better to have an occasional annoying sound than any continuous background music.

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

      😂😂😂😂🎉🎉🎉🎉

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

    1st way is better than 2nd

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

    How to create custom controls for a video or audio with CSS?
    This is a challenge for you

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

    Without using -var not the best way to code. And who cares about Samsung Internet?