Mit kegelförmigen Farbverläufen einen coolen Rahmen erstellen

Mit konischen Farbverläufen lassen sich interessante Effekte erzielen, wie in diesem Beispiel für einen schönen Rahmen.

In diesem CodePen von Adam Argyle, das ursprünglich über diesen Tweet auf Twitter geteilt wurde, wird gezeigt, wie Sie mit einem konischen Farbverlauf einen Rahmen erstellen.

.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 hat Adam's Codepen geforkt und daraus diesen CodePen erstellt. Bewegen Sie den Mauszeiger auf das Element, um den Farbverlauf zu sehen. Das ist möglich, weil mithilfe von JavaScript eine benutzerdefinierte CSS-Eigenschaft aktualisiert wird, in der der Drehwinkel gespeichert ist.

In diesen Beispielen wird das Attribut border-image-source verwendet. Mit dieser Eigenschaft wird das Quellbild festgelegt, das zum Erstellen des Rahmens eines Elements verwendet wird. Wie bei anderen Properties, die einen Bildwert akzeptieren, ist auch jeder CSS-Gradiententyp zulässig.

border-image-source

Konischer Farbverlauf