In Illustrator potete creare il progetto di una pagina HTML. Questo viene usato come punto di partenza visivo per gli sviluppatori Web che elaborano poi il codice per il layout, gli stili e gli oggetti in un editor HTML. Tuttavia, replicare con precisione l’aspetto e la posizione dei componenti e degli oggetti richiede molto tempo e impegno.
Con Illustrator CC, quando create il layout per una pagina HTML potete anche generare ed esportare il codice CSS che definisce l’aspetto dei componenti e degli oggetti della pagina. Il codice CSS consente di controllare l’aspetto del testo e degli oggetti (in modo analogo agli stili di grafica e carattere). Potete esportare il codice CSS per singoli oggetti oppure per l’intero layout realizzato in Illustrator.
Con il pannello Proprietà CSS (Finestra > Proprietà CSS) è possibile effettuare le seguenti operazioni:
- Visualizzare il codice CSS per gli oggetti selezionati
- Copiare il codice CSS per gli oggetti selezionati
- Esportare alcuni o tutti gli elementi selezionati di Illustrator in un file CSS
- Esportare le immagini utilizzate che possono essere rasterizzate
- Generare codice CSS specifico per il browser
Video: estrazione del codice CSS in Illustrator CC
Video: estrazione del codice CSS in Illustrator CC
Scoprite come creare più rapidamente i siti Web: Illustrator CC genera il codice CSS per testo, oggetti e perfino per i layout completi.
Nota:
Per generare il codice CSS, effettuate una delle seguenti operazioni:
- Accertatevi che gli oggetti nel documento di Illustrator siano denominati nel pannello Livelli.
- Fate clic su Finestra > Proprietà CSS; dal menu a comparsa scegliete Opzioni di esportazione e selezionate Genera CSS per oggetti senza nome.
-
A. Avvertenza, se alcuni stili non possono essere convertiti in codice CSS B. Finestra di dialogo Opzioni esportazione CSS C. Esporta CSS selezionato in file D. Copia stile selezionato negli appunti E. Genera CSS F. Menu a comparsa G. Stili usati negli oggetti selezionati H. Codice CSS
-
In un documento aperto di Illustrator, effettuate una delle seguenti operazioni:
- Selezionate un oggetto. Il codice CSS per l’oggetto viene visualizzato nel pannello Proprietà CSS.
- Tenete premuto Maiusc, selezionate più oggetti e fate clic sul pulsante Genera CSS nel pannello Proprietà CSS.
- Tenete premuto Ctrl/Comando + A per selezionare tutti gli oggetti e fate clic sul pulsante Genera CSS nel pannello Proprietà CSS.
- Selezionate un oggetto. Il codice CSS per l’oggetto viene visualizzato nel pannello Proprietà CSS.
-
Per ottenere il codice CSS generato, effettuate una delle seguenti operazioni:
- Per copiare il codice selezionato, selezionate il codice specifico e quindi:
- Per copiarlo negli Appunti, fate clic su Copia stile selezionato.
- Per esportarlo in un file, fate clic sul menu a comparsa e scegliete Esporta CSS selezionato.
- Per copiare tutto il codice, non selezionate nulla nel codice CSS e quindi:
- Per copiarlo negli Appunti, fate clic su Copia stile selezionato.
- Per esportarlo in un file, fate clic sul menu a comparsa e scegliete Esporta tutto.
- Per copiare il codice selezionato, selezionate il codice specifico e quindi:
.GRADIENT_BOX
{
background : -moz-linear-gradient(0% 50% 0deg,rgba(255, 242, 0, 1) 0%,rgba(254, 236, 1, 1) 10.31%,rgba(253, 218, 4, 1) 24.34%,rgba(251, 190, 9, 1) 40.51%,rgba(247, 150, 15, 1) 58.28%,rgba(243, 99, 24, 1) 77.37%,rgba(238, 37, 34, 1) 97.27%,rgba(237, 28, 36, 1) 100%);
background : -webkit-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%);
background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0,rgba(255, 242, 0, 1) ),color-stop(0.1031,rgba(254, 236, 1, 1) ),color-stop(0.2434,rgba(253, 218, 4, 1) ),color-stop(0.4051,rgba(251, 190, 9, 1) ),color-stop(0.5828,rgba(247, 150, 15, 1) ),color-stop(0.7737,rgba(243, 99, 24, 1) ),color-stop(0.9727,rgba(238, 37, 34, 1) ),color-stop(1,rgba(237, 28, 36, 1) ));
background : -o-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%);
background : -ms-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF200', endColorstr='#ED1C24' ,GradientType=0)";
background : linear-gradient(90deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%);
border-style : Solid;
border-color : #231F20;
border-color : rgba(35, 31, 32, 1);
border-width : 1px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF200',endColorstr='#ED1C24' , GradientType=1);
}
.GRADIENT_BOX
{
background : -webkit-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%);
background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0,rgba(255, 242, 0, 1) ),color-stop(0.1031,rgba(254, 236, 1, 1) ),color-stop(0.2434,rgba(253, 218, 4, 1) ),color-stop(0.4051,rgba(251, 190, 9, 1) ),color-stop(0.5828,rgba(247, 150, 15, 1) ),color-stop(0.7737,rgba(243, 99, 24, 1) ),color-stop(0.9727,rgba(238, 37, 34, 1) ),color-stop(1,rgba(237, 28, 36, 1) ));
background : linear-gradient(90deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%);
border-style : Solid;
border-color : #231F20;
border-color : rgba(35, 31, 32, 1);
border-width : 1px;
}
.NormalCharacterStyle
{
font-family : Myriad Pro;
font-size : 12px;
}
.st0
{
border-style : Solid;
border-color : #FFFFFF;
border-color : rgba(255, 255, 255, 1);
border-width : 0px;
}
.GRADIENT_BOX
{
background : -webkit-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%);
background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0,rgba(255, 242, 0, 1) ),color-stop(0.1031,rgba(254, 236, 1, 1) ),color-stop(0.2434,rgba(253, 218, 4, 1) ),color-stop(0.4051,rgba(251, 190, 9, 1) ),color-stop(0.5828,rgba(247, 150, 15, 1) ),color-stop(0.7737,rgba(243, 99, 24, 1) ),color-stop(0.9727,rgba(238, 37, 34, 1) ),color-stop(1,rgba(237, 28, 36, 1) ));
background : linear-gradient(90deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%);
border-style : Solid;
border-color : #231F20;
border-color : rgba(35, 31, 32, 1);
border-width : 1px;
}
I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.