Generér CSS fra lag

Funktionen Kopiér CSS genererer Cascading Style Sheet-egenskaber direkte fra Photoshop-lag og fanger designspecifikationer, som kan indsættes i dine stilarkfiler.Dette arbejdsforløb bygger bro mellem visuelt design og kodeimplementering, især når du forbereder ressourcer til webprojekter eller samarbejder med udviklere, der har brug for præcise stilspecifikationer.

Brug Kopiér CSS, når du skal oversætte visuelle designelementer til kodeklare stilerklæringer.Denne funktion fungerer med individuelle formlag, tekstlag eller laggrupper, der indeholder disse elementer. Den genererer CSS, som kan indsættes direkte i dit stilark, og fanger designegenskaber med pixelperfekt nøjagtighed. For bredere design-til-web-arbejdsforløb kan du udforske lageffekter og -stilarter for flere formateringsmuligheder og eksport af aktiver for andre outputformater.

CSS-egenskaber registreret fra lag

Kopiér CSS udtrækker forskellige egenskaber afhængigt af den lagtype, du vælger.

Formlag genererer CSS til:

• Størrelses- og positionskoordinater
• Stregfarve
• Fyldfarve, inklusive definitioner af forløb
• Skyggeeffekter

Tekstlag registrerer formegenskaber samt typografispecifikationer:

• Skrifttypeserie
• Skriftstørrelse og tykkelse
• Linjehøjde
• Tekstdekoration (understreget, gennemstreget)
• Lodret justering (hævet skrift, sænket skrift)
• Tekstjustering

Laggrupper opretter strukturerede CSS-klasser, der repræsenterer overordnet-underordnet-forhold. Gruppen selv bliver en overordnet div, mens hvert lag i gruppen genererer en underordnet div. Positionsværdierne for top og venstre for underordnede elementer beregnes i forhold til den overordnede container, hvilket afspejler standard CSS-positioneringsadfærd.

Begrænsninger for Kopiér CSS

Kopiér CSS fungerer ikke med Smart objekter. Hvis dit lag er et Smart Object, skal du dobbeltklikke for at redigere dets indhold og kopiere CSS fra lag i Smart Object-dokumentet, eller rasterisere laget først, hvis det er relevant for dit arbejdsforløb.

Funktionen kan ikke behandle flere formlag eller tekstlag, der er valgt samtidigt, medmindre de er grupperet. For at kopiere CSS fra flere lag på én gang skal du først placere dem i en laggruppe.

Generér CSS-kode fra dine lag

CSS-koden er nu på din udklipsholder og klar til at blive integreret i dit webprojekt. Gennemgå de genererede egenskaber for at sikre, at de passer til dine udviklingskrav, og justér værdierne efter behov for at opnå responsivt design eller browserkompatibilitet.