CSS3: Farbverläufe bei Rahmenbildern
Geschrieben am:
Im Firefox ab 29 funktionieren auch Farbverläufe bei Rahmenbildern. Das habe ich zum Anlass genommen, mit diesen Eigenschaften einmal herumzuspielen.
Das Prinzip ist folgendermaßen:
Hinter der CSS3-Eigenschaft border-image notiert man linear-gradient() für einen linearen Farbverlauf oder radial-gradient() für einen radialen. Außerdem bestimmt man, wie der Farbverlauf aufgeteilt werden soll und gibt ein Schlüsselwort wie round, stretch oder repeat an:
border-image: linear-gradient(white, #4972A4) 10% round;Ein paar Beispiele zum Anschauen und Experimentieren gibt es hier.
Noch ein wichtiger Hinweis: Damit die Anzeige des Rahmens klappt, muss man einen border-style definieren - macht man das nicht, funktioniert der Rahmen nicht.