Generera CSS från lager

Funktionen Kopiera CSS genererar CSS-egenskaper direkt från Photoshop-lager och fångar designspecifikationer som kan klistras in i dina stilmallsfiler.Det här arbetsflödet överbryggar klyftan mellan visuell design och kodimplementering, särskilt när du förbereder resurser för webbprojekt eller samarbetar med utvecklare som behöver exakta stilspecifikationer.

Använd Kopiera CSS när du behöver översätta visuella designelement till kodfärdiga stildeklarationer.Funktionen fungerar med enskilda formlager, textlager eller lagergrupper som innehåller dessa element.Den genererar CSS som kan klistras in direkt i din stilmall och fångar designegenskaper med pixelperfekt precision.För bredare arbetsflöden från design till webb kan du utforska lagereffekter och stilar för fler formateringsalternativ och exportera resurser för andra utdataformat.

CSS-egenskaper som hämtas från lager

Kopiera CSS extraherar olika egenskaper beroende på vilken lagertyp du väljer.

Formlager genererar CSS för:

• Storleks- och positionskoordinater
• Linjefärg
• Fyllningsfärg, inklusive övertoningsdefinitioner
• Skuggeffekter

Textlager fångar formegenskaper samt typografispecifikationer:

• Teckensnittsfamilj
• Teckenstorlek och Bredd
• Radhöjd
• Textdekoration (Understruken, genomstruken)
• Vertikal justering (upphöjd text, nedsänkt text)
• Textjustering

Lagergrupper skapar strukturerade CSS-klasser som representerar mall-barn-relationer.Själva gruppen blir en överordnad div, medan varje lager i gruppen genererar en underordnad div.Värdena för de främsta och vänstra positionerna för barnelement beräknas i förhållande till mall-behållaren, vilket speglar standard-CSS-positioneringsbeteende.

Begränsningar för Kopiera CSS

Kopiera CSS fungerar inte med smarta objekt.Om lagret är ett Smart Object dubbelklickar du för att redigera dess innehåll och kopiera CSS från lager i Smart Object-dokumentet, eller rastrerar du lagret först om det är lämpligt för ditt arbetsflöde.

Funktionen kan inte bearbeta flera form- eller textlager som har valts samtidigt om de inte är grupperade. Om du vill kopiera CSS från flera lager samtidigt placerar du dem i en lagergrupp först.

Generera CSS-kod från dina lager

CSS-koden finns nu i urklipp och är redo att integreras i ditt webbprojekt. Granska de genererade egenskaperna för att säkerställa att de uppfyller dina utvecklingskrav, och justera värden efter behov för responsiv design eller webbläsarkompatibilitet.