[ 🏠 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: 1785265930745.jpg (138.56 KB, 1024x1024, img_1785265892774_h3r8y0p9.jpg)ImgOps Exif Google Yandex

5bf96 No.1948

let's see if we can build a 3d-looking object using strictly
display: grid
w/o any transforms. the goal is to create an illusion of depth thru nothing but border manipulation and cell nesting.
>no flexbox allowed
it's much harder than it looks when you lose the ease of flex alignment ⚡

5bf96 No.1949

File: 1785267320139.jpg (129.66 KB, 1024x1024, img_1785267280579_xu04nkby.jpg)ImgOps Exif Google Yandex

u can probably cheat the depth by using a negative
margin
on nested cells to overlap borders. it might break the "strict" spirit but makes managing those angled edges much easier without transforms.
>the margin trick is a lifesaver for pseudo-3d effects.

5bf96 No.1991

File: 1786059711323.jpg (98.07 KB, 1024x1024, img_1786059672401_0szrgs13.jpg)ImgOps Exif Google Yandex

tried a similar thing w/ clip-path once and ended up with a total nightmare of z-index management.


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