Guida utente Annulla

Estrarre il codice CSS | Illustrator

Cerca
Illustrator

Illustrator

Apri sul Web
  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
      5. Prestazioni GPU
    2. Area di lavoro
      1. Nozioni di base sull’area di lavoro
      2. Creare documenti
      3. Imparare più velocemente con il pannello Scopri di Illustrator
      4. Accelerare i flussi di lavoro utilizzando la barra delle attività contestuale
      5. Barra degli strumenti
      6. Scelte rapide da tastiera predefinite
      7. Personalizzare le scelte rapide da tastiera
      8. Introduzione alle tavole disegno
      9. Gestire le tavole disegno
      10. Personalizzazione dell’area di lavoro
      11. Pannello Proprietà
      12. Impostare le preferenze
      13. Area di lavoro Tocco
      14. Supporto di Microsoft Surface Dial in Illustrator
      15. Annullare le modifiche e gestire la cronologia di progettazione
      16. Ruota vista
      17. Righelli, griglie e guide
      18. Accesso facilitato in Illustrator
      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
        11. Dimension
    4. IA generativa (non disponibile nella Cina continentale)
      1. Generare scene, soggetti e icone utilizzando prompt di testo
      2. Generare modelli vettoriali utilizzando prompt di testo
      3. Generare riempimenti di forme vettoriali utilizzando prompt di testo
      4. Ricolorare la grafica utilizzando prompt di testo
    5. Azioni rapide
      1. Testo retrò
      2. Testo Luce al neon
      3. Testo vecchia scuola
      4. Ricolora
      5. Convertire schizzi in grafica vettoriale
  3. Illustrator sul Web (beta)
    1. Panoramica di Illustrator sul Web (beta)
    2. Domande frequenti di Illustrator sul Web (beta)
    3. Domande frequenti sulla risoluzione dei problemi
    4. Scelte rapide da tastiera per Illustrator sul Web (beta)
    5. Creare e combinare forme sul Web
    6. Aggiungere e modificare testo sul Web
    7. Applicare colori e sfumature sul Web
    8. Disegnare e modificare tracciati sul Web
    9. Utilizzo dei documenti cloud sul web
    10. Invitare i collaboratori per la modifica sul Web
  4. 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
  5. 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
  6. Aggiungere e modificare 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. Disegnare griglie rettangolari e polari
      7. Disegnare e modificare riflessi
      8. Ricalcare immagini
      9. Semplificare un tracciato
      10. Strumenti simboli e set di simboli
      11. Regolare i segmenti di tracciato
      12. Disegna un fiore in 5 semplici passaggi
      13. Creare e modificare una griglia prospettica
      14. Disegnare e modificare oggetti su una griglia prospettica
      15. Utilizzare gli oggetti come simboli per un uso ripetuto
      16. Disegnare tracciati allineati ai pixel per i flussi di lavoro Web
    2. Misurazione
      1. Misurare e tracciare le dimensioni
    3. 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
      5. Creare oggetti 3D
    4. 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
    5. Pittura
      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
    6. Selezionare e disporre oggetti
      1. Selezionare gli oggetti
      2. Livelli
      3. Espandere, raggruppare e separare gli oggetti
      4. Spostare, allineare e distribuire gli oggetti
      5. Allineare, organizzare e spostare gli oggetti su un tracciato
      6. Agganciare gli oggetti al glifo
      7. Agganciare gli oggetti a un glifo giapponese
      8. Sovrapporre gli oggetti    
      9. Bloccare, nascondere ed eliminare gli oggetti
      10. Copiare e duplicare gli oggetti
      11. Ruotare e riflettere gli oggetti
      12. Intrecciare gli oggetti
      13. Creare modelli artistici realistici
    7. 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
    8. Testo
      1. Aggiungere testo e utilizzare gli oggetti di testo
      2. Visualizzatore Reflow
      3. Creare elenchi puntati e numerati
      4. Gestire l'area di testo
      5. Font e composizione tipografica
      6. Convertire il testo nelle immagini in testo modificabile
      7. Aggiungere formattazione di base al testo
      8. Aggiungere formattazione avanzata al testo
      9. Importare ed esportare il testo
      10. Formattare i paragrafi
      11. Caratteri speciali
      12. Creare testo su un tracciato
      13. Stili di carattere e di paragrafo
      14. Tabulazioni
      15. Trovare i font mancanti (flusso di lavoro Typekit)
      16. Testo in arabo e in ebraico
      17. Font | Domande frequenti e suggerimenti per la risoluzione dei problemi
      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. Dizionari per il controllo ortografico e la sillabazione
      23. Formattare i caratteri asiatici
      24. Modulo di composizione per scritture asiatiche
      25. Creare progettazioni di testo con oggetti di fusione
      26. Creare un poster di testo utilizzando Ricalco immagine
    9. Creare effetti speciali
      1. Utilizzo degli effetti
      2. Stili di grafica
      3. Attributi di aspetto
      4. Creare schizzi e mosaici
      5. Ombre esterne, bagliori e bordi sfocati
      6. Riepilogo degli effetti
    10. Grafica per il Web
      1. Come ottenere risultati ottimali nella creazione di grafica per il Web
      2. Grafici
      3. SVG
      4. Sezioni e mappe immagini
  7. 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 grafica da 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. Salvare ed esportare
      1. Salvare un disegno
      2. Esportare un disegno
      3. Creare file Adobe PDF
      4. Opzioni Adobe PDF
      5. Utilizzare la grafica di Illustrator in Photoshop
      6. Raccolta delle risorse ed esportazione in blocco
      7. Creare pacchetti di file
      8. Estrarre il codice CSS | Illustrator CC
      9. Pannello Info documento
  8. 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
  9. Automatizzare operazioni
    1. Unione dei dati mediante il pannello Variabili
    2. Automazione con script
    3. Automazione con le azioni
  10. Risoluzione dei problemi 
    1. Problemi risolti
    2. Problemi noti
    3. Problemi di arresto anomalo
    4. Recuperare i file dopo l'arresto anomalo
    5. Modalità provvisoria
    6. Problemi relativi ai file
    7. Formati di file supportati
    8. Problemi relativi ai driver del dispositivo GPU
    9. Problemi dei dispositivi Wacom
    10. Problemi relativi ai file DLL
    11. Problemi relativi alla memoria
    12. Problema del file delle preferenze
    13. Problemi di font
    14. Problemi con la stampante
    15. Condividere il rapporto sugli arresti anomali con Adobe
    16. 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.

 Adobe

Ottieni supporto in modo più facile e veloce

Nuovo utente?

Collegamenti rapidi

Visualizza tutti i tuoi piani Gestione dei piani
Visualizza collegamenti rapidi
Nascondi collegamenti rapidi

Note legali    |    Informativa sulla privacy online