Create accountLogin

Recent searches

No recent searches

Search options

Only available when logged in.
mastodon.social is one of the many independent Mastodon servers you can use to participate in the fediverse.
The original server operated by the Mastodon gGmbH non-profit

Administered by:

Server stats:

348K
active users

mastodon.social: AboutStatusProfiles directoryPrivacy policy

Mastodon: AboutGet the appKeyboard shortcutsView source codev4.4.0-nightly.2025-04-01

Ana Tudor 🐯

🚫 DON'T use layered text-shadows for text outlines just because text-stroke is broken (mastodon.social/@anatudor/1124), they are going to produce ugly corners, thickened roundings and angled lines.

✅ DO: use `paint-order: stroke fill` instead!

``` .mytext { /* 🚫 DON'T */ text-shadow: 2px 2px 0 black, -2px -2px 0 black, -2px 2px 0 black, 2px -2px 0 black, 2px 0 0 black, -2px 0 0 black, 0 2px 0 black, 0 -2px 0 black; } .mytext { /* ✅ DO */ -webkit-text-stroke: #000 4px; paint-order: stroke fill } ```
Screenshot showing the same text with the DON'T (text-shadow emulating outlines) vs. the DO (paint-order to fix inner strokes mess) tactic. The text-shadow method comes with corner issues and angled lines getting thickened.
Screenshot showing the same text with the DON'T (text-shadow emulating outlines) vs. the DO (paint-order to fix inner strokes mess) tactic. The text-shadow method comes with corner issues and angled lines getting thickened.
#CSS#typography#code
·Public
12boosts·25favorites
ExploreLive feeds
About