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
121
14,234
Rob DiMarzo retweeted
stateful svgs are so hot right now.
35
49
4
1,664
79,747
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,538
Rob DiMarzo retweeted
curved infinite CSS grid scroller but actually you’re jus’ standing inside a barrel ↓
17
19
2
457
18,232
Rob DiMarzo retweeted
stretching animation vs. extending animation drag vs. ⌥ + drag 👨‍🍳
6
4
219
17,926
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.
125
229
55
3,418
262,618
Rob DiMarzo retweeted
Sine and Cosine waves are...nothing but the shadows of a spinning circle.
152
1,882
150
14,065
1,070,590
Rob DiMarzo retweeted
Modern CSS capabilities.
26
113
6
1,437
128,673
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
108
34,286
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,484
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
249
20,082
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,469
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,588
when animating variable font weights remember to include tighter optical sizing to maintain the width of the text
45
48
14
1,500
169,766
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,244
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,537
104,119
Rob DiMarzo retweeted
thursdays are for topography experiments
15
36
821
34,650
Rob DiMarzo retweeted
i gave every train in new york an instrument 🎧 sound on trainjazz.com
173
1,405
128
10,757
686,985
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,984
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,785