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. Creare documenti
      3. Barra degli strumenti
      4. Scelte rapide da tastiera predefinite
      5. Personalizzare le scelte rapide da tastiera
      6. Introduzione alle tavole disegno
      7. Gestire le tavole disegno
      8. Personalizzazione dell’area di lavoro
      9. Pannello Proprietà
      10. Impostare le preferenze
      11. Area di lavoro Tocco
      12. Supporto di Microsoft Surface Dial in Illustrator
      13. Ripristino, annullamento, cronologia e automazione
      14. Ruota vista
      15. Righelli, griglie e guide
      16. Accesso facilitato in Illustrator
      17. Modalità protetta
      18. Visualizzare la grafica
      19. Usare la Touch Bar con Illustrator
      20. 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
  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. 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. Mappare l'immagine sugli oggetti 3D
      4. Creare oggetti 3D
      5. 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. 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

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