Generer CSS fra lag

Funksjonen Kopier CSS genererer Cascading Style Sheet-egenskaper direkte fra lagene i Photoshop, og fanger opp designspesifikasjoner som kan limes inn i stilsettfilene dine. Denne arbeidsflyten bygger bro mellom visuell design og kodeimplementering, særlig når du forbereder ressurser til webprosjekter eller samarbeider med utviklere som trenger nøyaktige stilspesifikasjoner.

Bruk Kopier CSS når du trenger å oversette visuelle designelementer til kodeklare stildeklarasjoner. Denne funksjonen fungerer med enkelte formlag, tekstlag eller laggrupper som inneholder disse elementene. Den genererer CSS som kan limes inn direkte i stilsettet ditt, og fanger opp designegenskaper med pikselnøyaktig presisjon. For bredere arbeidsflyter fra design til web kan du utforske lageffekter og -stiler for flere stilalternativer, og eksportere ressurser for andre utdataformater.

CSS-egenskaper fanget fra lag

Kopier CSS henter ut forskjellige egenskaper, avhengig av hvilken lagtype du velger.

Formlag genererer CSS for:

• Størrelses- og posisjonskoordinater
• Farge på strøk
• Fyllfarge, inkludert gradientdefinisjoner
• Skyggeeffekter

Tekstlag fanger opp formegenskaper samt typografispesifikasjoner:

• Skriftfamilie
• Skriftstørrelse og -vekt
• Linjehøyde
• Tekstdekorasjon (understreking, gjennomstreking)
• Vertikal justering (hevet skrift, nedsenket skrift)
• Tekstjustering

Laggrupper oppretter strukturerte CSS-klasser som representerer overordnet-underordnet-relasjoner.Selve gruppen blir en overordnet div, mens hvert lag i gruppen genererer en underordnet div.Verdiene for topp- og venstreposisjon for underordnede elementer beregnes i forhold til overordnet beholder, på samme måte som standard CSS-posisjonering.

Begrensninger for Kopier CSS

Kopier CSS fungerer ikke med smarte objekter.Hvis laget er et Smart Object, dobbeltklikker du for å redigere innholdet og kopiere CSS fra lag i Smart Object-dokumentet, eller rasteriser laget først hvis det passer for arbeidsflyten din.

Funksjonen kan ikke behandle flere form- eller tekstlag som er valgt samtidig, med mindre de er gruppert.For å kopiere CSS fra flere lag samtidig, må du først plassere dem i en laggruppe.

Generer CSS-kode fra lagene dine

CSS-koden er nå på utklippstavlen og klar til å integreres i webprosjektet ditt.Gå gjennom de genererte egenskapene for å sikre at de oppfyller utviklingskravene dine, og juster verdiene etter behov for responsivt design eller nettleserkompatibilitet.