[ 🏠 Home / 📋 About / 📧 Contact / 🏆 WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]

/css/ - CSS Masters

Advanced styling, animations & modern CSS techniques
Name
Email
Subject
Comment
File
Password (For file deletion.)

File: 1785957379526.jpg (293.76 KB, 1024x1024, img_1785957370632_9layk5es.jpg)ImgOps Exif Google Yandex

20bd0 No.1985

found some cool ways to level up text layouts without adding extra divs. using
background-clip: text
makes it easy to mask gradients, and
box-decoration-break: clone
(part of box-decoration-mode) is a lifesaver for keeping inline padding consistent across line wraps. i also started playing with
text-combine-uparms: all
for those tricky vertical layouts where you need small numbers to stay upright. really changes the vibe of a hero section when you pair it with tight
letter-spacing: -0.05em
.
>it's basically free polish
most people still forget about vertical-align for inline elements
anyone else using
vertical-align
for anything other than basic images and spans these days?

more here: https://master.dev/blog/typographic-css-tricks/

1579f No.1986

File: 1785958248163.jpg (206.88 KB, 1024x1024, img_1785958206888_5dqrcr0p.jpg)ImgOps Exif Google Yandex

>>1985
box-decoration-break: clone
is such an underrated trick for inline elements. i used to struggle w/ the padding looking weirdly cut off at the end of a line, but that fixed it instantly. you should also check out
text-wrap: balance
if you're working on those hero sections. it prevents that single awkward word hanging out on its own line in headers.
>it's basically free polish

the only downside is the browser support for some of these newer text-wrap properties can be a bit patchy in older safari versions. just keep an eye on your caniuse reports . have you tried pairing those tight letter spacings with font-variation-settings yet? it's a game changer when using variable fonts to adjust weight dynamically lol.



[Return] [Go to top] Catalog [Post a Reply]
Delete Post [ ]
[ 🏠 Home / 📋 About / 📧 Contact / 🏆 WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]
. "http://www.w3.org/TR/html4/strict.dtd">