#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

@jcrabapple every time I see #PureCSS I get blown away, like how is it possible lol.

It's like if someone said I made a house out of pure paint.

Pure CSS meets voxel art! 🧊✨

Agustin Capeletto takes us behind the scenes of the CSS Voxel Editor, showing how stacked grids, transforms, and perspective create a fully addressable 3D space—no JavaScript required.

Read the article: https://tympanus.net/codrops/2025/03/03/css-meets-voxel-art-building-a-rendering-engine-with-stacked-grids/

#3d #css #voxelart #purecss

Pure CSS on scroll reveal & parallax effects on @codepen
https://codepen.io/thebabydino/pen/abgOxaW

Pay attention to how images slide within their own element boxes 😼

Saw a demo using JS for this parallax effect and... I seem to be on a mission to redo every scroll effect in pure CSS.

cc @bramus

#CSS #pureCSS #scroll #reveal #scrollAnimation #scrollEffect #code #coding #frontend #web #webDev #webDevelopment #dev

Pure CSS on scroll reveal & parallax effects on @codepen
https://codepen.io/thebabydino/pen/abgOxaW

Pay attention to how images slide within their own element boxes 😼

Saw a demo using JS for this parallax effect and... I seem to be on a mission to redo every scroll effect in pure CSS.

cc @bramus

#CSS #pureCSS #scroll #reveal #scrollAnimation #scrollEffect #code #coding #frontend #web #webDev #webDevelopment #dev

Pure CSS on scroll reveal & parallax effects on @codepen
https://codepen.io/thebabydino/pen/abgOxaW

Pay attention to how images slide within their own element boxes 😼

Saw a demo using JS for this parallax effect and... I seem to be on a mission to redo every scroll effect in pure CSS.

cc @bramus

#CSS #pureCSS #scroll #reveal #scrollAnimation #scrollEffect #code #coding #frontend #web #webDev #webDevelopment #dev

Pure CSS on scroll reveal & parallax effects on @codepen
https://codepen.io/thebabydino/pen/abgOxaW

Pay attention to how images slide within their own element boxes 😼

Saw a demo using JS for this parallax effect and... I seem to be on a mission to redo every scroll effect in pure CSS.

cc @bramus

#CSS #pureCSS #scroll #reveal #scrollAnimation #scrollEffect #code #coding #frontend #web #webDev #webDevelopment #dev

Pure CSS on scroll reveal & parallax effects on @codepen
https://codepen.io/thebabydino/pen/abgOxaW

Pay attention to how images slide within their own element boxes 😼

Saw a demo using JS for this parallax effect and... I seem to be on a mission to redo every scroll effect in pure CSS.

cc @bramus

#CSS #pureCSS #scroll #reveal #scrollAnimation #scrollEffect #code #coding #frontend #web #webDev #webDevelopment #dev

We can simplify things further to not even include a wave animation. Instead, the 3D surface is static in this case.

Live on @codepen https://codepen.io/thebabydino/pen/gOzGEqb

Basically, we don't have
z = f(x, y, t)
but
z = f(x, y)
because the surface shape doesn't change in time anymore.

#CSS #3D #pureCSS #noJS #Maths #geometry #Mathematics #code #coding #surface #frontend #function #web #webDevelopment #dev #webDev

If that's laggy for you, check out this version https://codepen.io/thebabydino/pen/LYJQpzQ which just uses 1 element per square grid cell, instead of 1 element and its 2 pseudos, each creating one of the 2 triangles for that grid cell.

This also doesn't use an SVG filter for corner rounding.

#CSS #3D #pureCSS #noJS #Maths #geometry #Mathematics #code #coding #surface #frontend #function #web #webDevelopment #dev #webDev

8⃣ Pure CSS prisms with rounded corners https://codepen.io/thebabydino/pen/wvmRXeM

In case you're wondering about the how behind https://github.com/w3c/csswg-drafts/issues/9843#issuecomment-1951351003

#CSS #3D #pureCSS #noJS #Maths #geometry #Mathematics #code #coding #surface #frontend #function #web #webDevelopment #dev #webDev

7⃣ Pure CSS waving surface https://codepen.io/thebabydino/pen/rNZJmPa

Given a 3D function varying in time
z = f(x, y, t)
make a pure CSS 3D representation of it.

Went through a lot of iterations, partly because support for some features wasn't always there, partly because I had ideas to improve.

#CSS #3D #pureCSS #noJS #Maths #geometry #Mathematics #code #coding #surface #frontend #function #web #webDevelopment #dev #webDev

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

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

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

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

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

If you're a patron on Patreon, then you may have seen the solution over a year ago. Here it is now public for everyone to see on @codepen: https://codepen.io/thebabydino/pen/rNqPGMM

Also an entry for this week's #CodePenChallenge (scroll snapping).

#scroll #scrollAnimation #scrollEffect #diagonal #angled #code #coding #pureCSS #CSS #frontend #CodePen #web #webDev #wbDevelopment #dev #cats #bigCat

If you're a patron on Patreon, then you may have seen the solution over a year ago. Here it is now public for everyone to see on @codepen: https://codepen.io/thebabydino/pen/rNqPGMM

Also an entry for this week's #CodePenChallenge (scroll snapping).

#scroll #scrollAnimation #scrollEffect #diagonal #angled #code #coding #pureCSS #CSS #frontend #CodePen #web #webDev #wbDevelopment #dev #cats #bigCat

If you're a patron on Patreon, then you may have seen the solution over a year ago. Here it is now public for everyone to see on @codepen: https://codepen.io/thebabydino/pen/rNqPGMM

Also an entry for this week's #CodePenChallenge (scroll snapping).

#scroll #scrollAnimation #scrollEffect #diagonal #angled #code #coding #pureCSS #CSS #frontend #CodePen #web #webDev #wbDevelopment #dev #cats #bigCat

If you're a patron on Patreon, then you may have seen the solution over a year ago. Here it is now public for everyone to see on @codepen: https://codepen.io/thebabydino/pen/rNqPGMM

Also an entry for this week's #CodePenChallenge (scroll snapping).

#scroll #scrollAnimation #scrollEffect #diagonal #angled #code #coding #pureCSS #CSS #frontend #CodePen #web #webDev #wbDevelopment #dev #cats #bigCat

If you're a patron on Patreon, then you may have seen the solution over a year ago. Here it is now public for everyone to see on @codepen: https://codepen.io/thebabydino/pen/rNqPGMM

Also an entry for this week's #CodePenChallenge (scroll snapping).

#scroll #scrollAnimation #scrollEffect #diagonal #angled #code #coding #pureCSS #CSS #frontend #CodePen #web #webDev #wbDevelopment #dev #cats #bigCat

I retro-fitted animation-timeline to my old #purecss King of Hearts, to see how easy it would be... It was too easy! 🤩 Animation-timeline is amazing!! 🥳

https://codepen.io/ivorjetski/pen/VwOraXv
via
@CodePen

#css #cssart #cssartist #cssonly #frontend

My pure CSS entry for this week's #CodePenChallenge: scroll progress indicator that's a nav bar in disguise.

Smooth scrolling, pure CSS scroll-driven animations, CSS variables and more, all in one @codepen demo https://codepen.io/thebabydino/full/gOJWwZX

See description for support info.

#scroll #scrollAnimation #pureCSS #css #smoothScroll #code #coding #frontend #web #webDev #webDevelopment #dev

My pure CSS entry for this week's #CodePenChallenge: scroll progress indicator that's a nav bar in disguise.

Smooth scrolling, pure CSS scroll-driven animations, CSS variables and more, all in one @codepen demo https://codepen.io/thebabydino/full/gOJWwZX

See description for support info.

#scroll #scrollAnimation #pureCSS #css #smoothScroll #code #coding #frontend #web #webDev #webDevelopment #dev

My pure CSS entry for this week's #CodePenChallenge: scroll progress indicator that's a nav bar in disguise.

Smooth scrolling, pure CSS scroll-driven animations, CSS variables and more, all in one @codepen demo https://codepen.io/thebabydino/full/gOJWwZX

See description for support info.

#scroll #scrollAnimation #pureCSS #css #smoothScroll #code #coding #frontend #web #webDev #webDevelopment #dev

My pure CSS entry for this week's #CodePenChallenge: scroll progress indicator that's a nav bar in disguise.

Smooth scrolling, pure CSS scroll-driven animations, CSS variables and more, all in one @codepen demo https://codepen.io/thebabydino/full/gOJWwZX

See description for support info.

#scroll #scrollAnimation #pureCSS #css #smoothScroll #code #coding #frontend #web #webDev #webDevelopment #dev

My pure CSS entry for this week's #CodePenChallenge: scroll progress indicator that's a nav bar in disguise.

Smooth scrolling, pure CSS scroll-driven animations, CSS variables and more, all in one @codepen demo https://codepen.io/thebabydino/full/gOJWwZX

See description for support info.

#scroll #scrollAnimation #pureCSS #css #smoothScroll #code #coding #frontend #web #webDev #webDevelopment #dev

And here's a pure CSS on scroll char by char text reveal that depends not on the full page scroll, but on the element coming into view!

Live on @codepen https://codepen.io/thebabydino/pen/zYmVrRL

No text duplication, no splitting text into individual characters.

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

And here's a pure CSS on scroll char by char text reveal that depends not on the full page scroll, but on the element coming into view!

Live on @codepen https://codepen.io/thebabydino/pen/zYmVrRL

No text duplication, no splitting text into individual characters.

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

And here's a pure CSS on scroll char by char text reveal that depends not on the full page scroll, but on the element coming into view!

Live on @codepen https://codepen.io/thebabydino/pen/zYmVrRL

No text duplication, no splitting text into individual characters.

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

And here's a pure CSS on scroll char by char text reveal that depends not on the full page scroll, but on the element coming into view!

Live on @codepen https://codepen.io/thebabydino/pen/zYmVrRL

No text duplication, no splitting text into individual characters.

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

And here's a pure CSS on scroll char by char text reveal that depends not on the full page scroll, but on the element coming into view!

Live on @codepen https://codepen.io/thebabydino/pen/zYmVrRL

No text duplication, no splitting text into individual characters.

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

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

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

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

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

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

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

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

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

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