CSS3 Border-Image und Border-Radius

Mit CSS3 verhält es sich wie mit HTML5, bis das ganze Produktiv eingesetzt werden kann, vergeht mit Sicherheit noch das ein oder andere Jahr. Natürlich kann man auch heute schon gewisse Funktionen verwenden, allerdings immer im Hinblick darauf das man für gewisse Browser Fallbacks einbauen sollte.

Die Problematik beim Einsatz von CSS3 liegt im neuen Markup. Wo man früher heute noch ein etwas umfangreicheres HTML-Konstrukt benötigt um beispielsweise ein Multi-Coloumn Layout zu basteln, so reduziert sich das ganze beim Einsatz von CSS3 auf nur noch wenige Elemente. Da wir jedoch immer noch 2-3 Browsergenerationen nach unten unterstützen müssen, bringen uns natürlich im schlechtesten Fall auch die neuen Möglichkeiten nicht viel.

Dennoch gibt es auch heute schon viele CSS3 Funktionen, die wir bedenkenlos einsetzen können, da ein Fallback für ältere Browser kein Problem darstellt.

Eine gute Anlaufstelle um zu überprüfen ob und welche Funktionen von welchen Browsern unterstütz werden, stellt When can I use ... dar, das bei jedem amitionierten Webdesigner ein Bookmark verdient hat.

Im Grunde genommen ist sowohl CSS3 als auch HTML5 relativ leicht zu erlernen, sofern man sich mit CSS und HTML auskennt.

Ich sehe das ganze momentan relativ entspannt. Natürlich kribbelt es in den Fingern mit CSS3 zu rechnen oder komplexe Multi-Coloumn Layouts zu basteln, dennoch bin ich ganz froh das uns noch etwas Zeit bleibt die vielen neuen Möglichkeiten kennen zu lernen, auszuprobieren und schon vor dem produktiven Einsatz kreative Lösungsansätze zu generieren.

Border-Radius

Da sich das Stichwort momentan auf kennen lernen beschränkt, werden wir uns in ein paar nachfolgenden Artikeln auch genau hierauf konzentrieren.

Interessante und neue Möglichkeiten erhalten wir mittels border-radius und border-image. Das schöne an beiden Funktionen stellt der Einsatz dar, denn der Fallback fällt denkbar einfach aus. Browser die weder border-image noch border-radius verstehen, stellen alternativ einfach den normal deklarierten Rahmen dar. Somit ist je Verwendungs-zweck der Einsatz auch heute schon möglich.

Browser Support: Firefox 3+, Chrome 4+, Safari 3.1+, Opera 10+

/* Border Radius Detailschreibweise */
#border-radius {
    border-radius-topleft: 0;
    border-radius-topright: 0;
    border-radius-bottomleft: 0;
    border-radius-bottomright: 0;
    }

Die neue Funktion border-radius ist nicht sonderlich schwer zu verstehen. Es lassen sich alle 4 Ecken eines Elements abrunden. Die oben verwendete Schreibweise ist die Detailschreibweise, natürlich gibt es auch hierfür Kurzschreibweisen.

/* Border Radius Kurzschreibweise */
#border-radius {
    border-radius: 0 0 0 0;
    }
/* Border Radius Kurzschreibweise */
#border-radius {
    border-radius: 0 0;
    }
/* Border Radius Kurzschreibweise */
#border-radius {
    border-radius: 0;
    }

Die Kurzschreibweisen verhalten sich equivalent zu den Kurzschreibweisen von padding oder margin. Die Werte nach border-radius werden im Uhrzeigersinn von Links-Oben angegeben. (Oben-Links, Oben-Rechts, Unten-Rechts, Unten-Links) bzw. (Oben, Unten) oder (Alle Ecken ein Wert). Im Einsatz sieht das ganze dann so aus:

Da CSS3 noch nicht implementiert ist verwenden wir für den aktuellen Einsatz die nachfolgenden Aufrufe.

/*Mozilla Engine*/
-moz-border-radius { ... }
/*Webkit Engine*/
-webkit-border-radius { ... }

Merke:
Obwohl der klassische border einen Rahmen definiert, ist für border-radius nicht zwangsläufig auch ein border von Nöten. Border-radius rundet also nicht nur Rahmen, sondern auch Elemente ab.

Border-Image

Aber nun zur etwas spannenderen Funktion border-image. Mit dieser Funktion lassen sich Bilder für den Rahmen verwenden, was natürlich viele neue Ansätze in der Gestaltung ermöglicht. Erinnern wir uns allein an die Tatsache, das man für schön gestalteten Boxen mit Verläufen, Rändern und abgerundeten Ecken ein wahres Horror-Konstrukt an HTML-Elementen und Hintergrundbildern benötigt hatte. Das wird mit CSS3 der Vergangenheit angehören.

Mit border-image lassen sich also Hintergrundbilder für Rahmen verwenden. Soweit so gut. Betrachten wir uns eingangs einmal den Aufruf:

#border-image {
    border-image: url(meinBild.jpg) 0 0 0 0 Option;
    }

Border-image deklariert natürlich als erstes einmal ein Bild und in den nachfolgenden 4 Werten die quadratischen Abmessungen, die jede Ecke in diesem Bild erhält. Zur Verdeutlichung eine kleine Grafik.

Die Option, eigentlich stretch-value genannt, welche auf die 4 definierten Ecken folgt, legt die Verwendung des Platzes zwischen den im Bild als Ecken deklarierten Bereiche fest (grün markiert). Als mögliche Werte stehen hierfür: „stretch”, „repeat” und „round” zur Verfügung. Der Standardwert (Default) ist stretch.

Kurz erklärt: stretch zieht die Bildbereiche zwischen den Ecken auf die entsprechend im Element deklarierte Größe. repeat wiederholt die grüne Fläche von Ecke zu Ecke. round verhält sich wie repeat, nur das der Zwischenraum auf die Elementbreite und -höhe eingepasst wird. Bei repeat wird das Bild je nach Elementgröße abgeschnitten.

Auch hier verwenden wir für die Mozilla- bzw. Webkit- Engine den Präfix -webkit/-moz. Im nachfolgenden noch ein kleines Beispiel wie sich anhand einer kleiner Grafik eine kleine Box gestalten lässt.

/* Style Angaben */
.boxborder {
    float:left;
    width: 329px;
    /* round Border & Border-Image */
    border: 8px solid #013d7a;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -moz-border-image: url(meinbild.jpg) 8 8 8 8 stretch;
    -webkit-border-image: url(meinbild.jpg) 8 8 8 8 stretch;
    }


#div class="boxborder"#Das Ergebnis#/div#

Das ganze sieht anschließend so aus:

Das ist das, für die eben generierte Box, verwendete Hintergrundbild.

Update: Danke an Artesia für den Hinweis das auch der Opera ab Version 10+ border-radius und border-image ebenfalls schon unterstützt.