Extraction de code CSS | Illustrator CC

Rechercher
Adobe Illustrator Guide d'utilisation

Sur cette page

S’applique à : Adobe Illustrator

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

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 CC, 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

Vidéo : extraction de code CSS dans Illustrator CC

Vidéo : extraction de code CSS dans Illustrator CC
Découvrez comment créer des sites Web plus rapidement en laissant Illustrator CC générer pour vous du code CSS : pour le texte, les objets et même pour des mises en page complètes.
Rufus Deuchler

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.

    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 :

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