Advanced CSS Tricks for Web Developers

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

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

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

    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!

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

    OMG! The mask was like magic, and I will subscribe to your channel for more tips, tricks, and advanced CSS and HTML thank you so much!!!!

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

    Very useful video. Please keep making this type of videos showing us advance tips and tricks. Thank you :)

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

    Just a small audio tip: if you apply a noise gate in your audio processor, and adjust the threshold settings correctly, you can remove the background noise/breathing into your mic.

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

      Thank you, will apply that :)

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

    selection text color changing is awesome
    long days in this doubt but now cleared thanks..

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

    This is the first time I am getting to know these features. Really Great. Great learning. You are awesome.

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

    These are REALLY great!! I'd love to see an entire video where you explain the counter trick. That was mind-blowing!!

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

    All of these are new to me, so thank you!

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

      I'm glad you found this video useful :)

  • @elijah4840
    @elijah4840 4 ปีที่แล้ว +8

    I don’t know bootstrap, but if you keep posting useful videos related to CSS then I’ll have no choice but to sub. JS has an exhaustive amount of tutorials, but imo, css is arguably the most important part of web bc if people don’t like the way it looks/have a bad experience then they won’t use it... regardless of how beautiful your JavaScript looks

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

      I know Im asking the wrong place but does anybody know of a trick to log back into an Instagram account..?
      I was stupid forgot my password. I love any tricks you can give me.

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

    Didn't know the first two. Thanks.

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

    Nice useful tricks.thanks for this tutorial.

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

    thank you for sharing these css tricks

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

    Very cool. Yes I am enjoying watching your video at the same time I am learning.

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

    Really amazing tips, all are helpful. Thanks!

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

    Those are amazing. Thanks for your videos.

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

    Didn’t know such properties existed in css… shockingly interesting.

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

    Thank you for great tutorials! Very nice and helpful 👍

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

      Glad it was helpful!

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

    I agree with the last comment. OMGosh, mask was like magic. I enjoyed all your videos. Thanks for teaching us.
    -zone34

  • @A9kit.k
    @A9kit.k 3 ปีที่แล้ว

    Hi David, such a nice tutorial. Please keep posting such tricks, really interesting and helpful.

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

    These are awesome and I didnt know them!

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

    Amazing content! Keep making magic!

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

    wow! great I can add this to my mini projects

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

    Awesome tricks, thx for sharing. One more subscriber for your Channel.

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

    Nice, thanks a lot, great tutorial

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

      Glad you liked it :)

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

    at "counter" part I was like "what...?"

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

    omg i searched everywhere for changing the required field but finally found it

  • @psychedelic-chi
    @psychedelic-chi ปีที่แล้ว

    thank you, very nice!

  • @chandanadeshmukh4368
    @chandanadeshmukh4368 4 ปีที่แล้ว

    Last one was helpful. Thanks!

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

    These are cool thanks

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

    Image mask is mind blowing.

  • @David-Ray
    @David-Ray 4 ปีที่แล้ว

    These are really cool! Thank you for showing these.

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

    Great video !!

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

    Thank you

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

    Thanks 👍👍👍👍

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

    thank you, before you told me I did not know. css styling with +

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

      There are many operators used in css like >, +, ~, *, space etc... These are very useful operators and as a development we should know these...

  • @luischinchilla-garcia4840
    @luischinchilla-garcia4840 4 ปีที่แล้ว

    Awesome tips! Can you provide any of the source code used? Especially the counters? Thanks.

  • @puspamadak
    @puspamadak 4 ปีที่แล้ว

    Thanks a lot for these wonderful CSS tricks. I really liked the mask-image, story book and counters. I didn't know that CSS counters can be so insane. Till now, I used to do these using JS, but from now on I can do them with plain CSS!!

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

      Glad it was helpful!

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

    Sir Kindly upload more tutorials on bootstrap 4 please

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

    Hey. Great content, well done!

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

    Thank you!

  • @shadialyazji596
    @shadialyazji596 4 ปีที่แล้ว

    This video it's very useful
    Thanks for You 🥰

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

    We'll done keep it

  • @pankajwandre5961
    @pankajwandre5961 4 ปีที่แล้ว

    Hey man.. Im your big fan.. Your videos are awesome.. 👍🏻👍🏻

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

      Thank you so much 😀

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

    It seems like a magic😱 is it really CSS I can't beleive that😁😁 by the way thanks man

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

    I did not know about thiese. Thank you

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

      I'm glad you found this video useful :)

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

    Excellent !

  • @khalidabuhijleh3475
    @khalidabuhijleh3475 4 ปีที่แล้ว

    Thank You Man

  • @amitsinha5260
    @amitsinha5260 4 ปีที่แล้ว

    Thanks for showing the advanced css tricks.. all these features are they compatible with all the modern browsers??

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

      Depending on when someone will read this comment it may change so the easiest way is to always verify, i.e. here: caniuse.com/

  • @nematjonabdulloev3568
    @nematjonabdulloev3568 4 ปีที่แล้ว

    Great job.
    Does masking feature supported by browsers?

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

      After testing, I can say that the latest Firefox supports it and for Chrome you need to use -webkit prefix.

  • @marv-ws1rs
    @marv-ws1rs ปีที่แล้ว

    At 5:20 you increment the counter right AFTER setting the content. So why doesn´t start the counter at 0? Is it because they start at 1 by default or because the order of the statements don´t matter?

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

    thanks

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

    Brilliant

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

    Koxowy filmik przydatny mega dzieki

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

    Only the last option I was not known is because I have never got any requirements to update the selection color in any project... Very informative video, I am sureany of us would not be known about this options... Like different options with border-radius property as well...

  • @anthonyk.forson6258
    @anthonyk.forson6258 2 ปีที่แล้ว

    This is a great video,,,..

  • @marv-ws1rs
    @marv-ws1rs ปีที่แล้ว

    At 6:54: why isn´t our first defined counter "section" working anymore?

  • @Dr.smileclinic
    @Dr.smileclinic 3 ปีที่แล้ว

    Usefull..

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

    благодарю, впервые увидел такие свойства

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

    thanks a lot :D

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

    Nice

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

    Alguien me ayuda? En el 1ro si pongo webkit no me aparece ninguna imagen visible pero si arrastro me sale como que hay una imagen y si le Quito el webkit me sale la imagen jpg sin la máscara ni el png

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

      Let me move this conversation to the forum, please create a ticket here:
      mdbootstrap.com/support/
      It's much easier to solve issues there instead of the YT comment section.
      You can specify your device, browser, OS and above all, you can add a code snippet if you need.
      Me or one of my colleagues will do our best to help you out.
      PS. If your ticket refers to a video, please add the timestamp of the point where the problem occurred

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

    Amazing

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

    Hey can you please telle some resources to learn CSS advance course. Please?

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

      Sure, I have a whole playlist of videos that teach css - th-cam.com/video/3c5uVqkYcKA/w-d-xo.html

  • @ThomasWSmith-wm5xn
    @ThomasWSmith-wm5xn 3 ปีที่แล้ว

    Why would someone want to use css counter vs js to handle that?

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

    Before watching this video I think that I am master in atleast CSS but that was a dream😂

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

    nice!

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

    I knew everything except mask 😛

  • @christostsm5795
    @christostsm5795 4 ปีที่แล้ว

    Isn't webkit deprecated ?

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

      Most of the newest browser don't use it anymore however keep in mind that while building the app you have to offer a support also for an old browsers too.

  • @Ezzedini
    @Ezzedini 4 ปีที่แล้ว

    first comment

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

      Now time to subscribe :>

    • @Ezzedini
      @Ezzedini 4 ปีที่แล้ว

      @@Mdbootstrap hahahaha i wouldn't be here if i was subbed, keep up the nice work !

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

    Please explain the concepts ...showing tricks without explaining isnt useful.

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

      What's there to explain? If you don't know what a mask or a counter is, it's not up to the presenter to fill you with absolute knowledge of each subject. You have the power to look more into what these things are. MDB shows you clearly what each CSS property does. They're described almost in plain English.

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

    Doesnt work with Chrome...mask-image doesnt exist

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

      You can add below code like this
      -webkit-mask-image so it does support in chrome for sure.

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

    fireee'
    sti

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

    Thanks. Really interesting stuff.