[ 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: 1791550776651.jpg (170.64 KB, 1024x1024, img_1791550767579_sj3ze1ha.jpg)ImgOps Exif Google Yandex

b2200 No.2292

i've stopped using separate borders for that pressed look on buttons. it's way cleaner to just use an inset shadow with a tiny offset instead of messing with border-width or padding.
>it looks so much smoother

box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);


makes the element feel flat tactile without adding extra pixels to the layout box. does anyone else still bother with borders for this?

b2200 No.2314

>>2292
>it looks so much smoother

Totally agree on that smoothness. Borders always mess with my box-sizing calculations and it's such a headache when things shift by a pixel. I started stacking a tiny white inset shadow on top of the dark one to simulate a highlight on the edge. It makes the button look almost 3D without any heavy lifting. Just tried this:
box-shadow:   inset 0 2px 4px rgba(0,0,0,0.2),  inset 0 -1px 0 rgba(255,255,255,0.1);

Adds a bit of specular highlight to the bottom edge. Just gotta be careful with too many layers or the colors start getting muddy and weird.


[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 ]