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.12:32 PM - 14 Jan 2021
Css child selector docs: https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator
: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.11:50 AM - 18 Jan 2021
focus docs: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus
Adjacent Sibling Combinator docs: https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator
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 below13:39 PM - 10 Feb 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. 😃11:50 AM - 19 Jan 2021
Skew cards
Css skewY() docs: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skewY()
Subscribe and Follow
Subscribe to my Youtube channel.
Thanks for reading/watching and stay safe
Top comments (0)