css trick for the "shine" border 🧑‍🍳 take a... pseudoelement position + give it an inset box-shadow mask it off at an angle with a linear-gradient 🤙 bonus: use corner-shape: squircle + rotate on pointer moveshow more

you can totally do it with css 🧑‍🍳 use... a border mask, layers + overflow: hidden, or other tricks skip animating the gradient though, jus' spin a 1:1 gradient layer 🤙show more

Neat li'l #CSS gradient trick: A gradient circular chart... effect 👀 1. a gradient mask 2. a conic gradient all the details on my blogshow more

Shine animations in CSS are actually simple to make.... .shine-container { position: relative; overflow: hidden; } .shine-container::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.25), transparent ); animation: shine 1.5s infinite; } KEYframe Galaxy Studios shine { 100% { transform: translateX(100%); } } Now you have a reusable shine effect, that you can reuse in any container! If you found this useful, follow for more. ❤️show more

I've built an app to play around with the... new CSS squircle feature. →show more

if you’re dynamically masking a scroll container with css,... consider leaving room for the scrollbar instead of masking it too 🧑‍🍳 mask-repeat: no-repeat; mask-size: calc(100% - 10px) 100px;show more

The new corner-shape CSS property unlocks exciting new UI... patterns. corner-shape: bevel round; border-radius: 1em 0 / 3em 0;show more

`autofill` on inputs is ugly by default the background... bleed ruins the clean design systems, especially in dark mode. fixed it with a pure CSS inset shadow hack: autofill:shadow-[inset_0_0_0px_1000px_var(--color-background)] to force the background color and kill the native blue.show more

Future CSS Tip! 🤞 You could create an image... zoom/crop using the CSS object-view-box property 🔍 img { object-fit: cover; object-view-box: inset( var(--top) var(--right) var(--bottom) var(--left) ); } CodePen.IO link below! 👇show more

An entire Christmas Dinner for four people, in a... box, for £25. Would you give it a go?show more

Remember Arteta explaining why he wants the pass from... full-back to winger on an angle, not straight. Brighton Clip: FB a bit narrower → angled pass → easier for Trossard to play round the corner & use the air→ Gyokeres reacts to the pass. Leeds Clip: FB wider → straighter pass → harder to play but credit Trossard’s ability to rotate his hips and still find it→ This time Gyokeres is already on the move, anticipating it. Clear sign of a growing player relationship between Trossard & Gyokeres 🤝show more

Old: just slap a gradient on it New: just... use a shader… shader it allshow more

💡CSS techniques: "The Backlight" Using a blur filter you... can create an elegant backlight (or a "smart shadow") effect for your images. In a pseudo-element: 1⃣ `inherit` a background 2️⃣ blur it 3⃣ put it behind the main element using z-index Here's how it works:show more

Today I learnt that you can: - use arrow... keys to move an object - use < and > to rotate - use Page Up and Down to move an object up and down I LOVE THE PEOPLE WHO MADE THIS A THING. Kisses for you 😘😘😘 #WoWHousingshow more

I've created a simple website that allows you to... play with squircles using modern CSS `corner-shape`show more

💡CSS Tip! Create a tooltip that follows an anchor... with modern CSS! No JavaScript is used to control the position of the tooltip or its tail. It's 100% CSS magic!show more

using CSS grid you can avoid width change in... the parent container whilst making it responsive 🤙 the trick: update and transition the grid-template-columns for the list on :focus/:hover ✨show more

💡 CSS Tip! Two circles, one arrow, and CSS... magic. 🪄 A cool demo packed with modern features (anchor positioning, attr(), container queries, shape(), and more!) 🤩 The shape and position of the arrow are fully controlled using CSS.show more

Looking for beta testers to use an iOS app... I'm making for Linear 2 weeks ago I started toying around with what a simple and minimal iOS app could look like for linear and I'm ready to get some feedback. I'm calling it Changes - comment/dm/rt/etc for an inviteshow more

Use CSS custom properties and the sin() trigonometric function... to give each character an eased animation-delay 🤙 .char { animation-delay: calc( sin((var(--index) / var(--total)) * 90deg) * var(--duration) ); }show more