Estrarre il codice CSS | Illustrator

Cerca
  1. Guida utente di Illustrator
  2. Scoprire Illustrator
    1. Introduzione a Illustrator
      1. Novità di Illustrator
      2. Domande frequenti
      3. Requisiti di sistema per Illustrator
      4. Illustrator per Apple Silicon
    2. Area di lavoro
      1. Nozioni di base sull’area di lavoro
      2. Creare documenti
      3. StrumentiScelte rapide da tastiera predefinite | Illustrator
      4. Personalizzare le scelte rapide da tastiera
      5. Tavole da disegno
      6. Personalizzazione dell’area di lavoro
      7. Pannello Proprietà
      8. Impostare le preferenze
      9. Area di lavoro Tocco
      10. Supporto di Microsoft Surface Dial in Illustrator
      11. Ripristino, annullamento e automazione
      12. Ruota vista
      13. Righelli, griglie e guide
      14. Accesso facilitato in Illustrator
      15. Modalità protetta
      16. Visualizzare la grafica
      17. Usare la Touch Bar con Illustrator
      18. File e modelli
      19. Sincronizzare le impostazioni con Adobe Creative Cloud
    3. Strumenti in Illustrator
      1. Selezione
        1. Panoramica
        2. Selezione
        3. Selezione diretta
        4. Lazo
      2. Navigazione
        1. Panoramica
        2. Zoom
        3. Ruota vista
      3. Pittura
        1. Panoramica
        2. Sfumatura
        3. Crea forme
      4. Testo
        1. Panoramica
        2. Testo
        3. Testo su tracciato
  3. Illustrator per iPad
    1. Introduzione a Illustrator per iPad
      1. Panoramica di Illustrator per iPad
      2. Domande frequenti su Illustrator per iPad
      3. Requisiti di sistema | Illustrator per iPad
      4. Cosa è possibile fare con Illustrator per iPad
    2. Area di lavoro
      1. Area di lavoro di Illustrator per iPad
      2. Scelte rapide tocco e gesti
      3. Scelte rapide da tastiera per Illustrator per iPad
      4. Gestire le impostazioni dell'app
    3. Documenti
      1. Utilizzare i documenti in Illustrator per iPad
      2. Importazione di documenti Photoshop e Fresco
    4. Selezionare e disporre oggetti
      1. Creare oggetti ripetuti
      2. Fusione di oggetti
    5. Disegno
      1. Disegnare e modificare i tracciati
      2. Disegnare e modificare le forme
    6. Testo
      1. Utilizzo di testo e font
      2. Creare progetti di testo lungo un tracciato
      3. Aggiungere i propri font
    7. Utilizzo delle immagini
      1. Utilizzo delle immagini
    8. Colore
      1. Applicare colori e sfumature
  4. Documenti cloud
    1. Nozioni di base
      1. Utilizzare i documenti cloud di Illustrator
      2. Condividere e collaborare sui documenti cloud di Illustrator
      3. Aggiornare l'archiviazione cloud per Adobe Illustrator
      4. Documenti cloud di Illustrator | Domande frequenti
    2. Risoluzione dei problemi
      1. Risoluzione dei problemi di creazione o salvataggio dei documenti cloud di Illustrator
      2. Risoluzione dei problemi relativi ai documenti cloud di Illustrator
  5. Aggiunta e modifica di contenuti
    1. Disegno
      1. Nozioni di base sul disegno
      2. Modificare i tracciati
      3. Creare un disegno con perfezionamento pixel applicato
      4. Disegnare con lo strumento Penna, Curvatura o Matita
      5. Disegnare linee e forme semplici
      6. Ricalco immagine
      7. Semplificare un tracciato
      8. Definire le griglie prospettiche
      9. Strumenti simboli e set di simboli
      10. Regolare i segmenti di tracciato
      11. Disegna un fiore in 5 semplici passaggi
      12. Disegno in prospettiva
      13. Simboli
      14. Disegnare tracciati allineati ai pixel per i flussi di lavoro Web
    2. Effetti 3D e materiali Adobe Substance
      1. Informazioni sugli effetti 3D in Illustrator
      2. Creare grafica 3D
      3. Creare oggetti 3D
      4. Creare testo 3D
    3. Colore
      1. Il colore
      2. Selezionare i colori
      3. Usare e creare i campioni
      4. Regolare i colori
      5. Utilizzare il pannello Temi Adobe Color
      6. Gruppi di colori (armonie)
      7. Pannello Temi colore
      8. Ricolorare il disegno
    4. Colorare
      1. Pittura
      2. Colorare con riempimenti e tracce
      3. Gruppi di pittura dinamica
      4. Sfumature
      5. Pennelli
      6. Metodi di trasparenza e fusione
      7. Applicare la traccia a un oggetto
      8. Creare e modificare i pattern
      9. Trame
      10. Pattern
    5. Selezionare e disporre oggetti
      1. Selezionare gli oggetti
      2. Livelli
      3. Raggruppare ed espandere gli oggetti
      4. Spostare, allineare e distribuire gli oggetti
      5. Sovrapporre gli oggetti    
      6. Bloccare, nascondere ed eliminare gli oggetti
      7. Duplicare gli oggetti
      8. Ruotare e riflettere gli oggetti
    6. Rimodellare oggetti
      1. Ritagliare le immagini
      2. Trasformare gli oggetti
      3. Combinare più oggetti
      4. Tagliare, dividere e rifilare gli oggetti
      5. Alterazione marionetta
      6. Ridimensionare, inclinare e distorcere gli oggetti
      7. Fusione di oggetti
      8. Rimodellare con gli involucri
      9. Rimodellare gli oggetti con gli effetti
      10. Creare nuove forme con gli strumenti Shaper e Crea forme
      11. Lavorare con gli angoli dinamici
      12. Flussi di lavoro migliorati per rimodellare gli oggetti con supporto touch
      13. Modificare le maschere di ritaglio
      14. Forme dinamiche
      15. Creare forme con lo strumento Crea forme
      16. Modifica globale
    7. Testo
      1. Creare il testo
      2. Font e composizione tipografica
      3. Tipo di formato
      4. Importare ed esportare il testo
      5. Formattare i paragrafi
      6. Caratteri speciali
      7. Creare testo su un tracciato
      8. Stili di carattere e di paragrafo
      9. Tabulazioni
      10. Testo e composizione tipografica
      11. Trovare i font mancanti (flusso di lavoro Typekit)
      12. Aggiornare testo da Illustrator 10
      13. Testo in arabo e in ebraico
      14. Font | Domande frequenti e suggerimenti per la risoluzione dei problemi
      15. Creazione di un effetto di testo 3D
      16. Progettazioni di composizione tipografica creativa
      17. Ridimensionare e ruotare il testo
      18. Spaziatura tra righe e caratteri
      19. Sillabazione e interruzioni di riga
      20. Miglioramenti del testo
      21. Dizionari per il controllo ortografico e la sillabazione
      22. Formattare i caratteri asiatici
      23. Modulo di composizione per scritture asiatiche
      24. Creare progettazioni di testo con oggetti di fusione
      25. Creare un poster di testo utilizzando Ricalco immagine
    8. Creare effetti speciali
      1. Utilizzo degli effetti
      2. Stili di grafica
      3. Creare un’ombra esterna
      4. Attributi di aspetto
      5. Creare schizzi e mosaici
      6. Ombre esterne, bagliori e bordi sfocati
      7. Riepilogo degli effetti
    9. Grafica per il Web
      1. Come ottenere risultati ottimali nella creazione di grafica per il Web
      2. Grafici
      3. SVG
      4. Creare animazioni
      5. Sezioni e mappe immagini
  6. Importare, esportare e salvare
    1. Importazione
      1. Importare i file di grafica
      2. Importare immagini bitmap
      3. Importare immagini di Photoshop
      4. Inserire più file | Illustrator CC
      5. Scorporare le immagini
      6. Importare i file Adobe PDF
      7. Importare file EPS, DCS e AutoCAD
      8. Informazioni sui collegamenti
    2. Creative Cloud Libraries in Illustrator 
      1. Creative Cloud Libraries in Illustrator
    3. Salva
      1. Salvare un disegno
    4. Esporta
      1. Esportare un disegno
      2. Raccolta delle risorse ed esportazione in blocco
      3. Creare pacchetti di file
      4. Creare file Adobe PDF
      5. Estrarre il codice CSS | Illustrator CC
      6. Opzioni Adobe PDF
      7. Informazioni file e metadati
  7. Stampa
    1. Preparare la stampa
      1. Impostare i documenti per la stampa
      2. Modificare le dimensioni e l’orientamento della pagina
      3. Specificare gli indicatori di taglio per rifilare o allineare
      4. Introduzione al quadro di grandi dimensioni
    2. Stampa
      1. Sovrastampa
      2. Stampare con la gestione colore
      3. Stampa PostScript
      4. Predefiniti di stampa
      5. Segni di stampa e pagine al vivo
      6. Stampare e salvare un disegno con trasparenza
      7. Abbondanza
      8. Stampare le selezioni colore
      9. Stampare sfumature, trame e fusioni di colore
      10. Sovrastampa del bianco
  8. Automatizzare operazioni
    1. Unione dei dati mediante il pannello Variabili
    2. Automazione con script
    3. Automazione con le azioni
  9. Risoluzione dei problemi 
    1. Problemi di arresto anomalo all’avvio
    2. Recuperare i file dopo l'arresto anomalo
    3. Problemi relativi ai file
    4. Problemi relativi ai driver del dispositivo GPU
    5. Problemi dei dispositivi Wacom
    6. Problemi relativi ai file DLL
    7. Problemi relativi alla memoria
    8. Problema del file delle preferenze
    9. Problemi di font
    10. Problemi con la stampante
    11. Condividere il rapporto sugli arresti anomali con Adobe

In Illustrator puoi 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, quando crei il layout per una pagina HTML puoi 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

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.
  • Fai clic su Finestra > Proprietà CSS; dal menu a comparsa scegli Opzioni di esportazione e selezionate Genera CSS per oggetti senza nome. 

  1. Scegli Finestra > Proprietà CSS.

    Codice proprietà CS

    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:

    • Seleziona un oggetto. Il codice CSS per l’oggetto viene visualizzato nel pannello Proprietà CSS.
    • Tieni premuto Maiusc, selezionate più oggetti e fai clic sul pulsante Genera CSS nel pannello Proprietà CSS.
    • Tieni premuto Ctrl/Comando + A per selezionare tutti gli oggetti e fai 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, fai clic su Copia stile selezionato.
      • Per esportarlo in un file, fai clic sul menu a comparsa e scegli Esporta CSS selezionato
        .
    • Per copiare tutto il codice, non selezionate nulla nel codice CSS e quindi:
      • Per copiarlo negli Appunti, fai clic su Copia stile selezionato.
      • Per esportarlo in un file, fai clic sul menu a comparsa e scegli Esporta tutto.

  4. Quando salvi il codice CSS in un file, scegli una delle seguenti opzioni:

    Opzioni di esportazione del codice CSS

    Nota:

    Per modificare il contenuto del codice CSS generato, nel pannello Proprietà CSS fai 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 i 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; }
Logo Adobe

Accedi al tuo account

Collegamenti rapidi

Visualizza tutti i tuoi piani Gestione dei piani

Note legali    |    Informativa sulla privacy online