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
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…
18
341
33
1,768
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
2
13
122
14,217
Rob DiMarzo retweeted
stateful svgs are so hot right now.
35
49
4
1,663
79,644
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.
12
73
4,532
Rob DiMarzo retweeted
curved infinite CSS grid scroller but actually you’re jus’ standing inside a barrel ↓
17
19
2
458
18,208
Rob DiMarzo retweeted
stretching animation vs. extending animation drag vs. ⌥ + drag 👨‍🍳
6
4
219
17,915
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.
127
229
55
3,419
262,421
Rob DiMarzo retweeted
Sine and Cosine waves are...nothing but the shadows of a spinning circle.
152
1,888
150
14,093
1,070,380
Rob DiMarzo retweeted
Modern CSS capabilities.
26
113
6
1,439
128,644
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)
13
2
106
33,719
Rob DiMarzo retweeted
Customizable select is coming to Safari 27! 🥳 Want to try it out? Check out my demo collection: codepen.io/collection/BNZjPe
2
13
1
112
5,479
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!
2
14
250
20,057
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 👇
13
144
12
1,638
352,457
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" } );
16
36
5
1,052
70,506
when animating variable font weights remember to include tighter optical sizing to maintain the width of the text
45
48
14
1,501
169,683
Rob DiMarzo retweeted
OoooOOooh! Guess what! As of Chrome 149, shape() works in shape-outside! So you can really *shape* your UI's 😉* rect() and xywh() are also supported for shape-outside in Chrome 149 *(just let me have my Mom joke)
17
67
3
558
43,241
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); }
18
91
3
1,538
104,057
Rob DiMarzo retweeted
thursdays are for topography experiments
15
36
821
34,645
Rob DiMarzo retweeted
i gave every train in new york an instrument 🎧 sound on trainjazz.com
173
1,408
128
10,765
686,880
Rob DiMarzo retweeted
I don't think we're ready for an explosion of in-browser text effects like this
28
44
1
1,092
67,979
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.
3
67
3
678
47,782