- Die
@property-Regel wird von allen modernen Browsern unterstützt und bietet die Möglichkeit, Syntax, Initialwert und Vererbung von benutzerdefinierten CSS-Eigenschaften explizit zu definieren
- Seit der ersten Einführung von CSS Houdini und der CSS Properties and Values API ist viel Zeit vergangen
- Anhand von Demos, die die Möglichkeiten von
@property erkunden, lässt sich sehen, was die nächste Generation von CSS bieten kann
Calls to action (Handlungsaufforderungselemente)
- Auffällige CTAs auf Webseiten werden auf vielen Sites verwendet
- Dieser Stil wurde direkt ausprobiert, das Ergebnis ist auf CodePen zu sehen
- Wenn man das CSS-Panel der Demo öffnet, sieht man die
@property-Regel für die benutzerdefinierte Eigenschaft, die animiert werden soll
@property --gradient-angle {
syntax: "";
initial-value: 0deg;
inherits: false;
}
- Die
@property-Regel erlaubt dem Browser diese Syntax und setzt den Initialwert auf 0deg
- Dadurch kann der Browser fließend von
0deg zu 360deg übergehen und einen rotierenden Farbverlauf ausgeben
@keyframes rotate-gradient {
to {
--gradient-angle: 360deg;
}
}
.rotate-gradient {
background: conic-gradient(from var(--gradient-angle), transparent, black);
animation: rotate-gradient 10s linear infinite;
}
- Eine einfache Demo zur Rotation eines Gradienten zeigt, wie wenige Zeilen Code für die Umsetzung dieses Konzepts nötig sind
Sanfte Hover-Übergänge
- Wenn ein Element gehovert wird, sind für einen sanften Gradientenübergang einige besondere Bausteine nötig
- Für jede benutzerdefinierte Eigenschaft, die animiert werden muss, wird in der
@property-Definition die Syntax deklariert, damit der Browser Wertänderungen reibungslos interpolieren kann
.shiny-cta {
background: linear-gradient(var(--shiny-cta-bg), var(--shiny-cta-bg)) padding-box,
conic-gradient(from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
transparent, var(--shiny-cta-highlight) var(--gradient-percent),
var(--gradient-shine) calc(var(--gradient-percent) * 2),
var(--shiny-cta-highlight) calc(var(--gradient-percent) * 3),
transparent calc(var(--gradient-percent) * 4)) border-box;
}
- Der Wert
--gradient-percent bestimmt die Größe des leuchtenden Bereichs; beim Hover wird das Licht mit einem höheren Prozentwert länger gezogen
- Der Wert
--gradient-angle-offset justiert den Gradientenwinkel neu, damit das Licht beim Hover nicht zurückspringt
Rotationsgeschwindigkeit anpassen
- Ein CSS-Tipp, um die Rotation beim Hover zu verlangsamen, ist sehr nützlich
- Dieselbe Rotationsanimation wird zweimal deklariert, die zweite wird umgekehrt gesetzt, pausiert und ihre Dauer halbiert
- Wenn das Element gehovert wird, überschreibt
animation-play-state: running den pausierten Wert und verlangsamt die Rotation auf halbe Geschwindigkeit
Kleine leuchtende Punkte
- Im Inneren des Buttons wird ein Effekt aus kleinen leuchtenden Punkten hinzugefügt
- Dafür wird ein
radial-gradient-Hintergrund erzeugt
.shiny-cta::before {
--position: 2px;
--space: calc(var(--position) * 2);
background: radial-gradient(circle at var(--position) var(--position),
white calc(var(--position) / 4),
transparent 0) padding-box;
background-size: var(--space) var(--space);
background-repeat: space;
}
- Die benutzerdefinierte Eigenschaft
--gradient-angle wird in einer conic-gradient-Maske verwendet, um Teile des Punktmusters beim Drehen sichtbar zu machen
Hover-Farben verbessern
- Der Hover-Stil wird verbessert, damit er mehr Tiefe bekommt und stärker auffällt
- Der Button-Text wird in ein
span-Element eingeschlossen, auf das ein unscharfer Box-Shadow angewendet wird, der sich beim Hover ausdehnt und wieder zusammenzieht
Einen neuen Stil einführen
- Viele der oben genannten Techniken waren bis vor Kurzem fast unmöglich
- Durch die explizite Definition benutzerdefinierter Eigenschaften eröffnen sich viele neue Möglichkeiten
- Es bleibt spannend, wie
@property in großen Anwendungen und Design-Systemen eingesetzt werden wird
Zusammenfassung von GN⁺
- Die
@property-Regel bietet die Möglichkeit, Syntax, Initialwert und Vererbung von benutzerdefinierten CSS-Eigenschaften explizit zu definieren
- Damit können Webentwickler komplexere und ausgereiftere Animationen sowie Styles umsetzen
- Besonders in großen Anwendungen und Design-Systemen dürfte diese Funktion sehr nützlich sein
- Ähnliche Funktionen bieten auch CSS Houdini und die CSS Properties and Values API
1 Kommentare
Hacker-News-Kommentare
Beim Kennenlernen neuer Konzepte fühlt es sich an, als würde sich das Gehirn dagegen wehren
@propertyselbst ausprobieren, um es zu verstehenKein Webentwickler, aber grundlegende Web-Frameworks können genutzt werden
Findet die jüngsten Arbeiten an CSS, insbesondere Houdini, interessant
Nur weil etwas möglich ist, heißt das nicht, dass man es tun sollte
Die Dinge, die man mit CSS-Animationen machen kann, fühlen sich magisch an
Technisch ein interessantes Demo, aber man sollte Buttons nicht so animieren
Frühere Einreichungen haben keine Aufmerksamkeit bekommen, sind aber interessant und lehrreich
Diese Website bereitet Freude
Arbeitet gern mit CSS, sieht aber, dass Kollegen damit zu kämpfen haben
Hat eine Weile keine Webentwicklung gemacht und brauchte Zeit, um zu verstehen, was diese Funktion macht
@property --gradient-angle {...}definiert sindinherits: false;ist zwar klar, aber warum er nötig ist, ist nicht nachvollziehbar@property-Block definiert werden muss@propertyverwendet wird