Dreamweaver CS6: ajouter des ombres de texte avec CSS3

Dans Dreamweaver CS6, vous pouvez améliorer vos créations et donner à vos pages plus grande profondeur en ajoutant des ombres de texte avec les règles CSS3, les dernières technologies web. Ajout d'ombres de texte rend vos mots plus faciles à lire, surtout si votre conception a un fond complexe ou si votre arrière-plan et couleurs de texte manquant de contraste.

Dreamweaver CS6: ajouter des ombres de texte avec CSS3

Dreamweaver CS6 inclut le support pour CSS3 ombres de texte lorsque vous utilisez le volet Propriétés dans le panneau Styles CSS. Vous pouvez créer des styles de classe ou ID avec des ombres de texte, et vous pouvez ajouter du texte à l'ombre des éléments HTML existants en définissant un style de tag, tels que le style utilisé dans la rubrique 1 de l'image.

Le code CSS3 qui crée ce texte est l'ombre

h1 {text-shadow: 2px 2px 3px # 000-}

Les chiffres du code précisent que l'ombre du texte devrait dépasser de 2 pixels vers la droite et de 2 pixels ci-dessous le texte avec un flou 3-pixel. En outre, l'ombre est créée avec la couleur noire, spécifiée par le code couleur hexadécimal abrégé # 000.




Lors de la création de règles pour les ombres de texte que vous pouvez spécifier jusqu'à quatre valeurs:

  • Horizontale et verticale: Les deux premières valeurs numériques sont nécessaires et précisent les décalages horizontaux et verticaux - la distance l'ombre portée étend ci-dessous le texte (horizontal) et à droite du texte (vertical).

  • Rayon Blur: La troisième valeur indique la quantité de flou dans l'ombre. Si vous ne pas inclure rayon flou, la valeur par défaut est 0, ce qui rend l'ombre apparaissent comme une couleur unie.

  • Couleur: La quatrième valeur spécifie la couleur de l'ombre et peut être définie à l'aide d'un code de couleur hexadécimal ou un code de couleur RGBA.

Vous pouvez ajouter une ombre de texte en utilisant le volet du logement au bas du panneau Styles CSS, comme indiqué dans l'image. Pour ce faire, suivez ces étapes:

  1. Cliquez sur le lien Ajouter de propriété dans la partie gauche du volet Styles CSS propriété.

  2. Entrez le nom de la règle de style CSS3, text-shadow, ou sélectionnez la règle de style dans la liste déroulante.

    Après le nom apparaît sur le côté gauche, une petite flèche apparaît sur la droite.

  3. Cliquez pour sélectionner la flèche à droite de text-shadow.

    Une boîte apparaît.

  4. Entrez le décalages x et y, rayon de flou, et la couleur.


» » » » Dreamweaver CS6: ajouter des ombres de texte avec CSS3