Some small css tips #006

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

Css child selector

Small #Css tip: You can use the Css child selector (>) to select direct children only. This is extremely useful when styling a navigation where you don’t want styles to cascade to the lower level list elements.

👇Check out the CodePen and Docs below. pic.twitter.com/j8ylCL0roi
— Stephan Nijman (@Vanaf1979) January 14, 2021

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

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

:focus with Adjacent Sibling Combinator

Small #Css tip: You can combine the Css :focus pseudo-class with the Adjacent Sibling Combinator (+) to show/hide form field instructions when a field receives focus.

👇Check out the CodePen and Docs below. pic.twitter.com/SniZr0txmo
— Stephan Nijman (@Vanaf1979) January 18, 2021

Codepen: https://codepen.io/Since1979/pen/jOMXgvg?editors=1100

:focus docs: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus

Adjacent Sibling Combinator docs: https://developer.mozilla.org/en-US/docs/Web

Swap out colors using custom properties

Small #css tip: In this week's video i will show you how we can use Css custom properties/variables to swap out all text colors in a specific section on our webpage.

This was recorded late at night so excuse the sleepy head! 😜

👇Check out the video in the comment below pic.twitter.com/PYWyUJMYsH
— Stephan Nijman (@Vanaf1979) February 10, 2021

Blog post: https://dev.to/vanaf1979/swap-out-text-colors-with-css-custom-properties-4gg

Centering using Grid

Small #Css tip: You can also center items both vertically and horizontally using Grid. This is one line shorter than using Flex. 😃 pic.twitter.com/H6KIVv4RKQ
— Stephan Nijman (@Vanaf1979) January 19, 2021

Skew cards

Small #css tip: You can create distorted cards/boxes with straight content by skewing the box itself and skewing it’s content in a reversed direction! (I learned this one from looking at @5t3ph’s website, so all credits must go to her! 😜)

👇Codepen example in the link below! pic.twitter.com/j9ZNwy7CXV
— Stephan Nijman (@Vanaf1979) January 20, 2021

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

Css skewY() docs: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skewY()