Ein schön detailliertes Tutorial von Kirupa, das darauf eingeht, wie Sie eine Benutzeroberfläche mit persistenten Optionen bereitstellen könnten, die steuern, ob Animationen ausgeführt werden oder nicht.
Der Trick sind benutzerdefinierte Eigenschaften, die die Bewegung steuern
body {
--toggle: 0;
--playState: "paused";
Das hat mich hier etwas verwirrt, also schreibe ich es auf, solange es mir frisch im Gedächtnis ist. Nur weil Sie eine Web Component verwenden, heißt das nicht, dass die Stile davon vollständig isoliert sind. Möglicherweise haben Sie Inhalte innerhalb einer Web ...
Es gibt die Ansicht, dass es eine gute Idee ist, mathematische Berechnungen in Ihrem CSS zu belassen, der ich zustimme. Dies gilt für Mathematik, die Sie zur Autorentzeit berechnen *könnten*, aber sich bewusst dagegen entschieden haben. Zum Beispiel, wenn Sie benötigen würden …
Ich finde es ziemlich cool zu sehen, wie Google Repositories mit interessanten Web Components veröffentlicht. Es zeigt die Möglichkeiten cooler neuer Web-Features und ermöglicht es ihnen, diese so auszuliefern, dass sie mit reinem Webstandards kompatibel sind.
Hier ist eine: …
Dies ist der zweite Teil einer zweiteiligen Serie, die sich damit befasst, wie CSS-Variablen verwendet werden können, um den Code für komplexe Layouts und Interaktionen weniger schwierig zu schreiben und wesentlich einfacher zu warten. Der erste …
Dies ist der erste Teil einer zweiteiligen Serie, die sich damit befasst, wie CSS-Variablen verwendet werden können, um den Code für komplexe Layouts und Interaktionen weniger schwierig zu schreiben und wesentlich einfacher zu warten. Dieser erste …
Nehmen wir an, Sie möchten die background-position eines Elements beim Überfahren mit der Maus verschieben, um dem Design etwas Pfiff zu verleihen. Sie haben ein Element wie dieses
<div class="module" id="module"></div>Und Sie fügen ihm einen Hintergrund hinzu
.module Hier ist eine CSS-Variable (offiziell als „CSS-Benutzerdefinierte Eigenschaft“ bezeichnet)
:root {
--mouse-x: 0px;
--mouse-y: 0px;
}Vielleicht verwenden Sie sie, um eine Position festzulegen
.mover {
left: var(--mouse-x);
top: var(--mouse-y);
}Um diese Werte mit JavaScript zu aktualisieren, …
Vor einiger Zeit habe ich einen gut aufgenommenen Artikel über die Kombination von CSS-Variablen mit CSS Grid geschrieben, um wartungsfreundlichere Layouts zu erstellen. Aber CSS Grid ist nicht nur für Seiten! Das ist ein verbreiteter Irrtum. Obwohl es sicherlich sehr nützlich ist …
