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.

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. pic.twitter.com/i5xldar5I1
— Stephan Nijman (@Vanaf1979) February 11, 2021

CodePen: https://codepen.io/Since1979/pen/mdOEGmb

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. pic.twitter.com/dek8g7IJNf
— Stephan Nijman (@Vanaf1979) February 12, 2021

CodePen: https://codepen.io/Since1979/pen/yLVVZJP

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. pic.twitter.com/Nk4ZaTxo9X
— Stephan Nijman (@Vanaf1979) February 15, 2021

CodePen: https://codepen.io/Since1979/pen/NWbpRbJ

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 below pic.twitter.com/OOdEPrIrR5
— Stephan Nijman (@Vanaf1979) February 16, 2021

CodePen: https://codepen.io/Since1979/pen/yLVMGXB

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