Another CSS article to create single element loaders. This time it's about the Zig-Zag collection.

freecodecamp.org/news/zig-zag... via @freecodecamp.bsky.social

A beginner-friendly article to learn simple animation tricks.

The Zig-Zag loaders collection: css-loaders.com/zig-zag/

#CSS

Screenshot eines Liniendiagramms, bei dem jeder Pfad marker-Elemente in den passenden Farben hat - mit `context-fill`

Kann man marker-Elemente in #svg so stylen, dass sie die Farbe des referenzierenden Elements übernehmen? - Ja, mit context-fill und stroke-fill!
Läuft in allen Browsern außer Safari.
wiki.selfhtml.org/wiki/SVG/Far...
#html #datenvisualisierung #webdesign

.thing { /* you can use these without transform! */ translate: 50%; rotate: 45deg; scale: 0.5 }

Heads up, #CSS lets you specify independent transforms.

So instead of `transform: scale(0.5)` you can use `scale: 0.5`.

This also lets you animate the values separately. For example, you could could animate `rotate` specifically without worrying about any `scale` value set on it.

Infografik: neues Netzsymbol in blau-gelb und 30 Jahre SELFHTML

Save the Date: 30 Jahre #SELFHTML vom 23. - 25.05.2025 - noch 200 Tage bis zum SELF-Treffen
blog.selfhtml.org/2024/nov/04/...
#webdesign #informatik

Screenshot eines Grid, bei dem alle Bilder mittig zentriert sind

#selfhtml hat 6-teiliges Tutorial über Grid Layout mit teils neuen Beispielen:
wiki.selfhtml.org/wiki/CSS/Tut...
#css #grid #webdeisgn