Guida utente Annulla

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. Imparare più velocemente con il pannello Scopri di Illustrator
      3. Creare documenti
      4. Barra degli strumenti
      5. Scelte rapide da tastiera predefinite
      6. Personalizzare le scelte rapide da tastiera
      7. Introduzione alle tavole disegno
      8. Gestire le tavole disegno
      9. Personalizzazione dell’area di lavoro
      10. Pannello Proprietà
      11. Impostare le preferenze
      12. Area di lavoro Tocco
      13. Supporto di Microsoft Surface Dial in Illustrator
      14. Annullare le modifiche e gestire la cronologia di progettazione
      15. Ruota vista
      16. Righelli, griglie e guide
      17. Accesso facilitato in Illustrator
      18. Modalità protetta
      19. Visualizzare la grafica
      20. Usare la Touch Bar con Illustrator
      21. File e modelli
    3. Strumenti in Illustrator
      1. Panoramica sugli strumenti
      2. Selezionare gli strumenti
        1. Selezione
        2. Selezione diretta
        3. Selezione gruppo
        4. Bacchetta magica
        5. Lazo
        6. Tavola disegno
      3. Strumenti di navigazione
        1. Mano
        2. Ruota vista
        3. Zoom
      4. Strumenti Pittura
        1. Sfumatura
        2. Trama
        3. Crea forme
      5. Strumenti di testo
        1. Testo
        2. Testo su un tracciato
        3. Testo verticale
      6. Strumenti di disegno
        1. Penna
        2. Aggiungi punto di ancoraggio
        3. Elimina punto di ancoraggio
        4. Punto di ancoraggio
        5. Curvatura
        6. Segmento linea
        7. Rettangolo
        8. Rettangolo arrotondato
        9. Ellisse
        10. Poligono
        11. Stella
        12. Pennello
        13. Pennello tracciato chiuso
        14. Matita
        15. Shaper
        16. Sezione
      7. Strumenti di modifica
        1. Rotazione
        2. Riflettere
        3. Scala
        4. Distorsione curvilinea
        5. Larghezza
        6. Trasformazione libera
        7. Contagocce
        8. Fusione
        9. Gomma
        10. Forbici
    4. Azioni rapide
      1. Testo retrò
      2. Testo Luce al neon
      3. Testo vecchia scuola
      4. Ricolora
      5. Convertire schizzi in grafica vettoriale
  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. Vettorizzazione di immagini raster
    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. Condividere i documenti per la revisione
      4. Aggiornare l'archiviazione cloud per Adobe Illustrator
      5. 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. Oggetti e materiali 3D
      1. Informazioni sugli effetti 3D in Illustrator
      2. Creare grafica 3D
      3. Mappare l'immagine sugli 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. Copiare e duplicare gli oggetti
      8. Ruotare e riflettere gli oggetti
      9. Intrecciare 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. Aggiungere testo e utilizzare gli oggetti di testo
      2. Creare elenchi puntati e numerati
      3. Gestire l'area di testo
      4. Font e composizione tipografica
      5. Tipo di formato
      6. Importare ed esportare il testo
      7. Formattare i paragrafi
      8. Caratteri speciali
      9. Creare testo su un tracciato
      10. Stili di carattere e di paragrafo
      11. Tabulazioni
      12. Testo e composizione tipografica
      13. Trovare i font mancanti (flusso di lavoro Typekit)
      14. Aggiornare testo da Illustrator 10
      15. Testo in arabo e in ebraico
      16. Font | Domande frequenti e suggerimenti per la risoluzione dei problemi
      17. Creazione di un effetto di testo 3D
      18. Progettazioni di composizione tipografica creativa
      19. Ridimensionare e ruotare il testo
      20. Spaziatura tra righe e caratteri
      21. Sillabazione e interruzioni di riga
      22. Miglioramenti del testo
      23. Dizionari per il controllo ortografico e la sillabazione
      24. Formattare i caratteri asiatici
      25. Modulo di composizione per scritture asiatiche
      26. Creare progettazioni di testo con oggetti di fusione
      27. 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. Inserire più file
      2. Gestire file collegati e incorporati
      3. Informazioni sui collegamenti
      4. Scorporare le immagini
      5. Importare disegni di Photoshop
      6. Importare immagini bitmap
      7. Importare i file Adobe PDF
      8. Importare file EPS, DCS e AutoCAD
    2. Creative Cloud Libraries in Illustrator 
      1. Creative Cloud Libraries in Illustrator
    3. Salva
      1. Salvare un disegno
    4. Esporta
      1. Utilizzare la grafica di Illustrator in Photoshop
      2. Esportare un disegno
      3. Raccolta delle risorse ed esportazione in blocco
      4. Creare pacchetti di file
      5. Creare file Adobe PDF
      6. Estrarre il codice CSS | Illustrator CC
      7. Opzioni Adobe PDF
      8. 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
    2. Recuperare i file dopo l'arresto anomalo
    3. Problemi relativi ai file
    4. Formati di file supportati
    5. Problemi relativi ai driver del dispositivo GPU
    6. Problemi dei dispositivi Wacom
    7. Problemi relativi ai file DLL
    8. Problemi relativi alla memoria
    9. Problema del file delle preferenze
    10. Problemi di font
    11. Problemi con la stampante
    12. Condividere il rapporto sugli arresti anomali con Adobe
    13. Miglioramento delle prestazioni di Illustrator

Scoprite come estrarre ed esportare il codice CSS per singoli oggetti oppure per l’intero layout realizzato in Illustrator.

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

Visualizzare ed estrarre il codice CSS

Il pannello Proprietà CSS consente agli utenti di eseguire le seguenti operazioni:

  • Visualizzare e 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.
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 del pannello Proprietà CSS G. Stili usati negli oggetti selezionati H. Codice CSS 

Per visualizzare ed estrarre il codice CSS, seguite i passaggi indicati:

  1. Scegliete Finestra > Proprietà CSS.

    Nota:

    Accertatevi che gli oggetti nel documento di Illustrator siano denominati nel pannello Livelli.

  2. Per visualizzare il codice CSS generato:

    Per un oggetto:

    Selezionate un oggetto. Il codice CSS per l’oggetto viene visualizzato nel pannello Proprietà CSS.

    Per più oggetti:

    Tenete premuto Maiusc, selezionate più oggetti e scegliete Genera CSS nel pannello Proprietà CSS.

    Per tutti gli oggetti:

    Premete Ctrl/Comando + A per selezionare tutti gli oggetti e selezionate Genera CSS nel pannello Proprietà CSS.

  3. Per ottenere il codice CSS generato, effettuate una delle seguenti operazioni:

    Per copiare il codice selezionato:

    • Selezionate un codice specifico e scegliete Copia stile selezionato per copiarlo negli Appunti.
    • Selezionate il menu del pannello Proprietà CSS   e scegliete Esporta CSS selezionato per esportare in un file.

    Per copiare tutti i codici:

    • Non effettuate alcuna selezione nel codice CSS e scegliete Copia stile selezionato per copiarlo negli Appunti.
    • Selezionate il menu del pannello Proprietà CSS   e scegliete Esporta tutto per esportare in un file.

  4. Quando salvate il codice CSS in un file, scegliete tra le opzioni fornite nella finestra di dialogo Opzioni esportazione CSS.

    Finestra di dialogo Opzioni esportazione CSS
    Opzioni di esportazione CSS

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

Argomenti correlati

Avete una domanda o un’idea?

Chiedete alla community di utenti

Se avete domande o un'idea da condividere, partecipate alla community di Adobe Illustrator. Ci fa sempre piacere ricevere i vostri feedback.

Logo Adobe

Accedi al tuo account

Collegamenti rapidi

Visualizza tutti i tuoi piani Gestione dei piani

Note legali    |    Informativa sulla privacy online