Consultez cette rubrique pour apprendre à utiliser le panneau CSS Designer pour appliquer et modifier des dégradés de l’arrière-plan de votre page web.

Le panneau CSS Designer vous permet d’appliquer des dégradés à l’arrière-plan de vos sites web. La propriété de dégradé est disponible dans la catégorie d’arrière-plan.

Propriété de dégradé
Propriété de dégradé

Cliquez sur à côté de la propriété de dégradé afin d’ouvrir le panneau dégradés. Ce panneau vous permet :

  • De choisir les couleurs dans différents modèles colorimétriques (RVBa, hexadécimale ou HSLA). Ensuite, d’enregistrer différentes combinaisons de couleurs sous la forme de nuances de couleur.
    • Pour rétablir la couleur d’origine d’une nouvelle couleur, cliquez sur la couleur d’origine (K).
    • Pour modifier l’ordre des nuances, faites glisser chaque nuance vers la position souhaitée.
    • Pour supprimer une nuance de couleur, faites glisser la nuance hors du panneau.
  • D’utiliser des taquets de couleurs pour créer des dégradés complexes. Cliquez n’importe où entre les taquets de couleur par défaut pour créer un taquet de couleur. Pour supprimer un taquet de couleur, faites-le glisser hors du panneau.
  • De spécifier l’angle d’un dégradé linéaire.
  • Pour répéter le motif, modifiez la propriété background-repeat.
  • D’enregistrer des dégradés personnalisés sous forme de nuances.

Examinons le code suivant :

background-image: linear-gradient(57deg,rgba(255,255,255,1.00) 0%,rgba(21,8,8,1.00) 46.63%,rgba(255,0,0,1.00) 100%)
  • 57deg : indique l’angle du dégradé linéaire
  • rgba(255, 255, 255, 1.00) : couleur du premier taquet de couleur
  • 0% : indique le taquet de couleur

Remarque :

Dreamweaver ne prend en charge que les valeurs « % » pour les taquets de couleur. Si vous utilisez d’autres valeurs, comme px ou em, Dreamweaver les lit comme « zéro ». En outre, Dreamweaver ne prend pas en charge les couleurs CSS. Si vous spécifiez ces couleurs dans le code, elles sont lues comme « zéro ».

Rendu de dégradés dans les navigateurs web

Si vous utilisez les dégradés comme arrière-plan, vous pouvez configurer Dreamweaver de façon à rendre correctement les dégradés dans différents navigateurs web. Dreamweaver ajoute les préfixes fournisseur appropriés au code, de façon à permettre aux navigateurs web d’afficher les dégradés de façon adéquate.

Dreamweaver peut écrire les préfixes fournisseur suivants avec le format w3c :

  • Webkit
  • Firefox
  • Opera

Par défaut, Dreamweaver écrit les préfixes fournisseur pour Webkit et le mode En direct de Dreamweaver. Vous pouvez choisir les autres fournisseurs désirés dans la boîte de dialogue Préférences (Préférences > Styles CSS).

Remarque :

pour les ombres de zone, les préfixes Webkit et w3c sont toujours générés, que vous les ayez ou non sélectionnés dans la section Préférences.

Les modifications apportées aux dégradés sont également répercutées dans les syntaxes spécifiques aux fournisseurs. Si vous ouvrez un fichier existant qui contient des syntaxes spécifiques à un fournisseur sous Dreamweaver CC, veillez à choisir le préfixe fournisseur requis dans les Préférences. En effet, par défaut, Dreamweaver ne met à jour le code lié à Webkit et à le mode En direct de Dreamweaver que lorsque vous utilisez ou modifiez des dégradés. Par conséquent, les autres syntaxes spécifiques à un fournisseur dans votre code ne sont pas mises à jour.

Permutation d’images et de dégradés d’arrière-plan

Vous pouvez modifier en un seul clic l’ordre (d’apparition dans le code) des images et des dégradés d’arrière-plan.

Cliquez sur la flèche en regard de la propriété url ou gradient dans CSS Designer.

Remarque :

Dreamweaver CC contient une mise en œuvre de base de la fonction de permutation d’arrière-plan. Lorsque vous utilisez plusieurs valeurs ou images, il se peut que la permutation ne fonctionne pas comme prévu. En outre, supposons que vous ayez appliqué une image, une deuxième image, puis un dégradé à l’arrière-plan. La permutation du dégradé produit l’ordre suivant : dégradé, deuxième image, première image.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne