My Top CSS Tips As Shared on Twitter - Part 1

Hi! I'm @5t3ph on Twitter (and most other places on the web) and I often share CSS tips there. These come from my 13+ years experience, and are pulled from my current work as well as solutions I've explored within my tutorials from ModernCSS.dev.

Some of those tips have gotten folx pretty excited about CSS features, so I wanted to compile them here!

Create a Gradient Border

And here's a bonus starting CodePen for this effect >

object-fit For Responsive Images

Create A Square-Joined Border

Access An Attribute's Value

Link Legibility

Responsive Layout Spacing

Flip An Element

Trick For Using :visited

More Aesthetic :focus Styles

Colors in Windows High Contrast Mode

Don't Forget :target Styles!

Comments

[Daniel Cuttridge]

Great stuff. Much love for the non-SASS examples too!

[Ben Halpern]

Great round up.

[George Francis]

Yes! I'm always a big fan of your CSS tips. Thanks for sharing!