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;
}
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.
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.
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.
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:
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!
15 Answers
von Christian Baer 20.04.2011 (09:55Uhr) 1.
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...
von Erweiterte Rahmen mit CSS3 – borde… 20.04.2011 (10:15Uhr) 2.
[...] Diesen Artikel habe ich auf t3n.de veröffentlicht. Hier könnt ihr den ganzen Artikel lesen: Erweiterte Rahmen mit CSS3 – border-image [...]
von Lars Ebert 20.04.2011 (10:22Uhr) 3.
@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.
von dankos 20.04.2011 (10:48Uhr) 4.
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.
von Christian Baer 20.04.2011 (11:40Uhr) 5.
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.
von dankos 20.04.2011 (11:44Uhr) 6.
Warum "Rückschritt"?
von Lars Ebert 20.04.2011 (11:46Uhr) 7.
@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?
von Henry Schorradt 20.04.2011 (11:53Uhr) 8.
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...
von PRECOM Rainer Fischinger 20.04.2011 (12:29Uhr) 9.
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?
von Lars Ebert 20.04.2011 (12:33Uhr) 10.
@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.
von Anleitung: Erweiterte Rahmen mit CSS3 bo… 20.04.2011 (21:26Uhr) 11.
[...] t3n Magazin [...]
von How to: Photoshop-Entwurf mit HTML &… 06.06.2011 (13:32Uhr) 12.
[...] es sich um einen Farbverlauf. Hier verwende ich border-image, welches ich schon in dem Artikel Erweiterte Rahmen mit CSS3 - border-image auf t3n.de vorgestellt habe. Wer sie noch nicht kennt, sollte einfach mal in den Artikel schauen. [...]
von How to: Photoshop-Entwurf mit HTML &… 06.06.2011 (13:32Uhr) 13.
[...] es sich um einen Farbverlauf. Hier verwende ich border-image, welches ich schon in dem Artikel Erweiterte Rahmen mit CSS3 - border-image auf t3n.de vorgestellt habe. Wer sie noch nicht kennt, sollte einfach mal in den Artikel schauen. [...]
von Kurt 05.10.2011 (15:46Uhr) 14.
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.
von CSS3: So werden Texte einfach mehrspalti… 05.10.2011 (21:23Uhr) 15.
[...] Anleitung: Erweiterte Rahmen mit CSS3 border-image - t3n News [...]