Es gibt zwar schon viele Webseiten, die es erlauben CSS3-Effekte einzustellen und direkt als Code zu extrahieren, das dies aber auch aus Photoshop heraus möglich ist, hat mich doch überrascht. Ich kann mich noch daran erinnern, dass es Erweiterungen gab, die das ganze Layout einer Website aus Photoshop heraus in ein HTML/CSS-Dokument überführten – wirklich durchgesetzt hat es sich aber nicht..

Nun zu dem angesprochenen (Web-)Tool. Man kann es hier beziehen und runterladen: CSS3Ps

Installiert wird es mit dem Adobe Extension Manager.

Die Erweiterung von CSS3Ps ist installiert

Danach öffnet man Photoshop und wählt die Erweiterung aus.

CSS3Ps aufrufen

CSS3Ps im Menü Fenster aufrufen

Ebenen, die man als CSS-Element erhalten möchte, aktiviert man und klickt dann auf das CSS3Ps-Fenster.

Ebenen aktivieren und CSS3Ps anklicken

Es öffnet sich der Standard-Webbrowser und produziert den erforderlichen Code.

CSS3-Code

CSS3-Code

Wer genau hinsieht, stellt fest, dass der Gradient nicht in die richtige Richtung läuft – es ist also noch nicht vollständig ausgereift. Für erste Schritte ist aber sicherlich ein nützliches Tool.