Guide d'utilisation Annuler

Extraction de code CSS | Illustrator 

Rechercher
Illustrator

Illustrator

Ouvrir sur le Web
  1. Guide de l’utilisateur d’Illustrator
  2. Découverte d’Illustrator
    1. Présentation d’Illustrator
      1. Nouveautés d’Illustrator
      2. Questions fréquentes
      3. Configuration requise pour Illustrator
      4. Illustrator pour Apple Silicon
      5. Performances GPU
    2. Espace de travail
      1. Principes de base sur les espaces de travail
      2. Création de documents
      3. Formation accélérée grâce au panneau Découvrir d’Illustrator
      4. Accélération des workflows à l’aide de la barre des tâches contextuelle
      5. Barre d’outils
      6. Raccourcis clavier par défaut
      7. Personnalisation des raccourcis clavier
      8. Introduction aux plans de travail
      9. Gestion des plans de travail
      10. Personnalisation de l’espace de travail
      11. Panneau Propriétés
      12. Définition des préférences de la mémoire
      13. Espace de travail Tactile
      14. Prise en charge de Microsoft Surface Dial dans Illustrator
      15. Annulation des modifications et gestion de l’historique de conception
      16. Rotation de l’affichage
      17. Règles, grilles et repères
      18. Accessibilité dans Illustrator
      19. Affichage des illustrations
      20. Utilisation de la Touch Bar avec Illustrator
      21. Fichiers et modèles
    3. Outils dans Illustrator
      1. Principales caractéristiques des outils
      2. Outils de sélection
        1. Sélection
        2. Sélection directe
        3. Sélection directe progressive
        4. Baguette magique
        5. Lasso
        6. Plan de travail
      3. Outils de navigation
        1. Main
        2. Rotation de l’affichage
        3. Zoom
      4. Outils de peinture
        1. Dégradé
        2. Filet
        3. Concepteur de forme
      5. Outils de texte
        1. Texte
        2. Texte curviligne
        3. Texte vertical
      6. Outils de dessin
        1. Plume
        2. Ajout de point d’ancrage
        3. Suppression de point d’ancrage
        4. Point d’ancrage
        5. Courbure
        6. Trait
        7. Rectangle
        8. Rectangle arrondi
        9. Ellipse
        10. Polygone
        11. Étoile
        12. Pinceau
        13. Forme de tache
        14. Crayon
        15. Shaper
        16. Tranche
      7. Outils de modification
        1. Rotation
        2. Miroir
        3. Mise à l’échelle
        4. Cisaillement
        5. Largeur
        6. Transformation manuelle
        7. Pipette
        8. Dégradé de formes
        9. Gomme
        10. Ciseaux
        11. Dimension
    4. IA générative (non disponible en Chine continentale)
      1. Génération de scènes, de sujets et d’icônes à l’aide de prompts
      2. Génération de motifs vectoriels à partir de prompts
      3. Génération de remplissages de forme vectorielle à partir de prompts
      4. Redéfinition des couleurs de votre illustration à l’aide d’un prompt
    5. Sélections rapides
      1. Texte Rétro
      2. Texte Néon
      3. Texte Old school
      4. Redéfinition de couleurs
      5. Conversion d’une esquisse en vecteur
  3. Illustrator sur iPad
    1. Introduction à Illustrator sur iPad
      1. Présentation d’Illustrator sur iPad
      2. FAQ sur Illustrator sur iPad
      3. Configuration requise | Illustrator sur iPad
      4. Ce que vous pouvez ou ne pouvez pas faire dans Illustrator sur iPad
    2. Espace de travail
      1. Espace de travail Illustrator sur iPad
      2. Raccourcis et mouvements tactiles
      3. Raccourcis clavier pour Illustrator sur iPad
      4. Gestion des paramètres de votre application
    3. Documents
      1. Utilisation de documents dans Illustrator sur iPad
      2. Importation de documents Photoshop et Fresco
    4. Sélection et organisation des objets
      1. Création d’objets répétés
      2. Fusion d’objets
    5. Dessin
      1. Dessin et modification de tracés
      2. Dessin et modification de formes
    6. Texte
      1. Utilisation du texte et des polices
      2. Création de compositions de texte sur un tracé
      3. Ajout de vos propres polices
    7. Utilisation d’images
      1. Vectorisation d’images pixellisées
    8. Couleur
      1. Application des couleurs et des dégradés
  4. Documents en ligne
    1. Fonctionnalités de base
      1. Utilisation de documents en ligne Illustrator
      2. Partage et collaboration sur des documents en ligne Illustrator
      3. Partage de documents à des fins de révision
      4. Mise à niveau de l’espace de stockage pour Adobe Illustrator
      5. Documents en ligne Illustrator | Questions fréquentes
    2. Résolution des problèmes
      1. Résolution des problèmes de création ou d’enregistrement de documents en ligne Illustrator
      2. Résolution des problèmes sur les documents en ligne Illustrator
  5. Ajout et modification de contenu
    1. Dessin
      1. Concepts de base sur le dessin
      2. Modification de tracés
      3. Dessin ultraprécis d’illustrations
      4. Dessin avec l’outil Stylo, Courbure ou Crayon
      5. Dessin de lignes et formes simples
      6. Dessin de grilles rectangulaires et grilles polaires
      7. Dessin et modification de halos
      8. Vectorisation d’images
      9. Simplification d’un tracé
      10. Outils de symbolisme et jeux de symboles
      11. Ajustement de segments de tracé
      12. Création d’une fleur en 5 étapes faciles
      13. Création et modification d’une grille de perspective
      14. Dessin et modification d’objets sur une grille de perspective
      15. Utilisation d’objets comme symboles en vue de les réutiliser
      16. Dessin de tracés alignés sur les pixels dans des workflows web
    2. Mesure
      1. Prise de mesures et report de cotes
    3. Objets et matières 3D
      1. À propos des effets 3D dans Illustrator
      2. Création de graphismes 3D
      3. Placage d’illustrations sur des objets 3D
      4. Création de texte 3D
      5. Création d’objets 3D
    4. Couleur
      1. À propos de la couleur
      2. Sélection de couleurs
      3. Utilisation et création de nuanciers
      4. Correction des couleurs
      5. Utilisation du panneau Thèmes Adobe Color
      6. Groupes de couleurs (harmonies)
      7. Panneau Thèmes de couleur
      8. Redéfinir les couleurs de l’illustration
    5. Peinture
      1. À propos de la peinture
      2. Peinture avec les fonds et les contours
      3. Groupes de peinture dynamique
      4. Dégradés
      5. Pinceaux
      6. Transparence et modes de fusion
      7. Application d’un contour sur un objet
      8. Création et modification de motifs
      9. Filets
      10. Motifs
    6. Sélection et organisation des objets
      1. Sélection d’objets
      2. Calques
      3. Développement, association et dissociation d’objets
      4. Déplacement, alignement et répartition d’objets
      5. Alignement, disposition et déplacement d’objets sur un tracé
      6. Accrochage d’objets aux glyphes
      7. Accrochage d’objets aux glyphes japonais
      8. Superposition d’objets    
      9. Verrouillage, masquage et suppression d’objets
      10. Copier et dupliquer des objets
      11. Application de rotations et de symétries aux objets
      12. Entrelacement d’objets
      13. Création de maquettes d’illustrations réalistes
    7. Remodelage d’objets
      1. Recadrage des images
      2. Transformation d’objets
      3. Combinaison d’objets
      4. Découpage, division et rognage d’objets
      5. Déformation de la marionnette
      6. Mise à l’échelle, déformation et distorsion des objets
      7. Fusion d’objets
      8. Modelage à l’aide d’enveloppes
      9. Remodelage des objets à l’aide d’effets
      10. Création de formes avec les outils Mise en forme et Concepteur de forme
      11. Utilisation des angles dynamiques
      12. Amélioration des flux de modelage avec prise en charge des commandes tactiles
      13. Modification des masques d’écrêtage
      14. Formes dynamiques
      15. Création de formes à l’aide de l’outil Concepteur de forme
      16. Modifications globales
    8. Texte
      1. Ajout de texte et utilisation d’objets texte
      2. Visionneuse Reflow
      3. Création de listes à puce et numérotées
      4. Gestion de la zone de texte
      5. Polices et typographie
      6. Conversion du texte dans les images en texte modifiable
      7. Ajout d’une mise en forme de base au texte
      8. Ajout d’une mise en forme avancée au texte
      9. Importation et exportation de texte
      10. Mise en forme des paragraphes
      11. Caractères spéciaux
      12. Création de texte curviligne
      13. Styles de caractère et de paragraphe
      14. Onglets
      15. Ajout de polices manquantes à partir d’Adobe Fonts
      16. Texte en arabe et en hébreu
      17. Polices | FAQ et conseils de dépannage
      18. Designs typographiques créatifs
      19. Mise à l’échelle et rotation du texte
      20. Espacement des lignes et interlettrage
      21. Césure et sauts de ligne
      22. Orthographe et dictionnaires de langue
      23. Mise en forme des caractères asiatiques
      24. Compositeurs de scripts asiatiques
      25. Création de designs de texte avec des dégradés d’objets
      26. Création d’une affiche de texte à l’aide du tracé d’image
    9. Création d’effets spéciaux
      1. Utilisation des effets
      2. Styles graphiques
      3. Attributs d’aspect
      4. Création d’esquisses et de mosaïques
      5. Ombres portées, lueurs et contour progressif
      6. Résumé des effets
    10. Images web
      1. Méthodes recommandées pour la création d’images destinées au Web
      2. Graphismes
      3. SVG
      4. Tranches et cartes-images
  6. Importation, exportation et enregistrement
    1. Importation
      1. Importation de plusieurs fichiers
      2. Gestion des fichiers liés et incorporés
      3. Informations sur les liens
      4. Annulation de l’intégration des images
      5. Importation d’une illustration à partir de Photoshop
      6. Importation d’images bitmap
      7. Importation de fichiers Adobe PDF
      8. Importation de fichiers EPS, DCS et AutoCAD
    2. Bibliothèques Creative Cloud dans Illustrator 
      1. Bibliothèques Creative Cloud dans Illustrator
    3. Enregistrement et exportation
      1. Enregistrement d’une illustration
      2. Exportation d’une illustration
      3. Création de fichiers Adobe PDF
      4. Options Adobe PDF
      5. Utilisation d’illustrations Illustrator dans Photoshop
      6. Collecte et exportation de ressources par lots
      7. Assemblage de fichiers
      8. Extraction de code CSS | Illustrator CC
      9. Panneau Informations sur le document
  7. Impression
    1. Préparation pour l’impression
      1. Configuration des documents pour l’impression
      2. Modification du format et de l’orientation de la page
      3. Définition des traits de coupe pour le rognage ou l’alignement
      4. Premiers pas avec les zones de travail de grande taille
    2. Impression
      1. Surimpression
      2. Impression avec gestion des couleurs
      3. Impression PostScript
      4. Paramètres prédéfinis d’impression
      5. Repères d’impression et fonds perdus
      6. Impression et enregistrement d’illustrations transparentes
      7. Recouvrement
      8. Impression des séparations des couleurs
      9. Impression de dégradés, de filets et de dégradés de formes
      10. Surimpression en blanc
  8. Automatisation des tâches
    1. Fusion des données à l’aide du panneau Variables
    2. Automatisation avec les scripts
    3. Automatisation avec des scripts d’action
  9. Résolution des problèmes 
    1. Problèmes résolus
    2. Problèmes connus
    3. Problèmes de plantage
    4. Récupération de fichiers après un plantage
    5. Mode sans échec
    6. Problèmes liés aux fichiers
    7. Formats de fichier pris en charge
    8. Problèmes avec un pilote de matériel GPU
    9. Problèmes liés à un appareil Wacom
    10. Problèmes liés aux fichiers DLL
    11. Problèmes de mémoire
    12. Problèmes liés au fichier de préférences
    13. Problèmes de police
    14. Problèmes d’imprimante
    15. Partage des rapports d’incident avec Adobe
    16. Optimisation des performances d’Illustrator

Découvrez comment extraire et exporter le code CSS pour des objets individuels ou pour la mise en page complète conçue dans Illustrator.

Vous pouvez créer la conception d’une page HTML dans Illustrator. Cela constitue un excellent guide visuel pour les développeurs Web qui peuvent ensuite encoder la mise en page, les styles et les objets d’une page dans un éditeur HTML. Toutefois, la réplication exacte de l’aspect et de la position des composants et des objets est un processus fastidieux qui prend beaucoup de temps.

Grâce à Illustrator, lorsque vous créez la mise en page pour une page HTML, vous pouvez également générer et exporter le code CSS sous-jacent qui détermine l’aspect des composants et des objets de la page. CSS vous permet de contrôler l’aspect du texte et des objets (à l’instar des styles graphiques et de caractères).   

Affichage et extraction de code CSS

Le panneau Propriétés CSS permet aux utilisateurs d’effectuer les opérations suivantes :

  • Afficher et copier le code CSS pour des objets sélectionnés.
  • Exporter un ou plusieurs éléments sélectionnés d’Illustrator vers un fichier CSS.
  • Exporter les images pixellisables utilisées.
  • Générer du code CSS spécifique au navigateur.
Propriétés de code CSS

A. Avertissement, si certains styles ne peuvent pas être convertis en code CSS B. Boîte de dialogue Options d’exportation de CSS C. Exporter la CSS sélectionnée dans un fichier D. Copier le style sélectionné dans le Presse-papiers E. Générer la CSS F. Menu du panneau Propriétés CSS G. Styles utilisés dans les objets sélectionnés H. Code CSS 

Pour afficher et extraire le code CSS, suivez les étapes indiquées :

  1. Sélectionnez Fenêtre > Propriétés CSS.

    Remarque :

    Assurez-vous que les objets contenus dans votre document Illustrator sont nommés dans le panneau du calque.

  2. Pour afficher le code CSS généré :

    Pour un objet :

    Sélectionnez un objet. Le code CSS de l’objet s’affiche dans le panneau Propriétés CSS.

    Pour plusieurs objets :

    Maintenez enfoncée la touche Maj et sélectionnez plusieurs objets, puis sélectionnez Générer la CSS dans le panneau Propriétés CSS.

    Pour tous les objets :

    Appuyez sur la combinaison de touches Ctrl/Cmd + A pour sélectionner tous les objets, puis sélectionnez Générer la CSS dans le panneau Propriétés CSS.

  3. Pour obtenir le code CSS généré, procédez de l’une des manières suivantes :

    Pour copier le code sélectionné :

    • Sélectionnez un code spécifique et sélectionnez Copier le style sélectionné pour le copier dans le presse-papiers.
    • Sélectionnez le menu du panneau Propriétés CSS et sélectionnez Exporter la CSS sélectionnée pour exporter vers un fichier.

    Pour copier tous les codes :

    • Ne faites aucune sélection dans le code CSS et sélectionnez Copier le style sélectionné pour le copier dans le presse-papiers.
    • Sélectionnez le menu du panneau Propriétés CSS   et sélectionnez Tout exporter pour exporter vers un fichier.

  4. Lors de l’enregistrement du code CSS dans un fichier, choisissez parmi les options proposées dans la boîte de dialogue Options d’exportation CSS.

    Boîte de dialogue Options d’exportation de CSS
    Options d’exportation CSS

Échantillon de code CSS

Rectangle avec dégradé appliqué (tous les navigateurs)

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

Rectangle avec dégradé appliqué (navigateurs basés sur webkit uniquement)

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

Plusieurs objets

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

Rubriques connexes

Vous avez une question ou une suggestion ?

Questions à la communauté

Si vous avez une question ou une idée à soumettre, rejoignez-nous au sein de la communauté Adobe Illustrator. Nous avons hâte de vous y retrouver.

Recevez de l’aide plus rapidement et plus facilement

Nouvel utilisateur ?

Liens rapides

Voir toutes vos formules Gérer vos formules
Afficher les liens rapides
Masquer les liens rapides

Informations juridiques    |    Politique de confidentialité en ligne