3D CSS guide: perspective, preserve-3d and translateZ. Carmen Ansio walks through real 3D scenes with perspective, perspective-origin, preserve-3d, cuboids, and translateZ, rotateX/Y/Z, scale3d, and matrix3d. All six are Baseline. #css #3d www.carmenansio.com/...
Agustin Capeletto
@lowpoly.gg
CSS superfan. 3D DOM wrangler. Argentino 🇦🇷 Open source @ https://layoutit.com · https://polycss.com · https://lowpoly.gg ✨
TIL CSS comments are allowed inside declarations 👀 .card { color/* wait */:/* what */red; }
📝 New CSS Article! You know the <img> element, right? It's one of the most-used elements, and yet it hides a secret. 🤫 What kind of secret? Read my latest article to know about it (You will be surprised!) master.dev/blog/somethi...
Something Nobody Told You About The Image Element (It Can Overflow!)
You normally don't think of images as overflowing themselves, nor can you put anything else inside to make it overflow, but actually...
master.dev
Gap Decorations have changed a BUNCH since they went from experimental to shipping in Chrome and Edge. Here's Microsoft's Sam Davis Omekarajr building off an example @patrickbrosset.com did for us a while back to demo what's new. css-tricks.com/css-gap-deco...
Gap Decorations Are Now Available, Here’s What’s New | CSS-Tricks
Today, with CSS gap decorations fully supported in Chrome and Edge, starting with version 149, you can now very easily style gaps, and with a lot of control.
css-tricks.com
I'm playing around with facesjs, a really cool library for generating vector-based cartoon faces. Will share some 3D CSS low-poly face stuff soon! 🤓
GitHub - zengm-games/facesjs: A JavaScript library for generating vector-based cartoon faces
A JavaScript library for generating vector-based cartoon faces - zengm-games/facesjs
github.com
I'm updating my CSS-Only Playground on @codepen.io, which features common interactive patterns without JS. A decade of web platform progress means 40% less code and 60% fewer hacks 💚 codepen.io/alowpoly/pen...
One of the most challenging parts of the Mario model is the lighting and shine. To support this in CSS, I bake a 4×4 texture for every poly+frame, stretch it with background-size, and animate it with background-position. A million texel fields packed in a single spritesheet, with no math at runtime.
It's-a me, 3D CSS Mario! 🍄 ⭐ I'm recreating Giles Goddard's iconic N64 face engine, so we can use it on the web. The rendering is handled by CSS matrix transforms, without WebGL or canvas. demo: codepen.io/alowpoly/pen... repo: github.com/layoutit/css...
The ”State of Devs 2026” survey is currently open! It's run by the same folks who do the other “State of…” surveys, but this one is about us rather than the technology. Lots of interesting questions around AI, career trajectory, our goals, etc. Check it out:
State of Devs 2026
Take the State of Devs survey
survey.devographics.com
This project is extremely fun, and it’s also important archival work. An open source museum of video game levels. noclip.website github.com/magcius/nocl...
noclip
A digital museum of video game levels
noclip.website
Colorful Spiky Sphere 🦔 1 sphere, 32 spikes, 180 sides, #CSS only. 😎 🔗 Live on @codepen.io: codepen.io/editor/amit_...
New in VoxJong v0.26: URL state, so you can resume ongoing games. Play it: voxjong.com 🀄 Fork it: github.com/layoutit/vox...
I'm going to Greece this september and getting a bit obsessed Everything you see in this scene is an HTML <pre> with colored <span> inside Try it: glyphcss.com/examples/par...
Need to start thinking about subgrid support for grid.layoutit.com! 🖖 cc @patak.cat
✍️ New Article: Rebuilding FIFA Standings Layout with CSS Subgrid I rebuilt FIFA’s standings layout with CSS Grid and subgrid. It starts with the layout problem, then moves into the final solution, with interactive examples along the way, as usual! 🔗 ishadeed.com/article/fifa...
Check out GlyphCSS! It's a 3D ASCII fork of PolyCSS that's getting weirder by the minute. glyphcss.com
GlyphCSS v0.1.1 has a new texture synthethizer!
Low-poly Messi getting ready for the #WorldCup match. Rendered with 3D CSS, without WebGL. Full game (Actua Soccer '95) coming soon!
We are opening a community chat for PolyCSS: a place to discuss the library in particular, and 3D DOM rendering in general. It's my first time using Discord, so bear with me 🐻 All humans welcome! chat.polycss.com
An now, for my next trick, we will answer the CSS questions everyone had for years: how to center horizontally. Like, really, 100 different ways. Some are quite hacky, but, still, fun to explore just to test the limits of CSS, hehe Tool made by @css-only.dev css-generators.com/center/
How to center an element horizontally and vertically
100 different ways to center a single element horizontally and vertically inside a container.
css-generators.com
New in PolyCSS v0.2.8: better shadows, CAD support, plus an optional three.js adapter for a more familiar API. Try it! polycss.com
Finally 😁 Throwing Confetti with CSS Random | Throwing some confetti while exploring the CSS random() function through its specification and its current implementations, finding both the beauty and the pitfalls along the way. | schalkneethling.com/posts/throwi...
Throwing Confetti with CSS Random
Throwing some confetti while exploring the CSS random() function through its specification and its current implementations, finding both the beauty and the pitfalls along the way.
schalkneethling.com
Can't wait for native CSS mixins! This is long overdue 🙏
CSS mixins are great for little utilities, to shorten the code and make it easy to reuse. Tailwind could be a really good candidate for a mixins refactor! Left: tailwind, styles all over your HTML 🤮 Right: mixins, same DRY reuse, plus separation of concerns, semantic HTML, and parameters.
We've been experimenting with CSS´s upcoming Random() function to see what it can do. In the mean time we found a few browser crashes and a way to implement random-item() before it actually lands. Best viewed in Polypane 29+ (For now!) polypane.app/blog/experim...
Experimenting with random() in CSS | Polypane
CSS is getting a random() function that lets you set properties with a random value, letting you make interesting and creative new designs. It's available in…
polypane.app