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. Principes de base sur les espaces de travail
      2. Création de documents
      3. Outils
      4. Raccourcis clavier par défaut
      5. Personnalisation des raccourcis clavier
      6. Introduction aux plans de travail
      7. Gestion des plans de travail
      8. Personnalisation de l’espace de travail
      9. Panneau Propriétés
      10. Définition des préférences de la mémoire
      11. Espace de travail Tactile
      12. Prise en charge de Microsoft Surface Dial dans Illustrator
      13. Récupération, annulation et automatisation
      14. Faire pivoter l’affichage
      15. Règles, grilles et repères
      16. Accessibilité dans Illustrator
      17. Mode sans échec
      18. Affichage des illustrations
      19. Utilisation de la Touch Bar avec Illustrator
      20. Fichiers et modèles
    3. Outils dans Illustrator
      1. Sélection
        1. Présentation
        2. Sélection
        3. Sélection directe
        4. Lasso
        5. Plan de travail
      2. Navigation
        1. Présentation
        2. Zoom
        3. Pivotement de l’affichage
      3. Peinture
        1. Présentation
        2. Dégradé
        3. Concepteur de forme
      4. Texte
        1. Présentation
        2. Texte
        3. Texte curviligne
  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 des documents dans Illustrator sur iPad
      2. Importation de documents Photoshop et Fresco
    4. Sélection et organisation des objets
      1. Création des objets répétés
      2. Fusion d’objets
    5. Dessin
      1. Dessin et modification des 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 des documents en ligne Illustrator
      2. Partage et collaboration sur des documents en ligne Illustrator
      3. Mise à niveau de l’espace de stockage pour Adobe Illustrator
      4. 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 des 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. Effets 3D et matières Adobe Substance
      1. À propos des effets 3D dans Illustrator
      2. Création de graphismes 3D
      3. Placage d’illustrations sur des objets 3D
      4. Création d’objets 3D
      5. Création de texte 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. Duplication d’objets
      8. Application de rotations et de symétries aux 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. Gestion de la zone de texte
      3. Polices et typographie
      4. Mise en forme de texte
      5. Importation et exportation de texte
      6. Mise en forme des paragraphes
      7. Caractères spéciaux
      8. Création de texte curviligne
      9. Styles de caractère et de paragraphe
      10. Onglets
      11. Texte et typographie
      12. Recherche de polices manquantes (flux de travaux Typekit)
      13. Mise à jour de textes provenant d’Illustrator 10
      14. Texte en arabe et en hébreu
      15. Polices | FAQ et conseils de dépannage
      16. Création d’effets de texte 3D
      17. Designs typographiques créatifs
      18. Mise à l’échelle et rotation du texte
      19. Espacement des lignes et interlettrage
      20. Césure et sauts de ligne
      21. Améliorations relatives au texte
      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
    8. Création d’effets spéciaux
      1. Utilisation des effets
      2. Styles graphiques
      3. Création d’une ombre portée
      4. Attributs d’aspect
      5. Création d’esquisses et de mosaïques
      6. Ombres portées, lueurs et contour progressif
      7. 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. Création d’animations
      5. Tranches et cartes-images
  6. Importation, exportation et enregistrement
    1. Importation
      1. Importation de fichiers d’illustration
      2. Importation d’images bitmap
      3. Importation d’une illustration à partir de Photoshop
      4. Importation de plusieurs fichiers
      5. Annulation de l’incorporation des images
      6. Importation de fichiers Adobe PDF
      7. Importation de fichiers EPS, DCS et AutoCAD
      8. Informations sur les liens
    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. Informations sur les fichiers et métadonnées
  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

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). Vous pouvez choisir d’exporter le code CSS des objets individuels ou la mise en page complète conçue dans Illustrator.   

Grâce au panneau Propriétés CSS (Fenêtre > Propriétés CSS), les utilisateurs peuvent :

  • Afficher le code CSS pour des objets sélectionnés
  • 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

Affichage et extraction de code CSS

Remarque :

Pour générer un code CSS, procédez de l’une des manières suivantes :

  • assurez-vous que les objets contenus dans votre document Illustrator sont nommés dans le panneau du calque.
  • Cliquez sur Fenêtre > Propriétés CSS > menu contextuel > Options d’exportation, puis activez la case à cocher Générer la CSS pour les objets sans nom. 

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

    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 livre G. Styles utilisés dans les objets sélectionnés H. Code CSS 

  2. Dans un document Illustrator ouvert, effectuez l’une des opérations suivantes :

    • Sélectionnez un objet. Le code CSS de l’objet s’affiche dans le panneau Propriétés CSS.
    • Maintenez enfoncée la touche Maj et sélectionnez plusieurs objets, puis cliquez sur le bouton Générer la CSS dans le panneau Propriétés CSS.
    • Appuyez sur la combinaison de touches Ctrl/Cmd + A pour sélectionner tous les objets, puis cliquez sur le bouton Générer la CSS dans le panneau Propriétés CSS.

    Le code CSS généré s’affiche.

  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 le code spécifique, puis :
      • Pour copier dans le Presse-papiers, cliquez sur Copier la sélection Style.
      • Pour exporter vers un fichier, cliquez sur le menu contextuel, puis sur Exporter la CSS sélectionnée
        .
    • Pour copier la totalité du code, ne faites aucune sélection dans le code CSS, puis :
      • Pour copier dans le Presse-papiers, cliquez sur Copier la sélection Style.
      • Pour exporter vers un fichier, cliquez sur le menu contextuel, puis sur Tout exporter.

  4. Lors de l’enregistrement du code CSS dans un fichier, choisissez l’une des options suivantes :

    Options d’exportation CSS

    Remarque :

    Pour modifier le contenu du code CSS qui est généré, dans le panneau Propriétés CSS, cliquez sur Options d’exportation, puis faites les sélections appropriées.

Echantillon 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; }
Logo Adobe

Accéder à votre compte

Liens rapides

Voir toutes vos formules Gérer vos formules

Informations juridiques    |    Politique de confidentialité en ligne

[Feedback V2 Badge]