Mastodawn

Bon les gens, plusieurs jours que je suis dessus !

Nouvelle page sur le LAB

Typographie Réactive : Variable Font CSS pur, zéro SVG, zéro JS.

Une seule propriété `--offset` pilote l'épaisseur du trait. Le navigateur recalcule 256 points d'ancrage à 60fps pendant le survol.

`@property` + `clip-path` + `calc()` = fonte animée depuis CSS.

https://sebschopf.github.io/lab/matrice-typographie-reactive.html

Il y a un bug, mais on va le retravailler dans un prochain article avec `clamp()` et `cqi` — la taille de la lettre définira elle-même son espacement.

#CSS #ClipPath #BrutalDesign #WebLab #Typography

Learn JavaScript, React, and TypeScript to Node.js, Fullstack, and Backend [Unofficial]Apr 6

Let’s Get Puzzled!

https://fed.brid.gy/r/https://frontendmasters.com/blog/creating-puzzle-peices-in-css/

Ana Tudor 🐯Jan 14

A little thing: candy 🍬 ghost 👻 buttons, 3 techniques in one @codepen demo
https://codepen.io/thebabydino/pen/ExvNBRY

Detailed explanation of the how behind in this @csstricks post https://css-tricks.com/css-ing-candy-ghost-buttons/

Bonus: a hover animated, Chrome-only version https://codepen.io/thebabydino/pen/VwzpMxV

#CSS #cssGradient #cssMask #coding #web #dev #webDev #webDevelopment #code #frontend #clipPath #cssClipPath

Ana Tudor 🐯Jan 9

Cool concave rounding header component on @codepen: https://codepen.io/thebabydino/pen/azOgOKE

#CSS #clipPath #cssClipPath #cssMask #cssGradient #code #coding #frontend #web #dev #webDevelopment #webDev

lemssiah Dec 18

Simulating the Earth’s rotation using CSS and the clip-path property isn’t new. Is this any good?

https://codepen.io/art-eque/pen/XWGMpOW

#CSS #WebDesign #FrontendDevelopment #CreativeCoding #Animation #ClipPath #WebAnimation

Earth Rotation

...

Ana Tudor 🐯Dec 17

Here's a little pure #CSS demo I made on @codepen a while back: clip element on #scroll https://codepen.io/thebabydino/pen/vEGBOrg

(using scroll-driven animations, so support may still be spotty)

#cssScrollAnimation #scrollAnimation #clipPath #cssClipPath #code #coding #web #dev #webDevelopment #webDev #frontend #cssAnimation #scrollEffect

Ana Tudor 🐯Nov 18

Funky forms on @codepen https://codepen.io/thebabydino/pen/raeOWOj

Full 3D form option vs. weird 2D shape. Which do you prefer?

#CSS #3D #transform #clipPath #filter #SVG #svgFilter #code #coding #frontend #web #dev #webDev #webdevelopment

Ana Tudor 🐯Oct 9, 2025

Because someone just hearted this demo I made over half a decade ago on @codepen:

https://codepen.io/thebabydino/pen/bGEBObR

It's a pure #CSS Platonic solids gallery. They animate on hover/ tap. All is computed, there are no magic numbers.

#Maths #3D #Geometry #trigonometry #clipPath #cssClipPath #code #frontend #web #dev #webDev #webDevelopment #coding #transform #cssTransform #css3D

Pure CSS Platonic solids gallery (fully responsive, hover/ tap to animate)

Both the shapes and the shading are pure CSS. The polygonal faces are created using `clip-path`, so the demo only works in modern browsers supporting t...

Show thread

Ana Tudor 🐯Oct 9, 2025

BTW, the CSS is heavily commented. And I've changed the images to something a bit more fitting for this time of year.

https://codepen.io/thebabydino/details/WbrjrZM

And now you can tell what gave me the idea for yesterday's challenge https://mastodon.social/@anatudor/115337483292849914

#CSS #Maths #layout #cssLayout #cssGrid #trigonometry #code #coding #frontend #transform #cssTransform #cssClipPath #clipping #clipPath #containerQueries #containerQuery #webDevelopment #web #dev #webDev

Ana Tudor 🐯Oct 8, 2025

Because this got asked on reddit https://www.reddit.com/r/css/comments/1o069yi/comment/ni8evf4/

Made a demo with various options for angled grid columns. Uses mathematical computations to ensure all fits just right all the time, regardless of viewport or number of columns.

On @codepen https://codepen.io/thebabydino/pen/WbrjrZM

Enjoy!