Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Anleitung: Erweiterte Rahmen mit CSS3 border-image

Mit CSS3 wurden viele Webdesign-Träume wahr. Angefangen bei box-shadow für Schlagschatten, hört die lange Liste von neuen CSS-Eigenschaften auch nicht bei border-radius für runde Ecken auf. Eine weitere neue Eigenschaft, die ich erst vor kurzem entdeckte, die mir aber so hilfreich war wie keine zweite, ist die Eigenschaft border-image. Wie der Name schon vermuten lässt, kann man damit ganze Bilder als Rahmen definieren.

Der Rand der Textbox ist oben und an den Seiten schraffiert und hat unten einen roten Balken. Das ist allein per border-image mit CSS3 umgesetzt.

Ein einfaches Beispiel

Um euch zu zeigen, was mit border-image alles möglich ist, werde ich jetzt einige Beispiele anhand eines einfachen HTML-Markups präsentieren.

	<div class="borderBox">
		Lorem Ipsum
	</div>

Dazu definiere ich jetzt erst einmal eine CSS-Grundlage:

.borderBox
{
	margin: 100px;
	width: 200px;
	padding: 30px;
	text-align: center;

	border: 1px solid black;
}
Bisher ist nur ein Text mit schwarzem Rahmen zu sehen.
Wie man sieht, erhalten wir durch unsere Basis-Markup und das Stylesheet eine Box mit schwarzem Rahmen.

Aus einem Bild wird ein Rahmen

Bis jetzt ist unser CSS-Code noch ziemlich unspektakulär, aber das wird sich jetzt ändern. Zunächst öffnen wir das Grafikbearbeitungsprogramm unseres Vertrauens, also in meinem Fall Photoshop, und erstellen eine neue Datei mit einer Größe von 30x30 Pixeln. Dann laden wir uns diese Pixelmuster herunter und importieren sie in Photoshop. Anschließend füllen wir die Ebene mit dem letzten Muster des Downloads.

Das Muster wird in neun Quadrate eingeteilt.
Die Fläche wurde mit dem Muster gefüllt und mit vier Hilfslinien aufgeteilt.

Wie man sieht, habe ich mir vier Hilfslinien gezogen und damit das Bild in neun Quadrate eingeteilt. Jedes dieser Quadrate wird später für einen anderen Teil des Rahmens benötigt. Die obere linke Ecke des Rahmens wird zum Beispiel durch das Quadrat oben links repräsentiert, die untere rechte Ecke durch das untere rechte Quadrat und so weiter. Um dies nochmal zu verdeutlichen, werde ich jetzt jedes Quadrat mit einer anderen Farbe füllen und als Rahmen benutzen.

Neun verschiedenfarbige Quadrate
Diese neun Quadrate haben alle verschiedene Farben, anhand derer wir sie gleich im Resultat identifizieren können.
Jedes Quadrat trägt seinen Teil zum Rahmen bei.
Wie man sieht, wird jedem Quadrat des Musters für einen eigenen Teil des Rahmens benutzt.

Nun aber zurück zu unserem eigentlichen Muster: Wie man sieht, wird also das mittlere Quadrat für den Inhalt benutzt. Damit hier nichts beeinflusst wird, löschen wir einfach das mittlere Quadrat, denn Transparenz ist bei border-image auch möglich.

Jetzt speichern wir das Resultat als border.png und können es in unserem CSS-Code verwenden. Zunächst löschen wir den alten Rahmen und fügen dann zwei neue Zeilen hinzu.

.borderBox
{
	margin: 100px;
	width: 200px;
	padding: 30px;
	text-align: center;

	border-width: 10px;
	border-image: url(border.png) 10 10 10 10 round;
}

Wie bei den meisten CSS3-Eigenschaften müssen wir auch hier mit Präfixen arbeiten, damit alle Browser (bis auf den Internet Explorer) die neue Eigenschaft verstehen.

Das Muster wird zur Erstellung des Rahmens verwendet.
Wie man sieht, wird der Rahmen mit dem Muster erstellt.

Was passiert eigentlich in unserem Stylesheet? Zunächst legen wir fest, dass der Rahmen auf allen Seiten 10 Pixel breit sein soll. Danach verwenden wir border-image. Mit url(border.png) geben wir das Bild an, das wir gerade erstellt haben. Die vier Zahlen repräsentieren, einfach ausgedrückt, die Stellen der Grafik, an denen das Bild aufgeteilt wird. In Photoshop waren das unsere Hilfslinien. Man übergibt border-image also den Abstand der Hilfslinien vom Rand im Uhrzeigersinn. Vergleichbar mit den Angaben von margin kann man hier ein bis vier Zahlen übergeben.

Aus klein mach groß

Die letzte Angabe definiert das Wiederholungsverhalten der Ränder. Hier wird definiert, wie die Fläche gefüllt werden soll, da das Muster ja meist kleiner ist als der zu füllende Bereich. Hier können ein oder zwei Angaben gemacht werden, entweder vertikales und horizontales Verhalten gleichzeitig oder getrennt. Mögliche Angaben sind repeat, stretch und round.

Zur Verdeutlichung hier ein weiteres Beispiel:

Ein Muster mit verschiedenfarbigen Kreisen.
An diesem Muster wird der Unterschied zwischen repeat, stretch und round erläutert.
border-image mit repeat
Das Muster wird einfach wiederholt. Wie man sieht, wird am Rand das Muster abgeschnitten.
border-image mit stretch
Durch stretch wird das Muster gestreckt.
border-image mit round
Mit round wird das Muster wiederholt und so gestaucht, dass das Muster am Rand nicht abgeschnitten werden muss.

Auf der nächsten Seite seht ihr noch zwei Beispiele: einen Rahmen im Lineallook und einen mit Schraffur. Zudem ziehe ich mein Fazit und bin gespannt auf eure Meinung!

Bitte beachte unsere Community-Richtlinien

10 Reaktionen
Kurt

Leider bekommt man hier nur Screenshots zu sehen. Besser wäre ein Referenz-Bild und ein echtes Beispiel, damit man sich auch ansehen kann, wie die Browser das Beispiel darstellen. Ich finde die Effekte gut und hätte sie gerne auch in "echt" gesehen.

Lars Ebert

@Rainer Fischinger: Ja, die CSS3-Eigenschaften werden dann einfach ignoriert, In meinen Beispielen würde also gar kein Rahmen angezeigt werden. Aber ich denke, dass die Verbreitung neuerer Browser immer weiter voranschreitet, es gibt also noch Hoffnung.

PRECOM Rainer Fischinger

Also border-image und auch die rounded-corners sind jetzt endlich da. Weiß sowieso nicht, wieso das erst im Jahr 2011 kommt, speziell die Rundungen wurden ja schon seit 10 Jahren mit Hilfsmitteln gemacht. Nur hat man halt momentan noch das Problem, dass viele User mit Nicht-CSS3-Browsern unterwegs sind.
Weiß wer die die alten Browser das interpretieren? Oder wird es einfach ignoriert und kein Rahmen bzw. ein eckiger Rahmen angezeigt?

Henry Schorradt

Also ich seh darin auch kein "Rückschritt", wenn man das so sieht dass Grafiker in der Umsetzung eines Layouts unwichtiger werden ist es zwar blöd, für diese Art von Arbeit, aber der Webgestalter ist deutlich schneller im Umsetzen eines grafschen Konzeptes als vorher...

Und ich denke es nicht zeit für komplizierte Wege nur um eine Berufsgruppe mit Arbeit zu unterhalten...

Lars Ebert

@Christian Baer: Ich denke nicht, dass border-image ein Rückschritt ist. Klar, mit box-shadow etc. werden viele Grafiken unnötig, aber wie willst du solche Rahmen wie bei Sema Kaya mit reinem CSS ohne Grafiken verwirklichen?

Christian Baer

Ich habe die Seite auf nem Safari/ iMac angeschaut, ich glaube es ist eher der geringe Kontrast des Bildes.

Das Tolle an den neuen CSS-Styles wie border-shadow etc. ist doch, dass man jetzt nicht mehr irgendwelche BG-Sprites photoshoppen muss, sondern alles per CSS machen kann. Von daher ist es in zweierlei Hinsicht ein Rückschritt: Technisch wie grafisch.

Vielleicht hast du aber einfach nur schlechte Bsp gewählt.

dankos

Ich glaube nicht, dass wichtig ist, an was die Beispiele grafisch erinnern, sondern wofür man das einsetzen kann... Zum Beispiel für FLEXIBLE Boxen mit einem speziellen Rahmen/Schatten/..., den man per CSS nicht (ohne weiteres) erzeugen kann.

Lars Ebert

@Christian Baer: In welchem Browser funktioniert der Rahmen denn nicht?

Ich halte border-image nicht für unnötig, meiner Meinung nach hat Line25 auf ihrer Seite border-image gut eingesetzt und es gibt bestimmt sehr viele sinnvolle Anwendungsmöglichkeiten dafür. Ich finde, solche kleinen, subtilen Effekte sind nicht unnötig, sondern wichtig. Den besten Webdesignern liegt sehr viel an kleinen Details, da sind CSS3-Eigenschaften wie border-image, border-radius, text-shadow und box-shadow wirklich sinnvoll und nützlich.

Christian Baer

Ich kann den Rahmen auf der Sema Kaya-Seite gar nicht erkennen :(

Wie auch immer, ich finde diese Effekte mehr als unnötig, das erinnert mich grafisch doch sehr ans letzte Jahrtausend...

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Finde einen Job, den du liebst