Stephanie EcklesHi! I'm @5t3ph on Twitter (and most other places on the web) and here are more of my top shared CSS tips!
I've also released a dedicated project for modern CSS snippets, so be sure to also check out SmolCSS.dev!
"The One About Centering"
🟣 CSS Quick Tip
"The One About Centering"
Here we have the ✨ most modern way ✨ to vertically and horizontally center anything!
ℹ️ For more explanation and other centering options, check out my comprehensive guide:
moderncss.dev/complete-guide…12:41 PM - 31 Jan 2021
"PhotoShop" Effects with mix-blend-mode
🟣 CSS Quick Tip
So - you've been given the logo file, but it's a jpeg and what you need is a transparent png!
Ideally, you get the correct file 🤣 But in a pinch, you can use `mix-blend-mode` as shown.
Play with a few more options in this @CodePen:
codepen.io/5t3ph/pen/ExNa…12:41 PM - 01 Feb 2021
The ex Unit
🟣 CSS Quick Tip
You want `ex` not `em` for setting <code> `font-size`
Monospace fonts have a larger visual and/or actual height than body text. For typesetting <code> which may appear in a paragraph or link, `1.75ex` is a good starting point.
`ex` = x-height of element's font18:39 PM - 15 Feb 2021
Updating Custom Properties With JS
🟣 CSS Quick Tip
Did you know you can update a CSS custom property value with JavaScript?
This enables all sorts of dynamic styling capabilities!
📺 For a quick intro to CSS custom properties, check out my ~3min video:
egghead.io/lessons/css-de…12:41 PM - 05 Feb 2021
Visualizing the place- Shorthand Properties
🟣 CSS Quick Tip for Grid Positioning
place-items
- shorthand for align-items and justify-items
place-content
- shorthand for align-content and justify-content
Here's a quick demo showing the difference of each with a `center` value and multiple items
codepen.io/5t3ph/pen/MWbE… twitter.com/rchrdnsh/statu…21:51 PM - 21 Feb 2021
SmolCSS Avatar List Component
Lots of tips packed into this component, be sure to click through to learn more!
✨ Fresh on SmolCSS
🙍🏾♀️ Smol Avatar List Component
This one is *packed* with nifty features and considerate of accessibility. And it's the first animated demo, as shown in the video preview.
Check it out, and I'd love to know what bits were new to you!
smolcss.dev/#smol-avatar-l…12:41 PM - 21 Feb 2021
SmolCSS "Smol Stack" Layout
✨ Fresh on SmolCSS
🥞 Smol Stack Layout
See how using a single `grid-template-area` can replace older techniques that relied on `position: absolute`
This layout solution is a personal fave - check the links below the demo for more examples!
SmolCSS.dev/#smol-stack-la…12:41 PM - 20 Feb 2021
