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.
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). Enregistrez ensuite différentes combinaisons de couleurs comme nuances.
- 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 les nuances vers la position souhaitée.
- Pour supprimer une nuance, 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 point coloré, faites glisser le point coloré 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 la 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 pour le premier taquet de couleur
- 0% : Indique le taquet de couleur
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 de 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 de 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).
Pour l'ombre Box, les préfixes Webkit et w3c sont toujours générés, que vous les ayez sélectionnés dans les Préférences ou non.
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 contenant des syntaxes spécifiques aux fournisseurs dans Dreamweaver, assurez-vous de choisir les préfixes de 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 située à côté de l'URL ou de la propriété Dégradé dans CSS Designer.
Dreamweaver contient une implémentation de base de la fonctionnalité d'échange 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.
Créez de magnifiques sites web dans Dreamweaver
Concevez, codez et gérez des sites web dynamiques dans un puissant outil tout-en-un.
