CSS3: Farbverläufe bei Rahmenbildern

Im Firefox ab 29 funktionieren auch Farbverläufe bei Rahmenbildern. Das habe ich zum Anlass genommen, mit diesen Eigenschaften einmal herumzuspielen.

Rahmen mit Farbverläufen

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 – sie funktionieren im Firefox 29, im Chrome und auch im Internet Explorer 11.

Noch ein wichtiger Hinweis:
Damit die Anzeige des Rahmens klappt, muss man einen border-style definieren – macht man das nicht, funktioniert der Rahmen nicht.

Kommentare sind geschlossen.