5 CSS tricks every Web Developer should know in 2023

แชร์
ฝัง
  • เผยแพร่เมื่อ 17 พ.ย. 2024

ความคิดเห็น • 455

  • @Mdbootstrap
    @Mdbootstrap  2 ปีที่แล้ว +9

    I hope you liked the video. If you are already here in the comment section, I invite you to let me know what other videos would you like to see in the future. Also, share any other feedback that you have on this video!
    I don't run ads on tutorials - the only value I get is your engagement in the MDB community.
    So if you would like to show your support:
    - Encourage more people to Keep Coding ---> Send this video to one person
    - Stay tuned for new content ---> Subscribe & ring the bell
    In the description, you will find links to some useful, free resources:
    📥 Download Material Design for Bootstrap - FREE open-source UI KIT
    🎓 Learn responsive web design with the latest Bootstrap 5 (full 1.5H course)
    🎁 Join our mailing list & receive exclusive perks (free stuff that is normally behind a paywall)
    ⭐Support the creation of open-source packages with a STAR on GitHub
    👪 If you have any questions - don't hesitate to ask on our Facebook group
    Thank you for your support!

  • @IhorVyshniakov
    @IhorVyshniakov 3 ปีที่แล้ว +226

    Thanx, great tricks!
    TIME CODES:
    0:12 - CSS Blend mode
    2:34 - Clipping
    5:33 - Animations
    8:59 - Google fonts
    10:36 - Gradients
    My advice 4 you - make time codes, please, that allows easily switch between these tricks. Everything else is great!) Keep doing this...)

    • @wearestratusmarketing4368
      @wearestratusmarketing4368 3 ปีที่แล้ว +2

      Yes! You’re the MVP

    • @akzeebbose5530
      @akzeebbose5530 3 ปีที่แล้ว +1

      thank you

    • @IhorVyshniakov
      @IhorVyshniakov 3 ปีที่แล้ว

      @@wearestratusmarketing4368 What does it mean?)

    • @ark333
      @ark333 3 ปีที่แล้ว +2

      @@IhorVyshniakov MVP: most valuable player

    • @IhorVyshniakov
      @IhorVyshniakov 3 ปีที่แล้ว

      @@ark333 Thank you, now it's clear!)

  • @highfade
    @highfade 3 ปีที่แล้ว +16

    I been doing web dev for over 10 years, and you're the freaking man. I'm so tired of cookie cutter hello world examples and beginners on TH-cam pretending to explain anything beyond what I get from the docs. Again, you are the man. Thank you for the amazing content.

  • @husseinjalaleldin8933
    @husseinjalaleldin8933 ปีที่แล้ว +1

    I am new on your channel .. I hope you keep it like that ... calm ... creative and polite

  • @ZachBinder95
    @ZachBinder95 3 ปีที่แล้ว +7

    Background blend blew my mind. Clipping and animation I've seen but am not familiar with personally. Fonts and gradients I use often.
    Every web developer should know media queries

  • @TokyoXtreme
    @TokyoXtreme 3 ปีที่แล้ว +7

    About a minute or so in, I realized that I’ve already watched this video before. But yeah, I watched it again. Good stuff, my man.

  • @christinelacosta9886
    @christinelacosta9886 3 ปีที่แล้ว +4

    Im just a 3rd yr college student in the philippines. After studying for almost 3 yrs, finally! I found my place in I.T industry. I find web dev interesting! So i started studying about it recently. Your vid makes me more excited to pursue the course. TYSM! Yey!

  • @premkishore5374
    @premkishore5374 2 ปีที่แล้ว

    that clip path was just breathtaking❤‍🔥

  • @michal3833
    @michal3833 2 ปีที่แล้ว

    this guy knows all of the color codes by heart...!

  • @ApoLk_
    @ApoLk_ 3 ปีที่แล้ว +5

    I'm learning HTML and CSS and this channel is helping me A LOT, I just want to say, thank you! I'm loving to program on those languages and your videos basically helped me with almost every major question I had bt now and showed me things that otherwise would take me double the amount of time for me to just figure it out by myself.

  • @nizamuddinshaikh3185
    @nizamuddinshaikh3185 3 ปีที่แล้ว +1

    Excellent tricks shown! Thanks MDB for sharing. 👍😃

  • @sanmeetsingh4
    @sanmeetsingh4 3 ปีที่แล้ว +4

    I knew 4 of them but didn't ever thought of using them like that (the clip path one blew me off ) ! Amazing content

  • @vanitymeetstechnology8792
    @vanitymeetstechnology8792 2 ปีที่แล้ว

    I learnt bootstrap very help full thing from you and MDB, created a web site for our Church.. so happy..TQ

    • @Mdbootstrap
      @Mdbootstrap  2 ปีที่แล้ว

      Thanks, that means a lot :)

  • @pavaniyarlagadda3473
    @pavaniyarlagadda3473 3 ปีที่แล้ว

    Thank you !!! Clip path nd blend mode are awsome

  • @lisarogers5873
    @lisarogers5873 2 ปีที่แล้ว

    Really awesome tips. I love the shape/colored backgrounds. Simple but adds a little punch to the websites.

  • @archiem6323
    @archiem6323 3 ปีที่แล้ว +6

    Blend-mode. I learn something new today. Thanks!

  • @harishkandikatla9791
    @harishkandikatla9791 3 ปีที่แล้ว +2

    CSS Blend mode is awesome!
    It really helps, thanks for sharing!!

  • @Tony-yh3ei
    @Tony-yh3ei 3 ปีที่แล้ว +3

    Blend mode and clip was new to me, thanks bro!

  • @Mustafa-ji3cp
    @Mustafa-ji3cp 3 ปีที่แล้ว +1

    thanku men cliping and background-blend-mode is new to me

  • @GamerKittyEuphoric
    @GamerKittyEuphoric 2 ปีที่แล้ว

    please do more CSS tricks o-o... this is awesome. I love seeing this stuff.

  • @ildikoedit9110
    @ildikoedit9110 2 ปีที่แล้ว +2

    Thank you, as a beginner I found these very useful.
    BTW I Immediately recognized your Polish accent :D

    • @Mdbootstrap
      @Mdbootstrap  2 ปีที่แล้ว

      Glad I could help :)

  • @dariusdubose666
    @dariusdubose666 3 ปีที่แล้ว +2

    These tips were definitely features that I did not know about. Thank you.

  • @DreQueary
    @DreQueary 3 ปีที่แล้ว +2

    The blend mode and clipping ive never knew. Excellent video sir. 😀

  • @Heavenig
    @Heavenig 3 ปีที่แล้ว +1

    This video is very neat and bold to learn

  • @mashaallah1546
    @mashaallah1546 3 ปีที่แล้ว +1

    It's really amazing....
    We need more like this.....

  • @danielprytz
    @danielprytz 3 ปีที่แล้ว

    Im in love with this blend-mode man

  • @thomasschneider8474
    @thomasschneider8474 3 ปีที่แล้ว +21

    Thank you for your tricks. Really helpful.
    One thing though: careful with the fonts. Not everything is actually free. The license agreements should not be ignored. At the moment in Germany there are font providers dying to bring users to court for using fonts ten years ago that didn’t have a license for screen usage back then but now suddenly have.

    • @tenc6491
      @tenc6491 2 ปีที่แล้ว +1

      Thanks for the heads-up Thomas. Much appreciated!

  • @manishpanchal457
    @manishpanchal457 3 ปีที่แล้ว +1

    Dear sir, Your video is awesome and what you say in your title so deserve 100% for this video you provide absolute information in this one video thanku for making this video awesome and knowledgeable sir ...

  • @IlhomDadadjanov
    @IlhomDadadjanov 3 ปีที่แล้ว +1

    Very useful functions which I couldn't before I found this tutorial. Thanks.

  • @brandongoldsmith1765
    @brandongoldsmith1765 3 ปีที่แล้ว +1

    Wow background-blend-mode is amazing

  • @everydayonlineshopping3074
    @everydayonlineshopping3074 3 ปีที่แล้ว +1

    I like that...Can you make some more vid's please...You are AMAZING.

  • @proxpyi3154
    @proxpyi3154 3 ปีที่แล้ว +55

    CSS= Counter strike source

  • @richardstudent4139
    @richardstudent4139 3 ปีที่แล้ว +1

    Very helpful. Thank you very much!!!

  • @mariocalcetin7602
    @mariocalcetin7602 3 ปีที่แล้ว +3

    What good tricks friend, thank you very much and greetings from Chile.

  • @suryaadiwaskito3945
    @suryaadiwaskito3945 3 ปีที่แล้ว +1

    Thank you very much for the tips n trick, it's very useful for me who new on this

  • @neatdesign78
    @neatdesign78 3 ปีที่แล้ว

    wonderful tutorial, CSS needs people like you. :)

  • @dhwajkothari9047
    @dhwajkothari9047 3 ปีที่แล้ว +1

    Awesome video dude......its great work
    learned a lot.

  • @deepaksuthar7631
    @deepaksuthar7631 3 ปีที่แล้ว +1

    I saw your video first time, and I love you sir ❤️

  • @lesalmin
    @lesalmin 2 ปีที่แล้ว

    Didn't know the two first ones. Thanks.

  • @garrywillits8025
    @garrywillits8025 3 ปีที่แล้ว +2

    I've been a web developer for 20 years but moved into programming about 12 years ago and lost track of new css advancements. I knew most of these except for animation. I know about animating svg images but I didn't know you could alter css properties over time. I will think about how to use this in our react project. Thank you.

  • @dewasembiring7286
    @dewasembiring7286 3 ปีที่แล้ว

    Thanks a lot man, you answer my question for blend, clipping, and animations

    • @Mdbootstrap
      @Mdbootstrap  3 ปีที่แล้ว

      Thanks, that means a lot ;)

  • @MrSammotube
    @MrSammotube 4 ปีที่แล้ว +1

    Great video. I have not kept up with CSS, but this really helps add a lot more to websites.

  • @gorkemzz8735
    @gorkemzz8735 3 ปีที่แล้ว

    I just discovered this page , i love it .

  • @talhaekrem9741
    @talhaekrem9741 3 ปีที่แล้ว +1

    Thank you. That was very helpful.

  • @anshvarun653
    @anshvarun653 3 ปีที่แล้ว +4

    thank you so much for showing clip path maker! I have been using a svg ellipse and then alot of media queries for it to scale it on every devices.
    Thank you for this CSS trick 🙌🙌🙌🙌🙌🙌

  • @BubbleBeeKid
    @BubbleBeeKid 2 ปีที่แล้ว

    wonderful tricks sir. Thanks for sharing.

  • @hajimeippo804
    @hajimeippo804 3 ปีที่แล้ว

    thank you very much.. blend mode was the best

  • @nwxxzchen3105
    @nwxxzchen3105 3 ปีที่แล้ว

    Clip path, blend mode, background gradient thanks👏👏👏

  • @chickennuggies0242
    @chickennuggies0242 ปีที่แล้ว

    Dude wow you are awesome! Thank you for this video 🙏🏽

  • @chelseyhaynes22
    @chelseyhaynes22 2 ปีที่แล้ว

    You make it so much easier to understand css. Amazing video! Thank you!

  • @yassinezanina
    @yassinezanina 4 ปีที่แล้ว +6

    Blend mode was my favorite, the other I already knew, you could have added 3D transformation

  • @victorpinasarnault9135
    @victorpinasarnault9135 3 ปีที่แล้ว +1

    Very good.
    Liked and subscribed.
    Thanks.

  • @SAIEN333
    @SAIEN333 2 ปีที่แล้ว

    This is amazing stuff for a beginner. Thanks

  • @esagecantu
    @esagecantu 3 ปีที่แล้ว +1

    The first three were very informative. I will use it for my site. Mucha gracias.

  • @mercedesmulet2372
    @mercedesmulet2372 3 ปีที่แล้ว +1

    Thank you for these tricks! So well explained :D

  • @vtgus
    @vtgus 3 ปีที่แล้ว +5

    Great content! I would add pseudo-elements like ::before and after to play with additional effects and also the box-shadow property (with or without insets)

  • @conscious_competence3703
    @conscious_competence3703 3 ปีที่แล้ว +1

    Thank you so much for sharing this is awesome.

  • @jbriones4144
    @jbriones4144 3 ปีที่แล้ว +1

    I'm literally learning as a beginner and it amazes me to see all these cool websites that people are able to create. Awesome video! Thank you!

    • @Mdbootstrap
      @Mdbootstrap  3 ปีที่แล้ว +1

      Glad it was helpful!

  • @BadGirl-pn3qu
    @BadGirl-pn3qu 3 ปีที่แล้ว

    Very useful tricks! Thank you!

  • @klake12
    @klake12 3 ปีที่แล้ว +1

    this video deserves way more views, thanks for the tips!

    • @Mdbootstrap
      @Mdbootstrap  3 ปีที่แล้ว +1

      I appreciate that!

  • @ahmedbakhach2490
    @ahmedbakhach2490 3 ปีที่แล้ว

    great job
    clip and background blend are new to me

  • @schylervandeneikhof1719
    @schylervandeneikhof1719 3 ปีที่แล้ว

    For quick comprehensives I use uigradients. They just throw simple gradients at you to copy and paste on your prototype. Or finished design.

  • @dustedskaters
    @dustedskaters 3 ปีที่แล้ว +1

    Thank you brother! Keep up the amazing work :)

  • @Webtricker
    @Webtricker 2 ปีที่แล้ว

    This is very helpful and informative tricks for every web developer.

  • @MitchelStewart
    @MitchelStewart 3 ปีที่แล้ว +1

    One of the best tutorial vids out there

  • @julianpherez4625
    @julianpherez4625 3 ปีที่แล้ว +1

    The first is amazing and the best part of video.

  • @ankanpoddar8815
    @ankanpoddar8815 3 ปีที่แล้ว

    Liked for blend mode and clip path ✅

  • @instynct3190
    @instynct3190 3 ปีที่แล้ว

    I just started learning CSS, and this looks really helpful! Thanks!

  • @chinmaymathur2430
    @chinmaymathur2430 3 ปีที่แล้ว +1

    You have done a great job

  • @jenniferward6821
    @jenniferward6821 3 ปีที่แล้ว +1

    Thanks that’s terrific. Subscribed and liked

  • @sarminkhatun5595
    @sarminkhatun5595 4 ปีที่แล้ว +1

    Wowww ♥ ♥ ♥ ♥ Boss. plz.make more like this

  • @John-wx3zn
    @John-wx3zn 2 ปีที่แล้ว

    Yes, a very nice gradient tool indeed. thank you.

  • @f_dl
    @f_dl 3 ปีที่แล้ว

    3:00 let me help you instead of then come back add an id just write div#bg or just #bg and hit enter. And thanks for the video really useful

  • @junedshaikh5162
    @junedshaikh5162 3 ปีที่แล้ว +1

    Blend mode is cool stuff wow!

  • @azurewitch
    @azurewitch 3 ปีที่แล้ว +1

    Thank you so much man!!

  • @battlepumpkin6895
    @battlepumpkin6895 3 ปีที่แล้ว

    Very very nice tricks and explanation, good stuff!

    • @Mdbootstrap
      @Mdbootstrap  2 ปีที่แล้ว +1

      Glad you liked it!

  • @christosvaz
    @christosvaz 3 ปีที่แล้ว +1

    This was very helpful and detailed, thank you.

  • @kirinkappa5662
    @kirinkappa5662 4 ปีที่แล้ว +133

    "We don't need this body anymore"
    ...
    Initiates astral projection.

  • @philpchukwu8547
    @philpchukwu8547 3 ปีที่แล้ว +1

    I love the first and second tricks.
    I wish you can do a video on how to use human animations or SVG on a website

  • @dimitriskrallis3498
    @dimitriskrallis3498 3 ปีที่แล้ว +1

    simple and useful ! Nice job!

  • @bezbezov8867
    @bezbezov8867 3 ปีที่แล้ว +1

    Good job. Thanks!

  • @Shane-vh5nv
    @Shane-vh5nv 3 ปีที่แล้ว +1

    Cool tips. I think that unless the same image is used in different ways it makes more sense to apply the blend mode directly in photoshop.

    • @Mdbootstrap
      @Mdbootstrap  3 ปีที่แล้ว

      Please keep in mind that not everyone has photoshop license

  • @luisangelespinosavega7886
    @luisangelespinosavega7886 3 ปีที่แล้ว +1

    i´m full focused on backend but css is awesome!

  • @castlerock7770
    @castlerock7770 3 ปีที่แล้ว

    not the most exciting video to watch but I have learned 5 things I didn't know how to do or that CSS could do before it so thumbs up for that.

  • @sacrajah
    @sacrajah 3 ปีที่แล้ว +2

    I was knowing the animation and the rest is learnt from you. Thank you

  • @adityanariampully8756
    @adityanariampully8756 3 ปีที่แล้ว +1

    wow this was very usefull!!! Thank you bro

  • @jean-yvesmartineau1590
    @jean-yvesmartineau1590 3 ปีที่แล้ว +1

    Awesome video thank you !!

  • @2late2stop
    @2late2stop 3 ปีที่แล้ว

    Amazing. Really interesting. Thanks.

  • @smiling_madly596
    @smiling_madly596 3 ปีที่แล้ว

    Really awesome tutorial! Thanks for this.

    • @Mdbootstrap
      @Mdbootstrap  3 ปีที่แล้ว

      Glad you enjoyed it!

  • @shashithasandunil9464
    @shashithasandunil9464 3 ปีที่แล้ว +1

    Thanks clip and background-blend-mode is new to me...

  • @codeforweb7602
    @codeforweb7602 3 ปีที่แล้ว

    Great tutorial! Thanks for sharing!

    • @Mdbootstrap
      @Mdbootstrap  3 ปีที่แล้ว

      Thanks for watching :)

  • @ashwinisuryawanshi5947
    @ashwinisuryawanshi5947 4 ปีที่แล้ว +1

    Wow, tricks are awesome and easy to understand, thanks

  • @vasto1
    @vasto1 3 ปีที่แล้ว

    Thx you so much! Googlefonts trick was very helpful.

  • @miropaananen5135
    @miropaananen5135 3 ปีที่แล้ว

    I knew animation, gradients and google fonts. I would put Flex box, Grid and Calc() there because they are so useful when designing layouts.

  • @daniyalshah1736
    @daniyalshah1736 3 ปีที่แล้ว +1

    Great man❤️, just the thing i wanted 🔥, already subscribed to your channel

  • @adamonjourney3726
    @adamonjourney3726 3 ปีที่แล้ว

    Thank you very much! Learned a lot!

  • @patinho__
    @patinho__ 3 ปีที่แล้ว

    These are ACTUALLY great, i'll start implementing them right away, tysm

  • @brentdunklau4536
    @brentdunklau4536 3 ปีที่แล้ว +4

    Awesome - didn’t know any of this

  • @sabithkumar1805
    @sabithkumar1805 3 ปีที่แล้ว +1

    1,2 is very helpful

  • @angelozuniga9766
    @angelozuniga9766 3 ปีที่แล้ว +1

    Thanks for this. Youre the best!!!