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.
Small #css tip: You can toggle a class in your markup using a little bit of #javascript and use that class to change the appearance of your elements, like change your background color.
👇Check out the CodePen below.11:47 AM - 11 Feb 2021
Element.classList docs: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
Alternative cursors.
Small #css tip: You can set alternative cursors for your elements that need something different than the standard arrow pointer, and you can even use a custom image as your cursor. 😀
👇Check out the CodePen below.11:59 AM - 12 Feb 2021
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.
Small #css tips: You can create some funky looking ima effects with css mix-blend-mode.
👇Check out the CodePen below.13:19 PM - 15 Feb 2021
Css mix-blend-mode docs: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
Css border-image.
Small #css tip: Instead of solid colors for your borders you can also create a fancy effect by using gradient colors with border-image. This tip is inspired by an awesome article by Bramus, for which you can find a link below.
👇Check out the CodePen below11:26 AM - 16 Feb 2021
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!