Some small css tips #004

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

Multiple transforms

Small #Css tip: You can chain multiple Css transforms to create all kinds of cool (hover) effects. 😃

👇Live preview in the CodePen below! pic.twitter.com/owvRWRzFcX
— Stephan Nijman (@Vanaf1979) January 2, 2021

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

Css transform docs: https://developer.mozilla.org/en-US/docs/Web

Images url’s in custom properties

Small #css tip: You can use Css custom properties or variables to store (background) image urls! 😃

👇Live preview in the CodePen below! pic.twitter.com/DKmbWe5h1b
— Stephan Nijman (@Vanaf1979) January 3, 2021

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

Multiple background images

Small #css tip: You can layer multiple css background images on a single element to create some nice looking effects.

👇Live preview in the CodePen below! pic.twitter.com/Jca1NNVG7T
— Stephan Nijman (@Vanaf1979) January 4, 2021

CodePen: https://codepen.io/Since1979/pen/WNGzrQz?editors=1100

Filter Drop Shadow

Small #css tip: While box-shadow creates a shadow around the edge of an image file. filter: drop-shadow() instead uses the images alpha channel, if possible, to create a shadow around the inner shape!

👇Live preview in the CodePen below. pic.twitter.com/8QP24sgh4J
— Stephan Nijman (@Vanaf1979) January 5, 2021

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

Css dop-shadow docs: https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow()

Making selections with Css pseudo-selectors

So it’s here! My very first Youtube video where we will be taking a look at how we can use #css pseudo-selectors/classes to select specific elements.

Please be kind!? 🙈🤣 https://t.co/TgeLQSiD5u
— Stephan Nijman (@Vanaf1979) January 27, 2021

Video link: https://www.youtube.com/watch?v=6JZ2sUL-Jhc

Blog post: https://dev.to/vanaf1979/making-selections-with-css-pseudo-selectors-30p7