Boxschatten aus Photoshop in CSS transportieren

In Photoshop werden Schatten nicht mit CSS3-kompatiblen Reglern zugewiesen. Das verwundert nicht, schliesslich ist es eigentlich auch kein Webdesign-Programm. Möchte man die Photoshop-Einstellungen ohne allzuviele Probeläufe und Näherungstests in sein CSS übernehmen, bieten sich mehrere Ansätze an:

  1. CSSHat, eine Software, die es für Windows und Mac gibt.
  2. CSS3Ps, ein Photoshop-Plugin
  3. PSD to CSS3, eine Webseite, in der man alle Photoshop-Einstellungen einträgt und dann ein Ergebnis generiert bekommt.
  4. Ein Compass-Plugin, mit dem man die Photoshop-Einstellungen mittels Compass und Sass in CSS übertragen lässt.

CSSHat und CSS3Ps können mehr als nur Boxschatten transferieren. Ich habe keinen der Ansätze getestet, finde sie allerdings alle sehr hilfreich und probierenswert. Bislang habe ich normalerweise einen Schatten per Augenmass erstellt und ihn dann mit dem Designer abgestimmt. Das geht ohne Extra-Tools 🙂

Die Gedanken und Berechnungen hinter dem Compass-Plugin werden übrigens in einem Artikel ausführlich erläutert.

1 Kommentar

  1. Danke dafür. Der „Kulturbanause“ hat zwei der Lösungen getestet.