Crazy CSS Using By Master CSS

Поділитися
Вставка
  • Опубліковано 14 жов 2024

КОМЕНТАРІ • 555

  • @lundeveloper
    @lundeveloper  3 місяці тому +118

    An interesting way to write CSS, right? Don't forget to subscribe to the channel to watch more interesting videos

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

      Iam subscriber, iam watched lots videos i think you as my teacher you tech lots new and cool trick and tip that help me, iam currently learning front- end developed 🇮🇳

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

      Thanks you sir

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

      Can you show us how created the thumbnail image using css.

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

      @@bobin5480Thank you so much 😍😍😍 🇻🇳

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

      @@lundeveloper Hi, can you help me with the phone mask? If you don't mind, I want to send you a screenshot to your mail

  • @rootwayder77
    @rootwayder77 3 місяці тому +482

    alright mr beast is teaching css now.

  • @HemWri
    @HemWri 3 місяці тому +540

    So Mr.Beast is now teaching us how to code 🙃

    • @jeantalar
      @jeantalar 3 місяці тому +10

      I was ready to say that 😂

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

      good thing it was not kris

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

      Good to see i'm not the only one noticing 😂

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

      Did NOT age well

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

      @@PizzzaMozarella that did very much NOT age well indeed

  • @m12652
    @m12652 3 місяці тому +206

    Fair play... that's the first time someone impressed me with css in a long time. Cheers buddy...

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

      His previous video is even more impressive

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

      @@goncalomoura7628 the rotating image slider? Love it! 👍🍉

  • @markuszeller_official
    @markuszeller_official 3 місяці тому +115

    This is one of the most stunning CSS I've ever seen.

  • @latte-ki4qn
    @latte-ki4qn 3 місяці тому +35

    as a backend, this is masterpiece, all my memory about css is pain, but this change my mind

  • @_vidnas
    @_vidnas 3 місяці тому +933

    Interesting video but the HORRIBLE ai voice over is very hard to push through.

    • @calebmusselman
      @calebmusselman 3 місяці тому +33

      Someone had fun with Eleven labs😂

    • @MrNagano00
      @MrNagano00 3 місяці тому +62

      I didn't even notice it was an AI voice over, I guess now looking at the comments the voice is very close to Mr Beast.

    • @kuwandak
      @kuwandak 3 місяці тому +12

      Not everyone has a good microphone

    • @_vidnas
      @_vidnas 3 місяці тому +13

      @@kuwandak if a person had great cooking recipes but no knives to prepare ingredients, would you suggest they cook a meal?

    • @MrNagano00
      @MrNagano00 3 місяці тому +27

      @@_vidnas not applicable, the AI voice over is more than fine and fits the purpose.

  • @gabosantiago1038
    @gabosantiago1038 9 днів тому +5

    The IA voice and your crazy skill make me 100% sure you are from India 🇮🇳

  • @NazwaBricksZajeta
    @NazwaBricksZajeta 25 днів тому +3

    I was today years old when I've learned that, in fact, you CAN select previous elements in CSS. Holy shit. Thank you.

    • @unicodefox
      @unicodefox 23 дні тому +2

      CSS :has is a relatively new thing so for the longest time you couldn’t do it

  • @FullStack-s8g
    @FullStack-s8g 3 місяці тому +48

    We need this type of cool stuff for next vids

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

    You really nailed it. This shows how much deeper you can go with css. ❤️ your knowledge is awesome. Thanks for sharing.

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

      I'm glad it's useful to everyone

  • @nemila4904
    @nemila4904 21 день тому +1

    I think I found my new favorite css UA-camr

  • @freakfreak786
    @freakfreak786 19 днів тому

    Clean, helpful and awesome. wow. This channel is a true gem. Subbed for future vids and cant wait to watch everything i missed to far.

  • @goodshiro10
    @goodshiro10 28 днів тому +1

    Dude you're awesome, this was unimaginable to me and seeing it in an understable way is even more amazing
    BIG THANKS TO YOU ❤

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

    Every time i watch your videos i am amazed by what you do. I have learned so much from you. Thank you so much!!!!!!!

  • @vuqar6450
    @vuqar6450 23 дні тому

    That’s a very cool effect. It always amazes me learning the cool things that we can do with plain css. Thank you for sharing

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

    I started learning web development 2 days ago and my css knowledge is extremely limited but still your video is so good I understood everything perfectly what an amazing video❤

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

    I really like how much over the past 20 years CSS has evolved. It is amazing what you can do with it now. Good video, keep it up!

  • @scott-richardson
    @scott-richardson 3 місяці тому +1

    Sensational. Beautiful clean markup and relatively minimal CSS code to create something that would otherwise have been a solid chunk of JS.

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

    You are teacher/mentor of masters

  • @Xiuei
    @Xiuei 3 дні тому

    Thank you so much for your tutorials!! You really helped me a lot.

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

    I used your last video CSS reference in my company project today. It's so helpful ❤ Thank you. Keep rocking 🔥

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

    To be honest you are highly underrated, I'm a newbie and I have explored too many things but didn't find someone like you

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

      In simple words you are amazing please put more and more content 🙏

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

      Thank you very much, I will try harder. I hope what I share will be known to many people 😍

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

    Your creativity is at the peak of humanity

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

    This is awesome. Cant wait to use so many of these techniques in my own website rebuild.

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

    Wow, this has been been very useful to me, I never expected css to achieve such an effect with those few lines of code, I like this, you have got a new sub because of this informative video🎉

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

    Amazing way of selecting previous items! Thanks for the video.

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

    I just got here and i am already planning a binge watch your videos, nice narration and CONTENT!!

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

    this isn’t helpful it’s magnificent thank you man this is really great and you makes it so clear i am grateful to find this channel

  • @demonhunter8358
    @demonhunter8358 24 дні тому

    pretty amazing thanks dude for simple explanation

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

    Finally Online Tutorials and Kevin Powell got a Rival 🔥

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

      💯🛠💎

  • @RyanKerry-r4s
    @RyanKerry-r4s 2 місяці тому +1

    Ur content is actually very impressive and concise, there are not many sources that deliver like this, especially revolving around keeping things purely in css. The ai voice feels a bit strange, it has that synthetic high pitch screeching sound to it - if that makes sense - but its not unbearable.

  • @giannistourkos
    @giannistourkos 21 день тому

    Excellent css skills!!

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

    After editing, this video is back. Anyone else watch it?

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

    This is gold Man....thx for share this amaizing css magic!

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

    Very interesting
    Really love your CSS tips
    Straight to the point
    Short and concise
    Great content ⭐

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

      Thank you so much bro

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

      Please teach me more about JavaScript

  • @m.waseem6616
    @m.waseem6616 Місяць тому

    thank you Lun Dev for teaching us valueable skills.

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

    Yes! A pretty great video. Appreciations for this. It's a suggestion that if you can make a video regarding those special animations and operations that most of the people don't think/know is able to done with CSS but it is. (Cause even I don't know what else we can do with only CSS)

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

    Concise, informative and useful content. Great job!

  • @isfrank
    @isfrank 29 днів тому

    Idea is great. Execution is minimal at best

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

    Pretty impressive, easy to understand and implement, and useful. You have talent to teach!

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

    This is by far one of the beat things i’ve ever seen CSS do. Subscribed!
    Would hope to see something this cool for the next video.🫡

  • @r-i-ch
    @r-i-ch 2 місяці тому

    It is concise in some aspect but I don't know if it's "clear". Neat effect though!
    I wonder if the is() selector with a * could make this a bit cleaner?

  • @shahzaibtariq9296
    @shahzaibtariq9296 3 місяці тому +8

    Really guys this guy's css is on another level I have never seen a person with that much knowledge about css and easy way of teaching. Thanks for making useful content!👍

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

    Keep the great content coming. I like videos which has cool yet usful tricks which I can apply. Also it something that even a common developer probably do not now. Your explanation of how to target the next and previous elements are clear and easy to remember!

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

      Thank you so much brother 😍

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

    damn. First video i have seen of your. Instantly subbed.

  • @AdityaYadav-gj7lz
    @AdityaYadav-gj7lz 2 місяці тому

    bro is literally programming with css 🤯

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

      Hopefully I can get your support in the latest videos

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

    that's crazy cool man... nice work :)

  • @Earthcrosser
    @Earthcrosser 21 день тому

    Very interesting! Thanks for sharing. You earned a subscriber. ;-)

  • @gibber1sh-c6w
    @gibber1sh-c6w 3 місяці тому +16

    I really like that such a short video teaches such a powerful technique that can be applied to a ton of different scenarios.

  • @AbdelrahmanRamadan-cp5jx
    @AbdelrahmanRamadan-cp5jx 3 місяці тому +1

    Best css channel with no doubt!!

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

    Definitly learned some awesome things man, My love for css has increased❤

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

      Thank you for watch my content brother 😍

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

    this is my favorite css video ever ❤

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

    terima kasih, ini sangat membantu

  • @etabeta31
    @etabeta31 15 днів тому

    Fantastisk! Thank you so much!

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

    You're defenetly a master bro, good job keep going !!

  • @ВладиславГ-ф9т
    @ВладиславГ-ф9т Місяць тому

    That is a game changer. Thank you man

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

    Clever use of "has"!

  • @gwemula
    @gwemula 8 днів тому +1

    I wonder if Kevin Powell has seen this! Pretty sure he'd be impressed :)

  • @Kat-ki6ox
    @Kat-ki6ox 2 місяці тому +2

    the mr beast AI voice is crazy

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

    Wonderful
    I can't believe that can be happen with just only cas

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

    This is absolute madness css ::) Like it a lot! Lancelot!

  • @iunk-dfoig-1837n
    @iunk-dfoig-1837n 29 днів тому

    Mind blowing! Wow, thank you!

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

    I can't decide if cursed or not but it's pretty epic, I'd have reached for JS in a heartbeat!

  • @OnlineWork-r1h
    @OnlineWork-r1h Місяць тому

    can you please share the css code of how you arranged the images and also your css knowledge is impressive as hell.

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

    It is actually very nice to learn this, now I am loving CSS, make some more tricks like this also create something to robustly define layout for application.

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

      Thank you, I will continue to do it, I hope my channel can reach many people who need it

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

    Nice work...Can you please tell me the vs code extension name for the gradient font color? loved that!

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

      You can find it in description this video

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

    DUDE YOUR A MASTER AT CSS i never knew * could be this useful

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

    One of the best way to use CSS, good job 👍🏻 bro keep impressing us...

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

    thank you, i love your css arts

  • @ekinaslan7307
    @ekinaslan7307 7 днів тому

    Nice work

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

    This is AWESOME! Really like it.

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

    very interesting and imaginative aproach to that issue! Congrats

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

    👏👏👏 I've never used that has() selector, fantastic!

  • @therealpepeu
    @therealpepeu 8 днів тому

    Great content! The only thing I'd like to change is a little bit slower tempo, and a bit lower pitch on the AI voice.

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

    Personally, I wouldn't use the universal selector (*) just for brevity, especially not when there are class names available which would give higher specificity and make the intent clearer.
    Obviously this is just a demo though and not a production site, so no biggie.

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

    hats off sir, I am also a web dev, and currently I am upgrading my portfolio. Can you share some cool project showcase cards with us and how to create a grid background with a random square field.

  • @169ru
    @169ru 22 дні тому

    Honestly, you have me wondering if I want to change careers!

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

    Please make more! This is great!

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

    You won a subscriber from Afghanistan.
    Great work dude.
    I love your work.
    Also please pray for our country to get rid of terrorist talibans.

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

      Thank you so much, love Afghanistan

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

    Very nice. Thanks for sharing

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

    I now know what it would sound like if Jason Schwartzman taught me CSS. Thanks A.I.

  • @tinotaylor
    @tinotaylor 9 днів тому

    Love the videos. Would you be able to do some with tailwind?

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

    Wow 😮 that's insane !!!!! Thanks.

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

    That's really cool. CSS is so powerful.

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

    Can you please share the whole css code because while hovering any item the distance between hovered and right item is greater than the distance between hovered and left item and also the right item rotates more than left and it depends on position of the item sometimes left and sometimes right, it doesn't look symmetric so please share the full code

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

    Cool technic!

  • @qweqwe-d7u
    @qweqwe-d7u 9 днів тому

    @lundeveloper I have a question: shouldn't it be ".list .item:has(+ * + * + .item:hover)" (for example)? I imagine if you leave the rightmost element of CSS selector ambiguous, it will try to match it to any element you hover over decreasing overall performance.
    I've been told that CSS selectors match from right to left, but when it comes to :has() I'm not really sure what should be considered "the right".

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

    bro , you are so underrated , very good content 😉👏👏👏

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

    1:48 the Y axes should be up in this case for rotateY() to make sense...

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

    Good damn man, that’s a sick thing you made 🎉

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

    That was awesomeee!! Thanks for sharing your knowledge❤️🙏

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

    Wouldn't it be cool to do this on multiple rows and have the items above and below rotate on the x axis.... I'm not sure if its possible with css only though... awesome videos by the way, thank you 👍🏴󠁧󠁢󠁷󠁬󠁳󠁿

  • @abdulmalikal-otaibi5229
    @abdulmalikal-otaibi5229 3 місяці тому

    Thats amazing, but what if the images are broken into multiple raws wouldn't that mean the next item on the following raw will have the effect?

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

    Awesome bro thank u for this knowledge

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

    Nicely done, but what if we want to change the styling of the 5th item along the road? Or the 9th? Codewise it won't become very readable, correct? Possibly we can call upon package to prettify the output, but still. Just a curious frontend dev here..

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

    Dude this is just plain witchcraft 👌 Could you make a carousel that has sort of grids of images in some of its elements like on the main page of the Taste Atlas site or Facebook for example

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

    loved it! thanks you I am impressed

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

    Awesome tutorials i have ever seen thankyou so much

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

      Thanks for watching my video, I will do better

  • @HappySlappyFace
    @HappySlappyFace 29 днів тому +1

    This may be the first time i will like a tutorial video with an AI voice, don't get me wrong i hate the AI voice but the content is brilliant