Anzeige
Anzeige
Test

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.

Von Lars Ebert
4 Min.
Artikel merken
Anzeige
Anzeige

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>
Anzeige
Anzeige

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 30×30 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.

Anzeige
Anzeige
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.

Anzeige
Anzeige
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.

Anzeige
Anzeige
.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.

Anzeige
Anzeige

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!

Beispiel 2: Rahmen im Lineal-Look

Im zweiten Beispiel dient folgende Datei als Rahmen:

Anzeige
Anzeige

Eine Lineal-Grafik

Nun passen wir unseren CSS-Code noch etwas an.

.borderBox
{
	margin: 100px;
	width: 200px;
	padding: 30px;
	text-align: center;
	color: #ffffff;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);

	border-width: 10px;
	border-image: url(border.png) 10 10 10 10 repeat; -moz-border-image: url(border3.png) 10 10 10 10 repeat; -webkit-border-image: url(border3.png) 10 10 10 10 repeat;
}
Der Rahmen ist mit einer Messskala versehen.

Durch das Muster der Datei befindet sich auf dem Rahmen eine Messskala.

Einen ähnlichen Effekt kann man auf Line25 bestaunen, auch hier eine CSS3-Lösung!

Anzeige
Anzeige

Fazit

Durch CSS3 geht die Tendenz deutlich in eine Richtung – unkompliziert muss es sein. Schlagschatten brauchen keine eigenen Grafiken mehr, Rahmen lassen sich auch ohne zusätzliche Grafiken abrunden und selbst komplexe Rahmen lassen sich jetzt ohne zusätzliches Markup verwirklichen. Wieder einmal wird uns im Zuge von CSS3 eine sehr nützliche Eigenschaft mit einem riesigen Anwendungsgebiet an die Hand geliefert.

Was sagt ihr?

Wie beurteilt ihr den Trend, weg von Workarounds, hin zu unkomplizierten Lösungen? Wie steht ihr zu CSS3-Eigenschaften? Setzt ihr sie schon ein? So viele Fragen – antwortet mir doch in einem Kommentar!

Über den Autor

Autor dieses Gastbeitrages ist Lars Ebert. Er ist ein junger Webdesigner & Programmierer aus Iserlohn und bloggt auf Advitum.de über Webdesign, PHP und Co.

Links zum Thema

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
Kommentare (15)

Community-Richtlinien

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…

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.

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.

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

Warum „Rückschritt“?

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?

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…

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?

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.

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.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Kommentar abgeben

Melde dich an, um Kommentare schreiben und mit anderen Leser:innen und unseren Autor:innen diskutieren zu können.

Anmelden und kommentieren

Du hast noch keinen t3n-Account? Hier registrieren

Anzeige
Anzeige