#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

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 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

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

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

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

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

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

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

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

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

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

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

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

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

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

We ensure there's always a scrollbar by making the body taller than the viewport.

We give the text container `position: fixed` so it doesn't scroll with the page.

Within this, we wrap the entire text in a `span` (in an `inline` element). This is important for the next step...

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

We ensure there's always a scrollbar by making the body taller than the viewport.

We give the text container `position: fixed` so it doesn't scroll with the page.

Within this, we wrap the entire text in a `span` (in an `inline` element). This is important for the next step...

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

The how behind the demo!

First, we need a monospaced font (each character needs to have the same width of `1ch`) where increasing the `font-weight` doesn't increase the horizontal space occupied by a letter.

This is important because we'll be taking `1ch` steps for text reveal.

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

The how behind the demo!

First, we need a monospaced font (each character needs to have the same width of `1ch`) where increasing the `font-weight` doesn't increase the horizontal space occupied by a letter.

This is important because we'll be taking `1ch` steps for text reveal.

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

Here's a pure CSS char by char text reveal on scroll!

@codepen demo https://codepen.io/thebabydino/pen/MWPeLmp

No splitting text into individual characters!

Inspired by an old Toblerone Story page, except that used JS (reasonable for cross-browser support) and was splitting the text into individual characters (yikes! 😱)

cc @bramus

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

Here's a pure CSS char by char text reveal on scroll!

@codepen demo https://codepen.io/thebabydino/pen/MWPeLmp

No splitting text into individual characters!

Inspired by an old Toblerone Story page, except that used JS (reasonable for cross-browser support) and was splitting the text into individual characters (yikes! 😱)

cc @bramus

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

I turn 12 on @codepen in less than a month, so here are my most hearted demos ever:

1️⃣ 955 ❤️ Pure CSS gravity button https://codepen.io/thebabydino/pen/bGzeQrv

My only demo to ever pass 850 ❤️ - a bit mixed about it, it was just an exercise in getting a certain result - please don't use it in the wild!

#css #pureCSS #gravity #button #code #coding #frontend #web #dev #webDevelopment #webDev

I turn 12 on @codepen in less than a month, so here are my most hearted demos ever:

1️⃣ 955 ❤️ Pure CSS gravity button https://codepen.io/thebabydino/pen/bGzeQrv

My only demo to ever pass 850 ❤️ - a bit mixed about it, it was just an exercise in getting a certain result - please don't use it in the wild!

#css #pureCSS #gravity #button #code #coding #frontend #web #dev #webDevelopment #webDev

#cssChallenge2024 How would you code this text effect with:

❌no text duplication
❌no splitting text in multiple elements
❌no JS, no images at all
⚠️under 15 CSS declarations, including prettifying & layout + a simple SVG filter

Palette: 0c7fc1, f7961f, 0a161f, 323232.

If you're a $5+ patron on Patreon, you know where to find the answer.

#pureCSS #CSS #textEffect #filter #SVG #svgFilter #code #coding #frontend #webDev #webDevelopment

#cssChallenge2024 How would you code this text effect with:

❌no text duplication
❌no splitting text in multiple elements
❌no JS, no images at all
⚠️under 15 CSS declarations, including prettifying & layout + a simple SVG filter

Palette: 0c7fc1, f7961f, 0a161f, 323232.

If you're a $5+ patron on Patreon, you know where to find the answer.

#pureCSS #CSS #textEffect #filter #SVG #svgFilter #code #coding #frontend #webDev #webDevelopment

@css Responsive #purecss menus would be nice... thanks.
#nojs

@css Responsive #purecss menus would be nice... thanks.
#nojs

RT Ben Evans
Fancy a fun holiday challenge? 🎄
Fork & put your own piece of furniture in this room.
The funnier & the more adventurous the better.
All forks will be reviewed in a YouTube video early next year.
https://codepen.io/ivorjetski/pen/vYbPgdE
Inspired by @garethheyes ♥️
#cssonly #purecss @CodePen

:sys_twitter: https://twitter.com/ivorjetski/status/1733246103464624489

RT Ben Evans
Fancy a fun holiday challenge? 🎄
Fork & put your own piece of furniture in this room.
The funnier & the more adventurous the better.
All forks will be reviewed in a YouTube video early next year.
https://codepen.io/ivorjetski/pen/vYbPgdE
Inspired by @garethheyes ♥️
#cssonly #purecss @CodePen

:sys_twitter: https://twitter.com/ivorjetski/status/1733246103464624489

#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

#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

It's a CSS Maze!! 🌽
Unless in Safari... In which case it's some random shapes 🙃
https://codepen.io/ivorjetski/pen/poQpveN

🚳 No images
📵 No JavaScript
👨‍💻 Just CSS + a sprinkling of HTML

First one to screenshot the end wins... Go!! 🎉

@[email protected]
@[email protected] #nocode #purecss #cssonly #cssart #ccsgame