- Da CSS
@property inzwischen in allen modernen Browsern unterstützt wird, können für Custom Properties Syntax, Anfangswert und Vererbungsverhalten angegeben werden, sodass der Browser Werte natürlich interpolieren kann
- Der Beispiel-CTA-Button definiert
--gradient-angle als <angle>, animiert den Übergang von 0deg bis 360deg und erzeugt mit conic-gradient einen rotierenden Glanzrand
- Der Hover-Effekt weist Eigenschaften wie
--gradient-percent, --gradient-angle-offset und --gradient-shine Typen zu, sodass sich Länge und Helligkeit des Glanzes weich ändern
- Die Rotationsgeschwindigkeit wird gesteuert, indem dieselbe Animation zweimal deklariert wird; die zweite läuft rückwärts und pausiert. Beim Hover verlangsamt sie sich dann von der aktuellen Position aus auf halbe Geschwindigkeit
- Auf
@property basierende Definitionen von Custom Properties ermöglichen CSS-Ausdrucksformen, die früher schwer umzusetzen waren, und bieten auch Potenzial für große Anwendungen und Designsysteme
Custom-Property-Animationen, die @property ermöglicht
@property ist eine Regel, mit der für CSS-Custom-Properties zulässige Syntax, Anfangswert und Vererbungsverhalten festgelegt werden- Die Funktion ist mit der CSS Properties and Values API von CSS Houdini verbunden und wird seit Kurzem von allen modernen Browsern unterstützt
- Wenn der Browser den Typ einer Custom Property kennt, kann er zwischen Werten interpolieren; dadurch lassen sich weichere Transitions und Animationen einfacher erstellen als mit normalen CSS-Variablen allein
Rotierender Glanzrand für CTA-Buttons
- Das Beispiel setzt einen im Web häufig zu sehenden funkelnden CTA-Button-Stil mit CSS um
- Die zentrale Custom Property ist
--gradient-angle; per @property werden die Syntax <angle> und der Anfangswert 0deg deklariert
@property --gradient-angle {
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}
- Dank dieser Definition kann der Browser flüssig von
0deg zu 360deg übergehen und conic-gradient so rendern, als würde er rotieren
@keyframes rotate-gradient {
to { --gradient-angle: 360deg; }
}
.rotate-gradient {
background: conic-gradient(from var(--gradient-angle), transparent, black);
animation: rotate-gradient 10s linear infinite;
}
- In der CodePen-Demo ist dieses Konzept mit minimalem Code zu sehen
Glanz am Rand durch Hintergrund-Layer
- Der glänzende Rand entsteht, indem
linear-gradient und conic-gradient gemeinsam in background gesetzt und für die einzelnen Hintergründe unterschiedliche Ursprünge angegeben werden
linear-gradient nutzt padding-box und läuft daher nicht in den Randbereich hineinconic-gradient nutzt border-box und erweitert sich bis in den durch die Randbreite entstehenden Bereich- Ein transparenter Rand von
1px wird hinzugefügt, damit der rotierende conic-gradient sichtbar wird
.border-gradient {
background:
linear-gradient(black, black) padding-box,
conic-gradient(from var(--gradient-angle), transparent 25%, white, transparent 50%) border-box;
border: 1px solid transparent;
}
Beim Hover weich wechselnder Gradient
- Für jede Custom Property, die für die Hover-Transition nötig ist, wird in
@property eine syntax deklariert, damit der Browser Wertänderungen interpolieren kann
- Der Button-Hintergrund besteht aus einem
linear-gradient für die innere Farbe und einem conic-gradient für den Glanz am Rand
--gradient-percent bestimmt die Größe des Glanzbereichs und wechselt beim Hover zu einem höheren Prozentwert, wodurch der Glanz länger wird--gradient-angle-offset dient dazu, den Winkel des Gradients neu auszurichten, damit der Glanz während des Hovers nicht vor- oder zurückspringt- Die Helligkeit von
--gradient-shine wird reduziert, damit sie sich natürlicher mit der umgebenden Highlight-Farbe mischt
Methode zum Verlangsamen der Rotation beim Hover
- Der CSS-Tipp zum Verlangsamen der Rotation besteht darin, dieselbe Rotationsanimation zweimal zu deklarieren
- Die zweite Animation läuft rückwärts, ihre Dauer wird halbiert, und im Grundzustand ist sie auf
paused gesetzt
- Beim Hover überschreibt
animation-play-state: running den Zustand paused und verlangsamt die Rotation auf halbe Geschwindigkeit
- Wenn der Hover endet, springt die Animation nicht an die Startposition zurück, sondern beschleunigt wieder von der aktuellen Position aus
- Die CTA-Button-Animation nutzt diese Methode, damit Rotation und Bewegung auch bei Geschwindigkeitswechseln sauber ineinandergreifen
Kleine Funkelpartikel und innere Highlights
- Das kleine Punktmuster im Inneren des Buttons wird gerendert, indem auf dem Pseudoelement
::before ein radial-gradient-Hintergrund erzeugt wird
--gradient-angle wird auch hier wiederverwendet; eine conic-gradient-Maske rotiert und legt nur einen Teil des Punktmusters frei- Der Gradient-Winkel der Maske wird um
45deg versetzt, damit er zur Rotation des Glanzrands passt
.shiny-cta::before {
mask-image: conic-gradient(
from calc(var(--gradient-angle) + 45deg),
black,
transparent 10% 90%,
black
);
}
- Dem Pseudoelement
::after wird ein Gradient mit der Highlight-Farbe hinzugefügt, sodass er gemeinsam mit dem Glanzbereich rotiert
- Das innere Highlight verstärkt den Eindruck von Licht, das im Inneren des Buttons fließt
Hover-Farben und Feinschliff
- Da
::before und ::after des Buttons bereits verwendet werden, wird der Button-Text in ein span eingeschlossen
- Auf eines der Pseudoelemente des
span wird ein weicher box-shadow mit der Highlight-Farbe angewendet und bis auf die Buttongröße erweitert
- Beim Hover wächst und schrumpft dieses Pseudoelement langsam und erzeugt so ein sanftes, atmendes Gefühl
- In Kombination mit der im Inneren rotierenden Highlight-Farbe entsteht der finale Effekt des CTA-Buttons
Potenzial für Designsysteme
1 Kommentare
Hacker-News-Kommentare
Ich bin zwar kein Webentwickler, habe aber ohne Frameworks kleine Spielzeug-Websites gebaut und in einigen Web-Frameworks grundlegende Dinge gemacht. Als CSS erstmals aufkam, konnte man nach kurzer Zeit praktisch alles im Kopf behalten und verwenden.
Das CSS im ersten CodePen-Beispiel wirkt fast wie eine kaum wiederzuerkennende esoterische Syntax, und ich frage mich, ob man in einem Styling-System wirklich noch eine kleine Programmiersprache für Animationen braucht.
Ich denke mir, dass das doch etwas ist, was man mit JavaScript machen kann. Ich verstehe zwar die Abneigung dagegen, JS für alles zu verwenden, aber wenn es eine Programmiersprache ist, scheint genau so etwas doch eher zu ihrem eigentlichen Aufgabenbereich zu gehören.
Mit JavaScript geht das natürlich auch, und man kann ein
canvasnehmen und die Effekte mit WebGL auf der GPU programmieren. Dafür müsste man allerdings alle Barrierefreiheitsfunktionen eines HTML-Buttons selbst nachbauen, und ich bezweifle, dass das einfacher wäre.Moderne JS-Engines sind zwar beeindruckend, aber nicht so effizient wie nativer Code, wodurch die CPU-Auslastung steigt, was am Ende auch schlecht für die Akkulaufzeit ist.
Aus demselben Grund bin ich dankbar für Websites, bei denen JavaScript keine Pflicht ist.
Einige Hosting-Plattformen erlauben aus Sicherheitsgründen Personalisierung mit HTML und CSS, blockieren aber JS. Bei Orten wie Itch.io, wo man Spiele und Profile gestalten kann, ist das so. Mit CSS-Animationen lassen sich ansprechende Effekte erstellen, ohne JS-Zugriff zu gewähren; das ist sinnvoll und nützlich.
Beim Lesen dieses Artikels hatte ich das Gefühl, dass mein Gehirn sich gegen unbekannte Konzepte wehrt. Ich empfehle, vor den Blog-Beispielen zuerst den im ersten Satz verlinkten MDN-Artikel zu lesen.
Bei
@propertybekommt man vermutlich erst ein Gefühl dafür, wenn man selbst damit herumspielt. Wenn man komplexe UIs umsetzt und die Abhängigkeit von JS reduzieren möchte, kann das Wissen um solche komplizierten CSS-Funktionen ein starkes Werkzeug sein.CSS-Variablen konnten ebenfalls kaskadieren und durch Klassen usw. überschrieben werden, und Dinge wie Tailwinds
bg-opacityfunktionieren doch auch auf diese Weise, oder?Wenn man MDN liest, klingt es fast genauso wie frühere CSS-Variablen, nur dass sie auf bestimmte Elemente oder Kinder begrenzt sind und zusätzliche Einschränkungen bekommen, die CSS-Einheiten wie Winkel oder Prozentwerte erkennen.
Trotzdem glaube ich nicht, dass ich es verwenden werde. Ein so kleiner Vorteil rechtfertigt die Kosten an Komplexität und Kompatibilität nicht, und ich versuche, unnötige neue Syntax zu vermeiden. Seit CSS-Variablen ist mein Interesse an neuen CSS-Funktionen deutlich abgeflaut.
Ich verstehe nicht recht, welchen Vorteil es gegenüber der Verwendung von CSS
transformhat.Als jemand, der gerne mit CSS arbeitet, aber auch mit Kolleginnen und Kollegen zusammenarbeitet, denen CSS schwerfällt, empfehle ich nachdrücklich den YouTube-Kanal von Kevin Powell.
Er hat diese Funktion schon ein paarmal behandelt, und in einem Video von vor einer Woche zeigt er eine nützliche Möglichkeit, die registrierte Properties ermöglichen: https://youtu.be/U8NykwZNbGs
Es gibt auch einen Artikel, der registrierte Properties anhand eines leicht nachvollziehbaren Beispiels erklärt: https://moderncss.dev/providing-type-definitions-for-css-wit...
Die jüngsten Arbeiten an CSS, insbesondere Houdini, machen mir Hoffnung. So habe ich mich lange nicht mehr gefühlt, seit ich ein Buch über die Funktionen von IE 5.5 gesehen habe.
In den letzten 14 Jahren sind zwar viele neue CSS-Funktionen hinzugekommen, aber sie lagen eher nahe an grundlegenden Funktionen, die man von einem Styling-Framework erwarten würde, etwa neue Layout-Optionen oder Variablen.
Die IE-Entwickler waren dagegen wirklich hemmungslos, und man konnte JS-Code sogar als Modul bauen und per CSS an Elemente anhängen. Es fühlt sich an, als kämen solche radikalen Funktionen endlich zurück.
Beispiel: https://developer.chrome.com/docs/css-ui/houdini
Kurz und gut geschrieben. Wenn man mehr Beispiele sehen möchte, insbesondere deutlich einfachere, mit denen man schneller ein Gefühl dafür bekommt, empfehle ich einen älteren CSS-Tricks-Artikel.
Er ist von 2021, aber immer noch gültig und gut gemacht: https://css-tricks.com/exploring-property-and-its-animating-...
Besonders das Beispiel mit der Flip-Anzeige für Flughafen-Zahlen bzw. Timer dürfte gefallen.
Ich war eine Weile nicht mehr in der Webentwicklung unterwegs, und es hat viel zu lange gedauert, bis ich verstanden habe, was dieses Feature eigentlich macht. Der Artikel erklärt es wohl nicht besonders gut.
Soweit ich es verstanden habe, schreibt man statt eines Rohwerts wie
360degetwas wiefrom var(--gradient-angle), und dieser Wert wird von der Stelle übernommen und eingesetzt, an der er im Block@property --gradient-angle {...}definiert ist.Es gibt auch
inherits: false;: Ich verstehe zwar das Verhalten an sich, aber nicht, wozu es nötig ist. Mit CSS-Selektoren kann man Vererbung ja bereits steuern; schwer nachzuvollziehen, ob man sie jetzt auch noch an anderer Stelle steuern kann.Außerdem frage ich mich, warum man im
@property-Block den Typ definieren muss. An anderen Stellen in CSS definiert man keine Typen; könnte der Browser ihn nicht aus der Stelle ableiten, an der@propertyverwendet wird?Bei einem früheren Experiment, das das YouTube-Design neonartig verändern sollte, habe ich die Hauptfarbe über eine einzige CSS-Variable gesteuert und ihren Farbton langsam über das gesamte Spektrum wandern lassen.
Ohne
@propertykann man CSS-Variablen nicht animieren. Es geht also nicht nur darum, statt eines Rohwerts eine Variable zu verwenden, sondern darum, diese Variable und alle Stellen, an denen sie referenziert wird, gemeinsam animieren zu können. Mit einem einzigen@keyframes neon-flow { from { --dc-neon-hue: 0; } to { --dc-neon-hue: 360; } }kann man Hauptfarbe, Schatten usw. zusammen bewegen.inherits: falsesteuert, wie benutzerdefinierte Properties vererbt werden. Man kann sie wiecolor: redan Kinder vererben lassen oder sie wiedisplay: flexnur auf das jeweilige Element anwenden.Der Typ scheint nötig zu sein, damit zur statischen Zeit bekannt ist, was animiert werden soll. CSS-Variablen können alles Mögliche sein, während normale CSS-Properties wie
colordie Typinformation bereits durch die Property selbst liefern.Interessant ist, dass diese Typ-Syntax der formalen Syntax entspricht, die man bei MDN sieht: https://developer.mozilla.org/en-US/docs/Web/CSS/color#forma... Es wirkt, als würden CSS-Interna als API für Entwickler offengelegt.
@property; man konnte zum Beispiel--my-prop: 10pxdeklarieren und es dann anderswo mitvar(--my-prop)verwenden.Das neue Feature
@propertyerlaubt es, eine Property vorab zu definieren und festzulegen, welchen Syntax-Typ sie akzeptieren soll, ob sie den Elternwert erbt und was ihr Standardwertinitial-valueist.Wenn also ein Element einer als Winkel-Typ deklarierten Property
--my-prop: 5pxzuweist, wird das ignoriert. Früher wäre das ein gültiger Wert gewesen und hätte je nach Verwendungsstelle unbeabsichtigte Nebenwirkungen haben können.Außerdem kann man mit
--my-prop: initialdeninitial-valueverwenden lassen, ohne den exakten Standardwert kennen zu müssen.@propertymacht oder wie man es verwendet.Das geht durch das übermäßig komplizierte Beispiel völlig unter.
Diese Website macht mir gute Laune.
Ich habe es schon immer gemocht, mit CSS herumzuspielen, aber nach über 10 Jahren Webentwicklung und Webarbeit als Beruf habe ich auch gelernt, wie sehr viele Leute CSS hassen.
Ich kann endlos Zeit damit verbringen, handgeschriebenes HTML+CSS zu erkunden und zu experimentieren, und es sogar deployen, um zu sehen, wie es sich auf einem echten Smartphone anfühlt. 99 % davon werden nirgends verwendet.
Für die meisten wäre das Zeitverschwendung, aber diese Site hat mir wirklich den Tag verschönert.
In den letzten zehn Jahren ist es zwar komplexer geworden, aber Dinge, die man vor zehn Jahren gemacht hat, lassen sich heute viel einfacher erledigen, und der Code von damals funktioniert immer noch.
Das ist aber in Ordnung. Ich verstehe APEX oder APL oder das neueste Framework des Tages auch nicht. CSS verstehe ich aber, und deshalb macht es mir ziemlich Spaß.
Bei manchen macht es Klick, bei anderen nicht. Das Problem entsteht, wenn jemand, dem CSS nicht liegt, beruflich CSS machen muss, und es dann natürlich hasst. Wenn mein Job wäre, eine Active-Directory-Installation zu warten, würde ich das auch hassen. Aber CSS selbst ist deswegen nicht schlecht.
Irgendwo gibt es sicher ein Forum mit ernsthaften Diskussionen dazu, aber das entgeht mir offenbar.
In der Produktion habe ich Frontends bisher fast ausschließlich in JSX geschrieben, aber seit ich in den Kaninchenbau des Web Scrapings geraten bin, ist mein Verständnis von Selektorlogik deutlich besser geworden.
Ein dazu passender provokativer Gedanke: Wenn in der Praxis mehr semantische Elemente verwendet würden, wäre Selektorlogik vermutlich nicht so ein Ärgernis wie heute. Auch Verhalten, das reines HTML bereits definiert, etwa bei Modals, müsste man dann nicht selbst warten.
Früher war Microsoft der berüchtigtste Spezifikationsverletzer, heute ist es meiner Meinung nach Apple.
Diese Animationen lassen alles wie Display-Werbung aus den 2000ern aussehen. Und zwar im schlechten Sinn.
Ich hoffe wirklich, dass diese Ästhetik nicht in Mode kommt.
Solche Dinge fühlen sich stark nach Marketing und Manipulation an. Ich möchte eine Site lesen und selbst entscheiden können, was ich tue. Ich will nicht gestört werden, indem mein Blick gewaltsam auf das gelenkt wird, was Geld bringt.
Sonst werden alle es innerhalb geschlossener Ökosysteme implementieren.
PFM, also „pure fucking magic“ (reine Magie), ist genau das Gefühl, das aufkommt, wenn man sieht, was mit CSS-Animationen möglich ist
Aber es ist so stark auf CSS und nur auf CSS zugeschnitten, dass es schwieriger zu lernen und zu konzeptualisieren ist, als es prozedural in JS umzusetzen. Ich denke nicht wirklich auf diese Weise, und schon die Optionen zur Verwendung von CSS
flexsind für mich anstrengend genugAber es ist mächtig, wirklich unglaublich mächtig, und in den meisten Browsern sehr effizient. Die überwältigende Mehrheit der Web-App-Entwickler braucht 99 % dessen, was CSS bietet, nicht, aber es ist cool zu wissen, dass es diese Funktionen gibt
Ich werfe ungestylte Elemente, die mit der Business-Logik verbunden sind, auf die Seite, und der Designer kann sie nach Wunsch stylen. Wenn nötig, kann man später das UI weiter verfeinern
Aus einer rein imperativen Perspektive braucht man etwas Zeit, um die Spezifikation zu lesen und zu experimentieren, aber ich halte es für eine Denkweise, die über die bloße Nutzung von SQL und CSS hinaus wertvoll ist. Natürlich sind SQL und CSS selbst auch wertvoll genug
Ich wäre sehr froh, wenn man sich einfach auf einen Namen für das CSS-„masonry“-Feature[1] einigen würde, damit es ohne Skripte nutzbar wird
[1] https://github.com/w3c/csswg-drafts/issues/9733
propertyTeil der CSS Houdini API und ermöglicht es, CSS aus JavaScript heraus deutlich mächtiger zu manipulieren als früherhttps://developer.mozilla.org/en-US/docs/Web/API/Houdini_API...
Die Begeisterung des Autors für ein neues Stück CSS habe ich so seit fast zehn Jahren nicht mehr gesehen, und das gefällt mir sehr
Wenn ich in meinen Zwanzigern gewesen wäre, hätte ich stunden- oder tagelang mit den Möglichkeiten dieser Funktion herumgespielt. Es hat Spaß gemacht, Dinge in CSS zum Laufen zu bringen
Heute ist es dank
flexbox,gridund der Tatsache, dass die meisten Websites und Apps standardisierten Designprinzipien folgen, ziemlich einfach geworden, und Web-UIs sind meiner Ansicht nach größtenteils ein gelöstes ProblemIch muss immer noch manchmal die unklaren Stellen von
flexundgridnachlesen.sticky-Positionierung ist eine der nützlichsten Funktionen, aber wenn sie aus irgendeinem Grund nicht funktioniert, ist es sehr schwer oder fast unmöglich, sie zu debuggen und die Ursache zu verstehen. Dazu gehören auch Dinge wie die Frage, ob irgendwo bei einem Elternelementoverflowgesetzt istEs ist schwer, Dokumentation zu finden, die solche Edge Cases gut erklärt, und CSS nur anhand des Quellcodes ohne Entwicklertools zu debuggen, ist nahezu unmöglich; man muss die Elemente zur Laufzeit inspizieren
Die meisten nativen Eingabeelemente sind beim Styling weiterhin stark eingeschränkt, und auf native Modals und Popover haben wir ebenfalls jahrelang gewartet. Als ich zuletzt nachgesehen habe, konnte man die Höhe beim Wechsel von
display: nonezublocknoch immer nicht animierenIch frage mich, ob wir uns so sehr an die vielen Probleme von CSS gewöhnt haben, dass unser kritisches Bewusstsein verschwunden ist