Guide d'utilisation Annuler

Extraction de code CSS | Illustrator 

Rechercher
  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
    2. Espace de travail
      1. Concepts de base sur l’espace de travail
      2. Formation accélérée grâce au panneau Découvrir d’Illustrator
      3. Création de documents
      4. Barre d’outils
      5. Raccourcis clavier par défaut
      6. Personnalisation des raccourcis clavier
      7. Introduction aux plans de travail
      8. Gestion des plans de travail
      9. Personnalisation de l’espace de travail
      10. Panneau Propriétés
      11. Définition des préférences de la mémoire
      12. Espace de travail Tactile
      13. Prise en charge de Microsoft Surface Dial dans Illustrator
      14. Annulation des modifications et gestion de l’historique de conception
      15. Rotation de l’affichage
      16. Règles, grilles et repères
      17. Accessibilité dans Illustrator
      18. Mode sans échec
      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
    4. Actions rapides
      1. Texte Rétro
      2. Texte Néon
      3. Old School texte
      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. Vectorisation d’images
      7. Simplification des tracés
      8. Définition de grilles de perspective
      9. Outils de symbolisme et jeux de symboles
      10. Modification des segments de tracé
      11. Création d’une fleur en 5 étapes faciles
      12. Dessin en perspective
      13. Symboles
      14. Dessin de tracés alignés sur les pixels dans des workflows web
    2. 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
    3. 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éfinition des couleurs d’une illustration
    4. Peinture
      1. À propos de la peinture
      2. Peinture avec les fonds et les contours
      3. Groupes de peinture dynamique
      4. Dégradés
      5. Formes
      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
    5. Sélection et organisation des objets
      1. Sélection d’objets
      2. Calques
      3. Association et développement des objets
      4. Déplacement, alignement et répartition d’objets
      5. Superposition d’objets    
      6. Verrouillage, masquage et suppression d’objets
      7. Copier et dupliquer des objets
      8. Application de rotations et de symétries aux objets
      9. Entrelacement d’objets
    6. 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
    7. Texte
      1. Ajout de texte et utilisation d’objets texte
      2. Création de listes à puce et numérotées
      3. Gestion de la zone de texte
      4. Polices et typographie
      5. Mise en forme de texte
      6. Importation et exportation de texte
      7. Mise en forme des paragraphes
      8. Caractères spéciaux
      9. Création de texte curviligne
      10. Styles de caractère et de paragraphe
      11. Onglets
      12. Recherche de polices manquantes (workflow Typekit)
      13. Texte en arabe et en hébreu
      14. Polices | FAQ et conseils de dépannage
      15. Création d’effets de texte 3D
      16. Designs typographiques créatifs
      17. Mise à l’échelle et rotation du texte
      18. Espacement des lignes et interlettrage
      19. Césure et sauts de ligne
      20. Orthographe et dictionnaires de langue
      21. Mise en forme des caractères asiatiques
      22. Compositeurs de scripts asiatiques
      23. Création de designs de texte avec des dégradés d’objets
      24. Création d’une affiche de texte à l’aide du tracé d’image
    8. 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
    9. 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 intégré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
      1. Enregistrement d’une illustration
    4. Exportation
      1. Utilisation d’illustrations Illustrator dans Photoshop
      2. Exportation d’une illustration
      3. Collecte et exportation de ressources par lots
      4. Assemblage de fichiers
      5. Création de fichiers Adobe PDF
      6. Extraction de code CSS | Illustrator CC
      7. Options Adobe PDF
      8. 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 de plantage
    2. Récupération de fichiers après un plantage
    3. Problèmes liés aux fichiers
    4. Formats de fichier pris en charge
    5. Problèmes avec un pilote de matériel GPU
    6. Problèmes liés à un appareil Wacom
    7. Problèmes liés aux fichiers DLL
    8. Problèmes de mémoire
    9. Problèmes liés au fichier de préférences
    10. Problèmes de police
    11. Problèmes d’imprimante
    12. Partage des rapports d’incident avec Adobe
    13. 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.

Logo Adobe

Accéder à votre compte

Liens rapides

Voir toutes vos formules Gérer vos formules

Informations juridiques    |    Politique de confidentialité en ligne