Direkter Link zum Artikel Einfacher interaktiver Tortendiagramm mit CSS-Variablen und Houdini-Magie

Einfacher interaktiver Tortendiagramm mit CSS-Variablen und Houdini-Magie

Ich kam auf die Idee, so etwas zu tun, als ich auf dieses interaktive SVG-Tortendiagramm stieß. Während der SVG-Code so kompakt wie möglich ist (ein einziges <circle></circle>-Element!), ist die Verwendung von Strichen für die Erstellung eines Tortendiagramms ...

Avatar of Ana Tudor
Ana Tudor am
Direkter Link zum Artikel 1 Element CSS Rainbow Gradient Infinity

1 Element CSS Rainbow Gradient Infinity

Die Idee, so etwas mit CSS zu machen, kam mir zum ersten Mal, als ich dieses Gradient Infinity Logo von Infographic Paradise sah. Der Verlauf sieht nicht ganz so aus wie in der Originalillustration, da ich mich entschieden habe, den Regenbogen logisch zu generieren, anstatt den Dev Tools Picker oder etwas Ähnliches zu verwenden. Aber abgesehen davon, denke ich, bin ich ziemlich nah herangekommen – sehen wir mal, wie ich das gemacht habe!
Avatar of Ana Tudor
Ana Tudor am
Direkter Link zum Artikel Verwendung von konischen Verläufen und CSS-Variablen zur Erstellung einer Donut-Chart-Ausgabe für eine Bereichseingabe

Verwendung von konischen Verläufen und CSS-Variablen zur Erstellung einer Donut-Chart-Ausgabe für eine Bereichseingabe

Ich bin kürzlich auf diesen Pen gestoßen und mein erster Gedanke war, dass alles mit nur drei Elementen erledigt werden könnte: einem Wrapper, einem Bereichs-input und einer output. Auf der CSS-Seite beinhaltet dies die Verwendung eines konischen Verlaufs() mit …

Avatar of Ana Tudor
Ana Tudor am
Direkter Link zum Artikel Die CSS attr()-Funktion hat keine Chance gegen benutzerdefinierte Eigenschaften

Die CSS attr()-Funktion hat keine Chance gegen benutzerdefinierte Eigenschaften

Normalerweise besteht die Verbindung zwischen CSS und HTML darin, dass CSS-Selektoren HTML-Elemente auswählen und CSS sie stilisiert. CSS weiß nichts über den tatsächlichen Inhalt in HTML. Aber es *gibt* einen Weg, wie CSS darauf zugreifen kann ...

Avatar of Chris Coyier
Chris Coyier am