Alessio Carone

I'm a great italian Web/Ux Designer, and yes, really modest about it ;D - Living, working and having fun in Barcelona. I make people happy and tiramisu!

[Alessio Carone @Littlemad]

is anyone still here? :D First post since so many years!

[jhey ʕ•ᴥ•ʔ @jh3yy]

CSS Tip! 🤯

You can create a CSS-only version of this balance slider using a scroll animation on the underlying input[type=range] 🚀

::-webkit-slider-thumb {
view-timeline: --thumb inline;
}

Scroll animation driven by the slider thumb animates a number between the "min" and "max" of the range 😅

@​property --value {
inherits: true;
initial-value: 0;
syntax: '<integer>';
}
@​keyframes sync { to { --value: 100; }}

Tie that up to the contain animation-range ⚡️

.control {
animation: sync both linear reverse;
animation-timeline: --thumb;
animation-range: contain;
}

Hoist the view timeline so all the parts of the control can use it!

.control { timeline-scope: --thumb; }

Use that value in a counter which is used for the labels. Create a low and a high for each side 😇

.control__label {
counter-reset:
low var(--value)
high calc(100 - var(--value));
}
.control__label::before {
content: "COFFEE " counter(low) "%";
}
.control__label::after {
content: counter(high) "% MILK";
}

That's the magic of updating the label values ✨

For the big track, it's a fake track. You can make use of the same --value property and do some calc() to work out the width of each part.

<div class="control__track">
<div class="control__indicator"></div>
</div>

.control__track::before {
width: calc(var(--value) * 1% - 0.5rem);
background: var(--coffee);
border-radius: 4px;
transition: width 0.1s;
}

The width leaves a little gap for the indicator piece 🤙

The color calculation for --coffee isn't too wild but again you can use the same --value

.control__track {
--coffee: hsl(24 74% calc(
24% + (30% * ((100 - var(--value, 0)) / 100)) / 1
) / 0.4);
}

Now for the last piece. Making the track change height. You could set up another custom property and animate its value using the --thumb timeline too 🔥

@​property --shift {
initial-value: 0;
inherits: true;
syntax: '<integer>';
}
@​keyframes shift {
0%, 31%, 61%, 100% { --shift: 0; }
32%, 60% { --shift: 1; }
}

Then use that --shift to update the translation of the label and height of the track 🤓

.label {
transform: translateY(calc(var(--shift) * 50%));
transition: transform var(--speed) var(--timing);
}

Cool part here is that you can use the control to work out the @​keyframes percentages 😅

Oh. And the timing for that little bounce? Use the linear() function 😎

:root {
--timing: linear(
0, 0.5007 7.21%, 0.7803 12.29%,
0.8883 14.93%, 0.9724 17.63%,
1.0343 20.44%, 1.0754 23.44%,
1.0898 25.22%, 1.0984 27.11%,
1.1014 29.15%, 1.0989 31.4%,
1.0854 35.23%, 1.0196 48.86%,
1.0043 54.06%, 0.9956 59.6%,
0.9925 68.11%, 1
);
}

Should probably do a video on this one. Lots of little custom property tricks for sure! 💯 It's not too far off the range slider with the tooltip that came up previously

As always, any questions, let me know! Also, this one only works in Chrome currently ✅🥲

This one's a bit rocket science ha 🚀

@CodePen link below! 👇

[Vitaly Friedman 🇺🇦🏳️‍🌈 @vitalyf]

⛺🪵🔥 Free Storytelling Masterclass (+ PDFs)

A comprehensive guide with 9 modules on storytelling, PDF worksheets, 1-pager sketchnotes, free lectures, video courses and a videos from influential female storytellers. By Jeremy Connell-Waite. 👏🏽

https://t.co/294BpSILFe

#ux

[Alessio Carone @Littlemad]

My company is looking for some experienced Front Ender that live in Barcelona for a job position. Does anyone knows someone that could recommend? https://t.co/qcKrFJDYOH

[Alessio Carone @Littlemad]

@martinleblanc Feedback: Only 3 test feel incredibly low number to get an idea of his capability in terms of prompt.

[Alessio Carone @Littlemad]

@davescook @cole007 I absolutely agree. I would think Lennon to be absolutely against this.

[Chris Heilmann codepo8.bsky.social @codepo8]

👉🏼 „‘Can I Use…’, but for ARIA! - Bocoup”
🔗https://t.co/YMetFuVho6
💬 When developing and creating accessible web experiences, knowing how different screen readers will interpret your web components is tricky.

[Alessio Carone @Littlemad]

@brucel In the Jungle...

[Chris Heilmann codepo8.bsky.social @codepo8]

👉🏼 „Write Better CSS By Borrowing Ideas From JavaScript Functions — Smashing Magazine”
🔗https://t.co/Dc7KcxfE79
💬 Avoid unwanted side effects. Use the right parameters. Consider how inputs change outputs.

[Alessio Carone @Littlemad]

@zetareticoli same here! was a plague

[Alessio Carone @Littlemad]

@Signalnoise gm!

[Alessio Carone @Littlemad]

@dadimakesmusic @Eurovision I loved the reference! you were amazing!

[Alessio Carone @Littlemad]

My first videogame was Diablo, and today playing most of the day DIABLO IV. Come and watch me @ https://t.co/1WhslqYHPb ready to kick some Devil ass along the way, with my Sorceress!!!! #DiabloIV #twitch #streaming #gaming #coop #rpg

[mymind @mymind]

Yes.

[Alessio Carone @Littlemad]

@codepo8 Ah, holy words. If you get hired, and get the chance hire me as well! :D (living in an expensive city just because of work! :D ) [Good luck in your job hunting]

[Alessio Carone @Littlemad]

@brucel @codepo8 it is what literally is happening to my company, and it is a lot of fixes... A LOT :D

[Alessio Carone @Littlemad]

@brucel Ask me any time! Inspector is your best friend. caniuse as well to see if things are supported. And border box painting for helping and see what the hell is being selected with!

[Alessio Carone @Littlemad]

@manuelcheta @brucel amateur! :D I go for 10px red :D