Generazione di CSS dai livelli

La funzionalità Copia CSS genera le proprietà CSS (Cascading Style Sheet) direttamente dai livelli di Photoshop, catturando le specifiche di design che possono essere incollate nei file del foglio di stile. Questo flusso di lavoro riduce le distanze tra il design visivo e l'implementazione del codice, soprattutto quando si preparano risorse per progetti web o si collabora con sviluppatori che necessitano di specifiche di stile precise.

Usa Copia CSS quando devi tradurre gli elementi di design visivo in dichiarazioni di stile pronte per il codice. Questa funzionalità funziona con singoli livelli forma, livelli di testo o gruppi di livelli contenenti questi elementi. Genera CSS che può essere incollato direttamente nel foglio di stile, catturando le proprietà di design con una precisione al pixel. Per flussi di lavoro più ampi dal design al web, scopri effetti e stili dei livelli per altre opzioni di stile e esportazione delle risorse per altri formati di output.

Proprietà CSS acquisite dai livelli

Copia CSS estrae proprietà diverse in base al tipo di livello selezionato.

I livelli di forma generano CSS per:

• Coordinate di dimensione e posizione
• Colore traccia
• Colore di riempimento, incluse le definizioni delle sfumature
• Effetti di ombra esterna

I livelli di testo acquisiscono le proprietà delle forme oltre alle specifiche di composizione tipografica:

• Famiglia di font
• Dimensione del font e spessore
• Altezza della riga
• Decorazione del testo (sottolineato, barrato)
• Allineamento verticale (apice, pedice)
• Allineamento testo

I gruppi di livelli creano classi CSS strutturate che rappresentano le relazioni padre-figlio.Il gruppo stesso diventa un div principale, mentre ciascun livello all'interno del gruppo genera un div figlio. I valori di posizione top e left per gli elementi figlio vengono calcolati in relazione al contenitore principale, replicando il comportamento normale di posizionamento CSS.

Limiti di Copia CSS

Copia CSS non funziona con gli Oggetti avanzati.Se il livello è un Oggetto avanzato, fai doppio clic per modificarne il contenuto e copiare il CSS dai livelli all’interno del documento Oggetto avanzato, oppure rasterizza prima il livello se è adatto al flusso di lavoro.

La funzionalità non può elaborare più livelli forma o testo selezionati contemporaneamente, a meno che non siano raggruppati.Per copiare il CSS da più livelli contemporaneamente, raggruppali prima in un gruppo di livelli.

Genera codice CSS dai livelli

Il codice CSS è ora negli appunti e pronto per essere integrato nel progetto web.Rivedi le proprietà generate per assicurarti che siano in linea con i requisiti di sviluppo e modifica i valori se necessario per la progettazione responsive o la compatibilità con il browser.