Estrarre il codice CSS | Illustrator CC

Cerca
Adobe Illustrator Guida utente

Su questa pagina

Prodotti interessati: Adobe Illustrator

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

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.
Rufus Deuchler

Visualizzare ed estrarre il codice CSS

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. 

  1. Scegliete Finestra > Proprietà CSS.

    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 

  2. 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.

    Viene visualizzato il codice CSS generato.

  3. 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.

  4. Quando salvate il codice CSS in un file, scegliete una delle seguenti opzioni:

    Nota:

    per modificare il contenuto del codice CSS generato, nel pannello Proprietà CSS fate clic su Opzioni di esportazione e selezionate le opzioni desiderate.

Codice CSS di esempio

Rettangolo con una sfumatura (tutti i browser)

.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);
}

Rettangolo con una sfumatura (solo browser basati su webkit) 

.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;
}

Più oggetti 

.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;
}