Webtagr - Technologienummer

CSS Zoom vs. Scale: Der Unterschied

2025-02-21

Dieser Artikel untersucht den Hauptunterschied zwischen den CSS-Eigenschaften `zoom` und `scale`. Obwohl beide Elemente skalieren können, berechnet `zoom` das Seitenlayout neu, im Gegensatz zu `scale`. Das bedeutet, dass die Verwendung von `zoom` das Layout anderer Elemente beeinflusst, während `scale` nur die Größe des Elements ändert. Ein CodePen-Beispiel veranschaulicht den Unterschied und regt zu weiterer Erkundung an.

(css-tip.com)

Entwicklung

CSS-Hover-Animation: Clevere Verwendung einer invertierten Radiusform

2025-02-02

Dieser Artikel zeigt eine Methode, um mit CSS einen coolen Hover-Animationseffekt zu erstellen. Durch die geschickte Kombination einer invertierten Radiusform, CSS-Variablen und `@property` wird eine sanfte Reveal-Animation erreicht, bei der der Text beim Darüberfahren allmählich erscheint. Der Code ist prägnant und effizient und nutzt CSS-Masken und -Verläufe für einen visuell beeindruckenden Effekt. Dies ist eine wertvolle CSS-Technik, die es sich zu lernen lohnt, geeignet für Entwickler mit etwas CSS-Erfahrung.

(css-tip.com)

Design CSS-Tricks

Animationen ohne Keyframes: Ein neuer CSS-Trick

2025-01-12

Mit dem neuen CSS-Feature `@starting-style` lassen sich Animationen ohne `@keyframes` erstellen. Dies ersetzt nicht die klassische Animationsmethode, ist aber in bestimmten Situationen ein nützlicher Trick. Der Artikel zeigt zwei Beispiele: ein sich unendlich drehendes Quadrat und eine komplexere Animation, die Hintergrundfarbe, Verschiebung und Drehung über eine animierte Variable `--i` steuert. Auch wenn es nicht immer die beste Lösung ist, bietet es eine neue Möglichkeit, Animationen auszudrücken und erweitert die Möglichkeiten von CSS-Animationen.

(css-tip.com)

Entwicklung CSS-Animation Animation ohne Keyframes