2 CSS Ways to Modify Website Design Based on Device Interface

Поделиться
HTML-код
  • Опубликовано: 13 янв 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

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

  • @BeastGuru52
    @BeastGuru52 2 месяца назад +3

    best frontend developer with seemless explanation . keep it up!

  • @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.

  • @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

  • @AlThePal78
    @AlThePal78 2 месяца назад

    I will start using this in all my projects

  • @steel_hat_pirates
    @steel_hat_pirates 2 месяца назад +3

    First comment! Great Video :)

  • @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

  • @laitei-e40
    @laitei-e40 2 месяца назад

    Sooooo 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 💪

  • @priyansh7
    @priyansh7 2 месяца назад

    exactly what i was looking for

  • @gustacamara
    @gustacamara 2 месяца назад

    This channel is sooo good

  • @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.

  • @iLiran
    @iLiran 2 месяца назад

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

  • @ベロラ
    @ベロラ 2 месяца назад

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

  • @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 17 дней назад

    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 2 месяца назад

      @@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?

  • @joel-rg8xm
    @joel-rg8xm 2 месяца назад

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

  • @centyap
    @centyap 2 месяца назад +1

    Not working on my code

  • @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

    • @lundeveloper
      @lundeveloper  2 месяца назад +1

      wow Thanks 🥰🥰🥰🥰

  • @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

  • @TahaJSDev
    @TahaJSDev 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?