CSS aus Ebenen generieren

Die Funktion „CSS kopieren“ generiert Cascading Style Sheet-Eigenschaften direkt aus Photoshop-Ebenen und erfasst Designspezifikationen, die du in deine Stylesheet-Dateien einfügen kannst.Dieser Workflow schließt die Lücke zwischen visuellem Design und der Implementierung von Code – besonders dann, wenn du Medienelemente für Webprojekte vorbereitest oder mit Entwicklern zusammenarbeitest, die präzise Stilvorgaben benötigen.

Verwende „CSS kopieren“, wenn du visuelle Designelemente in codefertige Stildeklarationen übersetzen möchtest.Diese Funktion funktioniert mit einzelnen Formebenen, Textebenen oder Ebenengruppen, die diese Elemente enthalten.Sie generiert CSS, das du direkt in dein Stylesheet einfügen kannst, und erfasst dabei Design-Eigenschaften pixelgenau.Für umfassendere Workflows von Design zu Web schaue dir Ebeneneffekte und -stile für zusätzliche Gestaltungsoptionen und den Export von Medienelementen für weitere Ausgabeformate an.

Von Ebenen erfasste CSS-Eigenschaften

CSS kopieren extrahiert unterschiedliche Eigenschaften, je nachdem, welchen Ebenentyp du auswählst.

Formebenen generieren CSS für:

• Größen- und Positionskoordinaten
• Konturfarbe
• Füllfarbe, einschließlich Verlaufsdefinitionen
• Schlagschatteneffekte

Textebenen erfassen Formeigenschaften sowie Typografiespezifikationen:

• Schriftfamilie
• Schriftgrad und Stärke
• Zeilenhöhe
• Textdekoration (Unterstreichen, Durchstreichen)
• Vertikale Ausrichtung (hochgestellt, tiefgestellt)
• Textausrichtung

Ebenengruppen erstellen strukturierte CSS-Klassen, die übergeordnete und untergeordnete Beziehungen darstellen.Die Gruppe selbst wird zu einem übergeordneten Div-Element, während jede Ebene innerhalb der Gruppe ein untergeordnetes Div-Element generiert.Die Top- und Left-Positionswerte für untergeordnete Elemente werden relativ zum übergeordneten Container berechnet, was dem Standardverhalten der CSS-Positionierung entspricht.

Einschränkungen von „CSS kopieren“

CSS kopieren funktioniert nicht mit Smart-Objekten. Wenn deine Ebene ein Smart-Objekt ist, doppelklicke, um den Inhalt zu bearbeiten und CSS aus Ebenen im Smart-Objekt-Dokument zu kopieren, oder rastere die Ebene zuerst, falls das für deinen Workflow geeignet ist.

Diese Funktion kann mehrere gleichzeitig ausgewählte Form- oder Textebenen nicht verarbeiten, sofern sie nicht gruppiert sind. Um CSS aus mehreren Ebenen gleichzeitig zu kopieren, füge sie zuerst zu einer Ebenengruppe hinzu.

CSS-Code aus deinen Ebenen generieren

Der CSS-Code befindet sich jetzt in deiner Zwischenablage und ist bereit, in dein Web-Projekt integriert zu werden. Überprüfe die generierten Eigenschaften, um sicherzustellen, dass sie deinen Entwicklungsanforderungen entsprechen, und passe die Werte bei Bedarf für responsives Design oder Browserkompatibilität an.