Some small Css tips #010
Stephan Nijman

Stephan Nijman @vanaf1979

About: Hi I'm Stephan Nijman! WordPress, Php, Javascript, React and Css Developer/Enthusiast/Blogger/Youtuber.

Location:
the Netherlands
Joined:
Apr 23, 2019

Some small Css tips #010

Publish Date: Mar 15 '21
56 12

To continue on my previous post here are some more tweets with little Css tips that might help you in your projects.

Toggle classes with Javascript and change your styles.



Element.classList docs: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList


Alternative cursors.



Css: Swap out text colors with css custom properties.

I didn't put out a new video this week, but you might have missed this one.

Also check out my blog post: https://dev.to/vanaf1979/swap-out-text-colors-with-css-custom-properties-4gg


Css mix-blend-mode.




Css mix-blend-mode docs: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode


Css border-image.



Brammus article: https://www.bram.us/2021/01/29/animating-a-css-gradient-border/


Subscribe and Follow

Subscribe to my Youtube channel.

Follow me on Twitter

Thanks for reading/watching and stay safe

Comments 12 total

  • btlm
    btlmMar 15, 2021

    Great post! Also for the first example there is no need to use JS for simple toggling classes. We can use checkbox' label and checked property selector in CSS :)

    • Stephan Nijman
      Stephan NijmanMar 15, 2021

      Thanks. And you are absolutely right! This is just an example of how we could do it with js. Because it could be useful in some cases. :)

  • Obscure.
    Obscure.Mar 15, 2021

    I love the border image.

    • Stephan Nijman
      Stephan NijmanMar 15, 2021

      Yeah, that's a really nice feature. It's a bit wonky to animate though!

  • Pawan Pawar
    Pawan PawarMar 16, 2021

    Good one!!

  • Enzo
    EnzoMar 18, 2021

    These tips are really useful, thank you!

  • OlegVeselov
    OlegVeselovMar 18, 2021

    Oh, great. Never heard about 'mix-blend-mode'.
    Thanks for this and other tips ;)

Add comment