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.
Thanks for reading/watching and stay safe
Top comments (12)
I love the border image.
Yeah, that's a really nice feature. It's a bit wonky to animate though!
I'd love that border-image to be able to have border-radius working. 🤨
I guess that doesn't work because it's tiling the background image. But it would certainly be nice! :)
Hey, I found this today: codyhouse.co/nuggets/css-gradient-...
That's some wonderfull solution to combine the gradient and the border-radius
Oh thank you for that link Benjamin! 😀
Good one!!
Thank you Pawan! Glad you liked it! :)
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 :)
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. :)
Oh, great. Never heard about 'mix-blend-mode'.
Thanks for this and other tips ;)
These tips are really useful, thank you!