Mit konischen Farbverläufen lassen sich interessante Effekte erzielen, wie zum Beispiel dieses schöne Rahmenbeispiel.
Dieser von Adam Argyle erstellte CodePen, der ursprünglich über diesen Tweet auf Twitter geteilt wurde, zeigt, wie man mit einem konischen Farbverlauf einen Rahmen erstellen kann.
.conic-gradient-border {
border: 25px solid;
border-image-slice: 1;
border-image-source: conic-gradient(
hsl(100 100% 60%),
hsl(200 100% 60%),
hsl(100 100% 60%)
);
}
Terry Mun abzweigte Adams Codepen auf kreative Weise und erstellte diesen CodePen. Wenn Sie die Maus über das Element bewegen, sehen Sie, wie sich der Farbverlauf ändert. Dies erfolgt mithilfe von JavaScript, das eine benutzerdefinierte CSS-Eigenschaft zum Speichern des Rotationswinkels aktualisiert.
In diesen Beispielen wird das Attribut border-image-source verwendet. Diese Eigenschaft legt das Quellbild fest, das zum Erstellen des Rahmens eines Elements verwendet wird. Wie bei anderen Eigenschaften, die einen Bildwert akzeptieren, ist auch jeder CSS-Farbverlaufstyp gültig.
border-image-source
Kegelförmiger Farbverlauf