Transparente, runde Ecken – Galore!
„Könnte der Radius der runden Ecken eventuell einen Hauch größer sein?“ Welchem Webschmierling ist das nicht irgendwann schon einmal widerfahren?
Normalerweise steigt in dem Falle umgehend der Adrenalinspiegel. Grafikprogramm öffnen, Layout ändern, neue Slices anlegen, alles exportieren, auf den Webserver laden und in der CSS-Datei anpassen. Um eine halbe Stunde später zu hören „Ich glaube, jetzt sind sie zu groß…“
Das hat jetzt endlich ein Ende!
Ein GIMP- und ein BASH-Script haben mir die Arie nun ein-für-alle-Mal vom Hals geschafft. Das GIMP-Script erzeugt auf Zuruf einen Satz PNG’s bestehend aus vier abgerundeten Ecken und einem Quadrat in beliebiger Größe, Farbe und Transparenz. Zusammen mit einem BASH-Script haben mir die zwei Supernasen innerhalb einer Stunde zwei Sätze PNG’s von 3 bis 50 Pixeln Radius, in 20 Transparenzstufen (5% bis 100%), in jeweils weiß und schwarz angelegt – macht zusammen über 11.000 Dateien mit insgesamt 3,4 MB. Und nun ändere ich noch ein paar Pfade und Margins in einem CSS-Dokument (Aufwand ~1 Minute) und habe seitenübergreifend neue Radien oder Transparenzstufen.
Das kann man sogar mit dem Kunden am Telefon nebenbei in Echtzeit zusammenklickern…
fertiges Paket
Für die Menschen ohne echtes Betriebssystem oder die ohne Zeit habe ich das von mir erstellte Paket zum Download hochgeschoben. Also stapelweise runde Ecken in weiß und schwarz und jeglichen Auflösungen/Transparenzen. Im Paket liegt eine README über die Struktur der Verzeichnisse und ein Code-Beispiel für HTML/CSS.
GIMP-Script
Das Script mit Rechtsklick herunterladen, in den scripts-Ordner im GIMP-Verzeichnis schieben und im Terminal wie u.a. aufrufen. Alternativ folgenden Befehl in der Konsole ausführen (für GIMP 2.6, ansonsten Pfad ändern):
cd ~/.gimp-2.6/scripts && wget http://mein-neues-blog.de/files/gimp/create-round-corners.scm
Im Terminal wird das Script folgender Maßen aufgerufen:
gimp -i -d -f -s -c -b „(script-fu-create-round-corner 1 [Radius] [Alpha] 0 0 0 \“[Ausgabepfad]\“)“
… wobei natürlich [Radius], [Alpha] und [Ausgabepfad] zu ersetzen sind. Der Pfad ist dabei entweder absolut oder relativ zum aktuellen Verzeichnis anzugeben.
Shell-Script
Ein funktionierendes Shell-Script ist im Kommentarbereich des GIMP-Scriptes eingefügt. Also einfach mit Texteditor öffnen und rauskopieren. Ansonsten hier nochmal komplett für schwarze Boxen von 3-50px und 5-100% Opazität:
#!/bin/bash
mkdir „blinder“
mkdir „blinder/black“
i=1
while [ $i -le 20 ] ; do
let alpha=$i*5
mkdir „blinder/black/$alpha“
j=3
while [ $j -le 50 ] ; do
mkdir „blinder/black/$alpha/$j“
gimp -i -d -f -s -c -b „(script-fu-create-round-corner 1 $j $alpha 0 0 0 \“blinder/black$alpha/$j/\“)“
let j=$j+1
done
let i=$i+1
done
