
Designer and UX engineer. CSS enthusiast. Leading design systems and building web apps @KPMG. Expect nerdy topics. Views are my own.
New Jersey
Joined July 2011
- Tweets7.4K
- Following1.5K
- Followers1.3K
- Likes20.5K
Pinned Tweet
Ever wonder how hex colors work? Explore how 6 lil numbers and letters work together to create color with HEXplorer @CodePen !
✨ codepen.io/robdimarzo/pen/xx…
Rob DiMarzo retweeted
sibling-index() = knowing your exact spot in line
sibling-count() = knowing how long the line is
Both CSS functions have reached Baseline Newly Available status for the latest browsers.
Read the full docs → goo.gle/4ho0ePn
Guides and fallbacks are in Modern Web Guidance → goo.gle/4AhBGPG
Rob DiMarzo retweeted
Yes, it's responsive. All the values are updated on screen/container resize!
Getting information from a simple grid is good, but what about a complex one where the items are randomly placed? 👀
css-tip.com/grid-information…
A fancy demo powered by Scroll-Driven Animations and more!
All the values are calculated and displayed using only CSS.
Rob DiMarzo retweeted
curved infinite CSS grid scroller
but actually you’re jus’ standing inside a barrel ↓
Rob DiMarzo retweeted
IKEA instructions are famously painful.
so I turned them into an interactive 3D build guide, in 3 hours
and won 2nd place at the @designmeetuphq make-a-thon !
get ready for the sf make-a-thon! july 31, 6–10pm @AngelList founders cafe.
pair up, tackle a surprise prompt, and build a working prototype in one night.
judged by @advmsyed, @floguo, @/kennethkuh and @/jenniferjing
$4k/$2k/$1k prizes. details below.
Modern CSS capabilities.

ALT A technical diagram comparing three ways to style element corners using CSS variables `--r: 12px` and `--gap: 4px`. 1. "Border Radius": Standard support across all major browsers using `border-radius: var(--r)`. 2. "Corner Shape": Uses `corner-start-end-shape: scoop` and `border-start-end-radius` calculation, shown with Chrome and Edge icons. 3. "Border Shape": Uses a complex custom `border-shape` definition (likely CSS Houdini/Paint API) with extensive geometry calculations for shoulders and arcs, indicated with a Chrome Canary icon.
Rob DiMarzo retweeted
Who said range sliders need to be straight and boring?! Hey CSS, distort the line! 〰️
css-tip.com/wiggly-range-sli…
Another funny demo powered by border-shape, scroll-driven animations, and more
The HTML code? Only an input element (no extra code is needed)
Rob DiMarzo retweeted
Use the scroll-padding CSS property when using a scroll fade so your items don't get stuck in the fade region.
Bonus: It also makes clicking through each option way more convenient!
Rob DiMarzo retweeted
Animated img carousel 🤙
Use CSS trig functions to get radius and layout images as a cylinder 🤓
Use scroll animation to rotate the cylinder 📜
:root {
--a: calc((360 / var(--total)) * 1deg);
--r: calc((var(--item-width) / sin(var(--a))) * -1);
}
Explained 👇
Replying to @jh3yy
@jh3yy Demo request! This image strip, but in pure CSS:
codepen.io/trusktr/pen/Pogrr…
Rob DiMarzo retweeted
Design Engineering Tip:
Separate the object from its shadow.
When an element lifts away from a surface, the shadow doesn't always need to move with it. Keeping the shadow grounded and fading it based on distance can create a stronger sense of depth and physicality.
Used carefully, this can make interfaces feel more tangible and less like layers floating on a screen. It's not something I'd apply everywhere, but for moments that need extra emphasis, it can be surprisingly effective.
js
const card = document.querySelector(".notification"); const shadow = document.querySelector(".shadow"); card.animate( [ { transform: "translateY(0)" }, { transform: "translateY(-160px)" }, ], { duration: 900, easing: "cubic-bezier(.64,0,.78,0)" } ); shadow.animate( [ { opacity: 0.5, transform: "scaleX(1)" }, { opacity: 0, transform: "scaleX(.35)" }, ], { duration: 700, easing: "ease-out" } );
Rob DiMarzo retweeted
when animating variable font weights remember to include tighter optical sizing to maintain the width of the text
Rob DiMarzo retweeted
reminder: this magnetic nav link effect?
jus' a few lines of css + anchor positioning 🤙
li:has(a:is(:hover, :focus-visible)) { anchor-name: --a; }
ul::before {
position-anchor: --a;
left: anchor(left);
top: anchor(top);
width: anchor-size(width);
}
Rob DiMarzo retweeted
CSS Subgrid is now Baseline Widely Available across all major engines → goo.gle/4lOlLRL
It allows nested elements to inherit and align with their parent’s grid tracks, ensuring perfect alignment across complex layouts without manual sizing hacks.






















