DEV Community

loading...
Cover image for Some small Css tips #010

Some small Css tips #010

Stephan Nijman
Hi I'm Stephan Nijman! WordPress, Php, Javascript, React and Css Developer/Enthusiast/Blogger/Youtuber.
Originally published at since1979.dev ・1 min read

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

Discussion (12)

Collapse
obscuregit profile image
Obscure-Git

I love the border image.

Collapse
vanaf1979 profile image
Stephan Nijman Author

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 Author

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 Author

Oh thank you for that link Benjamin! 😀

Collapse
aalphaindia profile image
Pawan Pawar

Good one!!

Collapse
vanaf1979 profile image
Stephan Nijman Author

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 Author

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!