DEV Community

Cover image for Some small Css tips #010
Stephan Nijman
Stephan Nijman

Posted on • Originally published at since1979.dev

Some small Css tips #010

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

Top comments (12)

Collapse
 
kritishd8 profile image
Obscure.

I love the border image.

Collapse
 
vanaf1979 profile image
Stephan Nijman

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

Collapse
 
benavern profile image
Benjamin CARADEUC

I'd love that border-image to be able to have border-radius working. 🤨

Thread Thread
 
vanaf1979 profile image
Stephan Nijman

I guess that doesn't work because it's tiling the background image. But it would certainly be nice! :)

Thread Thread
 
benavern profile image
Benjamin CARADEUC

Hey, I found this today: codyhouse.co/nuggets/css-gradient-...
That's some wonderfull solution to combine the gradient and the border-radius

Thread Thread
 
vanaf1979 profile image
Stephan Nijman

Oh thank you for that link Benjamin! 😀

Collapse
 
aalphaindia profile image
Pawan Pawar

Good one!!

Collapse
 
vanaf1979 profile image
Stephan Nijman

Thank you Pawan! Glad you liked it! :)

Collapse
 
btlm profile image
btlm

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 :)

Collapse
 
vanaf1979 profile image
Stephan Nijman

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. :)

Collapse
 
veselovoleg profile image
OlegVeselov

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

Collapse
 
enzodiaz25 profile image
Enzo

These tips are really useful, thank you!