Fabio Curatolo

Father, Vegetarian, IT, Developer, Graphic Designer, Artist, Musician, Singer, Passionate of all Sciences.

[jhey ʕ•ᴥ•ʔ @jh3yy]

messin' with css frosted + saturated borders using background-clip + backdrop-filter 👨‍🍳

[jhey ʕ•ᴥ•ʔ @jh3yy]

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;

[Fabio Curatolo @CuratoloDev]

@elonmusk I assure you that the birth rate is mainly due to poor economic resources. More wealth = increased birth rate. I'll tell you this as an underpaid developer who has to support a family with twins, unfortunately we don't get to the end of the month.

[jeantimex @jeantimex]

Demo link: https://t.co/T7s0cwFgSr

[jhey ʕ•ᴥ•ʔ @jh3yy]

configurable transition strips™

view transitions + css clip-path → copy to clipboard

use for page transitions, theme switching, etc. 🧑‍🍳

[jhey ʕ•ᴥ•ʔ @jh3yy]

tiny detail: cursor: pointer needed a pointerdown counterpart 👇

button:active {
cursor: url(pointerdown.svg) 15 10, pointer;
}

[Ali @alicalimli_dev]

Most devs don't know CSS can do spring animations.

This linear function does the trick:

.btn {
...
transition: all 800ms linear(
0,
0.7 10%,

/* overshoot → spring pop */
1.2 20%,
0.9 40%,

/* another small overshoot for realism */
1.05 70%,
1
);
}

.btn:hover {
transform: scale(1.2);
}

The key is those 2 overshoot values.

Going past 1 twice snapping back below 1 is what creates the spring feel on hover.

Have you used linear() before? 👀

[jhey ʕ•ᴥ•ʔ @jh3yy]

scroll-driven wordmark morph w/ css

give each translate axis a different timing function to create a curved motion path instead of a straight line 👇

.wordmark {
animation-name: tx, ty;
animation-timing-function: ease-in, ease-out;
animation-timeline: scroll(root);
}

[Ali @alicalimli_dev]

How to truncate texts with ellipsis in pure CSS.

p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 30rem;
}

[jhey ʕ•ᴥ•ʔ @jh3yy]

the key is "configuration" for your prototypes 👨‍🍳

same prototype. different easing curves. completely different feel 👇

[jhey ʕ•ᴥ•ʔ @jh3yy]

your signature is a custom easing function™ ✒️

draw it
map the motion to css linear() timing function
package as portable SVG

paste anywhere 👇

[Ali @alicalimli_dev]

CSS Content Fade Effect. ✨

.vertical-fade {
mask-image: linear-gradient(
to bottom,
transparent 0%,
black 15%,
black 85%,
transparent 100%
);

/* Webkit Support */
-webkit-mask-image: linear-gradient(
to bottom,
transparent 0%,
black 15%,
black 85%,
transparent 100%
);
}

.horizontal-fade {
mask-image: linear-gradient(
to right,
transparent 0%,
black 15%,
black 85%,
transparent 100%
);

-webkit-mask-image: linear-gradient(
to right,
transparent 0%,
black 15%,
black 85%,
transparent 100%
);
}

[jhey ʕ•ᴥ•ʔ @jh3yy]

reminder that you can also create lighting effects with a little css + svg filters

<feSpecularLighting> + <fePointLight> bound to pointer position 👨‍🍳

[jhey ʕ•ᴥ•ʔ @jh3yy]

it's a combo of css pow() + clamp() that makes it possible 👨‍🍳

[jhey ʕ•ᴥ•ʔ @jh3yy]

using css pow() you can create runtime-configurable fluid typography that responds to viewport or container size 😉

for example, "minimum of 14px at 375px and scale to maximum 24px at 1500px"

all powered by pow() and custom properties

[Ali @alicalimli_dev]

This one line of CSS will fix the annoying layout shift that scrollbars cause.

This happens when a non-scrollable container becomes scrollable due to its content.

This gets rid of that problem:

.container {
scrollbar-gutter: stable;
}

With that, space is reserved for the scrollbar before it even appears.

So there's no layout shifts when content grows.

Use both-edges if your content is centered.

It mirrors the reserved space on both sides of the container to keep the layout balanced.

If you found this one useful, follow for more. ❤️

[Fabio Curatolo @CuratoloDev]

@svegfinne @WebUndefeated Let me explain why: Bolognese sauce contains pieces of meat, so we use a fresh, medium and large perforated pasta in the middle, then the sauce is incorporated into the hole and by eating it you appreciate pasta, meat sauce and all together.There is always a logic to Italian food

[Ali @alicalimli_dev]

Some hover states might be hurting your website's mobile experience.

On mobile, hover states gets stuck when users tap on them.

This CSS media query fixes that:

@ media (hover: hover) {
.card:hover {
opacity: 0.5;
}
}

With that, the hover transitions will only apply for devices that actually supports hovering.

If you found this one useful, follow for more. ❤️

[CSS by T. Afif @ChallengesCss]

Now it's lazy and bouncy! 😆

Demo: https://t.co/mYnqVVgacQ via @CodePen

Too much bouncing? Well, drag it slowly! 🫠

[jhey ʕ•ᴥ•ʔ @jh3yy]

<shimmer-details> configurable css text reveal 💫