#purecss — Public Fediverse posts

https://codepen.io/alsorew/pen/dPXWmed

Hover or tap inside the blue line to discover the secret.

(You can make the animation smoother, but it would require a lot more work. Nah.)

#SteamDeck #SteamMachine #VoidLinux #CSS #PureCSS #CSSAnimation #CodePen

Il #firmware per la 4 relays board controllata da un #ESP8266 è quasi pronto. Ho dedicato gli ultimi giorni a svariati fix del codice, qualche ottimizzazione e un rinfresco del layout grafico, basato su #purecss

Se vi state chiedendo a cosa può servire, io lo uso per controllare le elettrovalvole del riscaldamento a pavimento via #homeassistant 😃

#dyi #electronic #arduino

6⃣ This big collection of pure #CSS, no SVG 1 div #spinners https://codepen.io/thebabydino/pen/WNrbGBz

They are all different - can you spot the differences between similar ones?

#pureCSS #noJS #loader #cssVariables #code #coding #frontend #web #webDev #dev #webDevelopment

6⃣ This big collection of pure #CSS, no SVG 1 div #spinners https://codepen.io/thebabydino/pen/WNrbGBz

They are all different - can you spot the differences between similar ones?

#pureCSS #noJS #loader #cssVariables #code #coding #frontend #web #webDev #dev #webDevelopment

6⃣ This big collection of pure #CSS, no SVG 1 div #spinners https://codepen.io/thebabydino/pen/WNrbGBz

They are all different - can you spot the differences between similar ones?

#pureCSS #noJS #loader #cssVariables #code #coding #frontend #web #webDev #dev #webDevelopment

6⃣ This big collection of pure #CSS, no SVG 1 div #spinners https://codepen.io/thebabydino/pen/WNrbGBz

They are all different - can you spot the differences between similar ones?

#pureCSS #noJS #loader #cssVariables #code #coding #frontend #web #webDev #dev #webDevelopment

6⃣ This big collection of pure #CSS, no SVG 1 div #spinners https://codepen.io/thebabydino/pen/WNrbGBz

They are all different - can you spot the differences between similar ones?

#pureCSS #noJS #loader #cssVariables #code #coding #frontend #web #webDev #dev #webDevelopment

4⃣ Pure CSS sphere of randomly positioned, non-intersecting spheres https://codepen.io/thebabydino/pen/LYXJPEb

Uses the spherical distribution tactic described here https://mastodon.social/@anatudor/110745736820689528 and then makes sure no two spheres intersect. Also: pure CSS 3D shading!

#CSS #3D #pureCSS #css3d #transform #sphere #maths #geometry #3dGeometry #noJS #shading #code #coding #frontend #web #webDev #dev #webDevelopment

3⃣ Pure CSS morphing polyhedra: dodecahedron → rhombicosidodecahedron → snub dodecahedron → rhombicosidodecahedron → icosahedron https://codepen.io/thebabydino/pen/gOjGyby

Positions & makes faces morph using CSS transforms. Which depend on CSS vars to keep code compact https://css-tricks.com/logical-operations-with-css-variables/

#CSS #3D #pureCSS #noJS #booleanLogic #cssVariables #transform #css3d #code #coding #frontend #web #dev #webDev #webDevelopment #polyhedra #maths #geometry #3dGeometry #mathematics #platonicSolids #Archimedean

We do that by setting `animation-timeline: scroll()`.

We also remove the `animation-iteration-count`. We could also remove the `animation-duration`... except it doesn't work in Firefox without it for some reason.
¯\_(ツ)_/¯

A Firefox bug is also why the `animation-fill-mode`.

#CSS #pureCSS #noJS #scroll #scrollAnimation #text #textEffect #revealEffect #code #coding #frontend #webDev #web #webDevelopment #dev #cssAnimation

It *still* doesn't look right, so we change the end state background width from `100%` to `calc(var(--n)*1ch)`.

We also add in a `background-color`. We now have our char by char text reveal!

But this just runs infinitely on its own, so we still need to tie it to page scroll.

#CSS #pureCSS #noJS #scroll #scrollAnimation #text #textEffect #revealEffect #code #coding #frontend #webDev #web #webDevelopment #dev #cssAnimation

Let's animate the `background-size` of this gradient (which we also make non-repeating) along the x axis.

Then we clip this background to `text`.

We make the animation go char by char by using `steps(var(--n))`, where n is the text length, set by an HTML preprocessor as `--n`.

#CSS #pureCSS #noJS #scroll #scrollAnimation #text #textEffect #revealEffect #code #coding #frontend #webDev #web #webDevelopment #dev #cssAnimation

Adding a gradient! There's a difference between block and inline elements when it comes to horizontal gradients.

Block element: gradient goes from left to right edge of the box.

Inline element: gradient wraps/ progresses with the wrapping text.

You may be seeing where this is going...

#CSS #pureCSS #noJS #scroll #scrollAnimation #text #textEffect #revealEffect #code #coding #frontend #webDev #web #webDevelopment #dev #cssAnimation

#tinyCSStip

How varying the clip-path inset from the right element edge can help us with a left to right reveal effect:

* when this inset is 100% (the entire element width), then everything (to the right of the left edge) gets cut off

* when this inset is 0%, then nothing (everything right of right edge) gets cut off

Interactive illustration + on scroll use case 👇

#CSS #scroll #coding #frontend #webDev #webDevelopment #coolCSS #scrollAnimation #pureCSS #CSSvariables #CSSanimation