Photoshop-Ebenenstile als CSS3-Code exportieren

Michael Degener Datum: 3. August 2012
Autor: Michael Degener


Ob Designer oder Entwickler, jeder der schon einmal eine Screen-Vorlage mit all seinen Ebenen mittels HTML und CSS zum Leben erwecken musste, hat sich insgeheim sicherlich schon einmal gewünscht, dass sich dabei manche Arbeitsschritte beschleunigen ließen.

Wer kennt sie nicht, die allgegenwärtigen Buttons in Formularen, Teasern und Schnellsuchen. Von runden Ecken über Konturen und Schlagschatten bis hin zu Verläufen ist hier oft alles geboten. Ließ sich dies früher nur mit diversen Hintergrundgrafiken und Tricks bewerkstelligen, so ist heute bei der Umsetzung CSS3 die erste Wahl. Wenn da nur nicht immer die lästige Tipparbeit wäre…

Seit kurzem gibt es ein Photoshop-Plugin, dass diese Entwicklung beschleunigt: CSS3PS. Mit Hilfe des Plugins wandelt ihr Ebenenstile in CSS3-Code um.

Das Plugin steht online als Download für die Photoshop-Versionen CS3, CS4, CS5 und CS6 kostenlos zur Verfügung. Nach dem Download installiert ihr das Plugin über den Extention-Manager von Adobe und startet Photoshop einmal neu. Anschließend findet ihr innerhalb von Photoshop unter „Fenster → Erweiterungen“ ein neues Bedienfeld namens „CSS3PS“.

Wie arbeitet das Plugin?
Das Plugin wandelt Ebenenstile und einige weitere Einstellungen wie die Größe eines Objekts oder die Abrundung der Ecken in CSS3-Code um.

  1. Erstellt zunächst ein beliebiges Objekt (z.B. ein Form-Objekt),
  2. fügt anschließend Ebenenstile wie Konturen, Verläufe oder Schatten hinzu,
  3. markiert die gewünschten Ebenen (es ist auch eine Mehrfachauswahl möglich) im Ebenen-Bedienfeld,
  4. klickt anschließend auf das „CSS3PS“-Logo im Bedienfeld des Plugins.
  5. Das Plugin stellt nun eine Verbindung zur Website her und wandelt die Stile in Code um. Als Ergebnis erhaltet ihr eine Vorschau und den CSS3-Code zum Download auf der Website.

Das Ganze funktioniert überraschend gut, und das so erzeugt Code-Snippet kann samt vendor prefixes direkt in den jeweiligen Editor kopiert werden.
Ob nur nette Spielerei oder echter Gewinn kann jeder selber entscheiden.

Auch andere Onlinetools wie etwa der CSS-Generator erleichtern einem die Arbeit da enorm. Hier lassen sich die entsprechenden Styles mit wenigen Klicks „zusammenstellen“ und können dann ebenfalls einfach kopiert werden.

Kommentare

Selber kommentieren:






Weitere Beiträge zum Thema Technologie


OpenX Fehlermeldung: File permissions

Autor: Stefan Oswald


Technologie


Manchmal beim Setup oder einer Migration des OpenX AdServers kann es zu dem lästigen Problem kommen, dass nach jedem Login eine Fehlermeldung kommt, die auf falsch Dateirechte hinweist. Entgegen der Fehlermeldung wurde jedoch kein Eintrag in die debug.log Datei geschrieben. Um den Fehler angezeigt zu bekommen, muss wiefolgt vorgegangen werden: Öffne Datei im OpenX Basis-Verzeichnis: …


Beitrag lesen
04.
Dez.
2013

Fancybox: JS-Fehler mit jQuery 1.9+

Autor: Stefan Oswald


Technologie


Die letzte freie Version von Fancybox (1.3.4) beinhaltet eine Inkompatibilität mit jQuery ab Version 1.9, da dort die Unterstützung für jQuery.browser eingestellt worden ist. Darauf will das Fancybox-Script aber zugreifen. Das hat zur Folge, dass es auf der Konsole des verwendeten Browsers zu einer Fehlermeldung kommt und dass ggf. sonstiger JavaScript Code auf der Seite …


Beitrag lesen
25.
März
2014

Twitter Account-ID auslesen

Autor: Stefan Oswald


Technologie


Twitter bemüht sich nach Kräften, die numerische ID seiner Benutzer-Accounts zu verstecken. Nur dumm, dass genau diese ID für die Twitter-Integration im imxSocialMediaReader benötigt wird… Früher war das kein Problem, da Twitter da noch auf der Tweet-Seite des Accounts öffentlich einen RSS-Link publizierte; das ist derzeit aber leider nicht mehr der Fall. Wie kommt man …


Beitrag lesen
20.
Oktober
2011

OOP 2015 – Tag 2

Autor: Marc Kurzmann


Technologie // Über den Tellerrand


Heute mach ich’s ein wenig kürzer: Die erste Session war sehr technisch: „Bring Your Technology“; 5 „Gurus“ haben nacheinander jeweils ihre aktuell spannendste Technologie vorgestellt, mit der sie sich entweder intensiv beschäftigen, oder die sie zukünftig für sehr interessant halten. Folgende Technologien wurden dabei vorgestellt: Arduino (eine Art Mikrocontroller mit Open-Source-Layout, ideal im Zusammenhang mit …


Beitrag lesen
28.
Januar
2015