Some small css tips #012

To continue on my previous post here are some more tweets with little Css tips that might help you in your projects.

Css background image set.

Small #css tip: With the latest version of Firefox now supporting it we can use the Css image-set() function in most major browsers to serve different resolution images for different devices and internet speeds. 😃 pic.twitter.com/DXqxL4oxV4
— Stephan Nijman (@Vanaf1979) February 24, 2021

Control touch interactions.

Small #css tip: You can determine what kind of touch interactions are available for your elements by using the css touch-action property.

Css Touch-action documentation: https://t.co/jh5FPS1PB2

Css-Tricks Almanac: https://t.co/ygdJhHtpkK pic.twitter.com/fTeoO7jHqC
— Stephan Nijman (@Vanaf1979) February 25, 2021

No pointer events

Small #css tip. You can prevent elements from firing javascript events by adding pointer-events: none; This can be handy if you don’t want nested elements to fire bubbling events making your event target an unexpected element.

👇Check out the CodePen below! pic.twitter.com/1zd54hCXDC
— Stephan Nijman (@Vanaf1979) February 26, 2021

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

Pointer-Events docs: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

Event Bubbling: https://javascript.info/bubbling-and-capturing

Slicing with Clip path

Small #css tip: You can cut off (clip) any or all sides of your elements using css clip-path and the inset() function. Combined with an animation this can create some nice effects on things like buttons.

👇Check out the CodePen below. pic.twitter.com/UBsc7ZHLRD
— Stephan Nijman (@Vanaf1979) March 1, 2021

Css background image set.

Control touch interactions.

No pointer events

Slicing with Clip path

Subscribe and Follow

Related posts

Some small css tips #016

Some small css tips #015

Some small css tips #014