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)
0 Antworten zu „Border-Image-Generator: Grafische CSS-Rahmen leicht gemacht“
— was ist Deine Meinung?
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!