Design

Border-Image-Generator: Grafische CSS-Rahmen leicht gemacht

19. Mai 2012
von

Mit der CSS3-Eigenschaft border-image lassen sich individuelle und ausgefallene Rahmen erstellen. Die Grundlage für diese Rahmen ist jeweils eine Grafikdatei, die in verschiedene Bereiche eingeteilt wird. Jeder Bereich steht für ein bestimmtes Rahmensegment. Die Web-App Border-Image-Generator erstellt solche grafische Rahmen bequem und einfach.

Das Problem vieler CSS3-Eigenschaften – so zum Beispiel auch bei CSS-Verläufen – ist, dass man als Entwickler viel herumprobieren muss, bis das gewünschte Ergebnis erreicht ist. Bei der Eigenschaft border-image ist das nicht anders. Die Grafikdatei für einen grafischen Rahmen muss in neun Bereiche eingeteilt werden. Dazu werden per border-image neben der Grafikdatei bis zu vier Zahlenwerte übergeben, welche die Grafik in die neun Bereiche gliedern. Es wird jeweils der Abstand von oben, unten, rechts und links angegeben. Zusätzlich kann mit ebenfalls vier Werten die Breite der jeweiligen Rahmenseiten definiert  werden.

Rahmen per Schieberegler definieren

Diese Jonglage mit bis zu acht Werten gleichzeitig erleichtert der Border-Image-Generator. Hier können per Schieberegler die Werte für die Bereiche sowie die Rahmenbreite eingestellt werden. In einer Vorschau gibt es das Ergebnis bereits während des Veränderns der Werte zu sehen. So gelingt es schnell, die richtigen Einstellungen für den Rahmen zu finden. Die Grafikdatei, aus welcher der Rahmen erstellt werden soll, muss natürlich zuvor hochgeladen oder per URL angegeben worden sein.


Oberfläche des Border-Image-Generator

Auch die Einstellungen zur Wiederholung der einzelnen Rahmensegmente können über den Generator vorgenommen werden. So lässt sich für die horizontalen und vertikalen Rahmen jeweils einstellen, ob die Rahmengrafik wiederholt, gerundet oder gedehnt werden soll. Bei der Wiederholung werden die einzelnen Segmente an den Ecken beschnitten. Bei der Rundung wiederholt der Generator die Segmente so angepasst, dass kein Segment beschnitten wird. Beim Dehnen wird das Segment nicht repliziert, sondern auf die Breite beziehungsweise Höhe des Rahmens skaliert.

CSS nur noch kopieren

Der Border-Image-Generator liefert den fertigen CSS-Quelltext mit allen Einstellungen zum Kopieren aus. Auch die entsprechenden Varianten mit Vendor-Präfixen für Mozilla, Opera und Webkit sind bereits gesetzt. Einfacher lassen sich grafische Rahmen mit der Eigenschaft border-image nicht erstellen.

(dpe)

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Ein Kommentar zu „Border-Image-Generator: Grafische CSS-Rahmen leicht gemacht
  1. Billy Galinos am 20. Mai 2012 um 14:15

    Schöne Sache!
    …Aber, wie so oft bei Anwendungen, die nur Schieberegler zur Einstellung von Werten haben, kann die Genauigkeit sehr drunter leiden. Da wäre auch eine direkte Eingabe per Wert die bessere Lösung und würde das Ganze perfekt machen – dann könnte man “CSS nur noch kopieren” auch 100% direkt anwenden!

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!