CSS3-Effekte wie Verläufe, Schlagschatten und abgerundete Ecken lassen sich am einfachsten mit einer grafischen Oberfläche erstellen. Daher gibt es mittlerweile eine ganze Reihe von Online-Generatoren, die genau das anbieten. Das Plugin CSS3Ps wandelt in Photoshop erstellte Formen und Effekte aus der Anwendung heraus in CSS-Eigenschaften um.

CSS3Ps

Formen in Photoshop erstellen und mit Ebenenstilen versehen

Ist CSS3Ps über den Extension-Manager installiert, wird zunächst die Form erstellt. Dazu verwendet man entweder das Rechteck-, das Abgrundetes-Rechteck- oder das Ellipse-Werkzeug. Andere Formen können nicht per CSS umgesetzt werden und werden daher – wenn beispielsweise ein Stern gezeichnet wird – beim Export ignoriert und als einfaches Rechteck dargestellt.

Allerdings ist es möglich, bei abgerundeten Ecken und Ellipsen die Pfadpunkte zu verschieben. Bei Rechtecken muss jedoch darauf geachtet werden, dass beim Verschieben der Pfadpunkte die horizontalen und vertikalen Linien erhalten bleiben.

Änderung des Pfades möglich

Auf die erstellte Form können jetzt unterschiedliche Ebenenstile angewendet werden. Es ist möglich, Schlagschatten, Konturen und Verläufe (über den Stil Verlaufsüberlagerung) sowie Schatten und Schein nach innen einzusetzen. Andere Stile wirken sich auf die CSS-Umwandlung nicht aus.

Bei den Verläufen werden leider nur lineare Verläufe umgesetzt. Radiale Verläufe, die in CSS3 ebenfalls möglich sind, kann das Plugin nicht erstellen. Ansonsten sind die Angaben mehrerer Farben, sowie eines Verlaufswinkels möglich.

Form exportieren

Um die erstellte Form inklusiver der Ebenenstile in CSS umwandeln zu können, muss das CSS3Ps-Plugin aktiviert sein. Es erscheint dann im Arbeitsbereich ein kleines Fenster mit dem Plugin-Logo. Ein Klick ins Fenster genügt und das Plugin wandelt die aktivierten Photoshop-Ebenen in jeweils eine CSS3-Klasse mit den entsprechenden Eigenschaften um.

CSS3Ps-Plugin in Photoshop

Die Umwandlung erfolgt über die Website des Plugins. Dort wird der CSS-Quelltext inklusiver Vendor-Prefixe sowie eine Vorschau der Form und der Effekte ausgegeben.

Ausgabe des CSS-Quelltextes

Da die CSS3-Möglichkeiten deutlich unter den Möglichkeiten von Photoshop liegen, wird das CSS-Ergebnis möglicherweise an der ein oder anderen Stelle von dem abweichen, was in Photoshop erstellt wurde.

Vergleich zwischen Photoshop-Original (links) und CSS3-Ergebnis (rechts)

CSS3Ps kann kostenlos heruntergeladen und verwendet werden. Es ist für Photoshop CS3 bis CS6 verfügbar. Eine Beispiel-PSD-Datei steht ebenfalls zum Download bereit.

Fazit: Da viele Weblayouts in Photoshop erstellt werden, ist die Möglichkeit sehr schön, bereits gestaltete Elemente per CSS3Ps direkt aus der Anwendung heraus in CSS umzuwandeln. Perfekt wäre das Plugin, wenn es die CSS3-Möglichkeiten besser ausschöpfen würde (zum Beispiel durch Unterstützung radialer Verläufe). Allerdings sollen laut Entwickler weitere CSS3-Funktionen in zukünftigen Versionen des Plugins berücksichtigt werden.

(dpe)