Dreamweaver CS6: Ajouter des ombres de texte avec CSS3 - des mannequins

Fait partie de Dreamweaver CS6 For Dummies Cheat Sheet

Dans Dreamweaver CS6, vous pouvez améliorer vos conceptions et donner plus de profondeur à vos pages en ajoutant des ombres de texte aux règles CSS3. dernière technologie Web. L'ajout d'ombres de texte facilite la lecture de vos mots, en particulier si votre arrière-plan est complexe ou si les couleurs de l'arrière-plan et du texte manquent de contraste.

crédit: Paul Gual, istockphoto. com

Dreamweaver CS6 prend en charge les ombres de texte CSS3 lorsque vous utilisez le volet Propriétés dans le panneau Styles CSS. Vous pouvez créer des styles de classe ou d'ID avec des ombres de texte et vous pouvez ajouter des ombres de texte aux éléments HTML existants en définissant un style de tag, tel que le style de titre 1 utilisé dans l'image.

Le code CSS3 qui crée cette ombre de texte est

h1 {texte-ombre: 2px 2px 3px # 000;}

Les nombres dans le code spécifient que l'ombre de texte doit s'étendre 2 pixels vers la droite et 2 pixels au-dessous du texte avec un flou de 3 pixels. De plus, l'ombre est créée avec la couleur noire, spécifiée par le code de couleur hexadécimal abrégé # 000.

Lorsque vous créez des règles pour les ombres de texte, vous pouvez spécifier jusqu'à quatre valeurs:

• Horizontal et vertical: Les deux premières valeurs numériques sont requises et spécifient les décalages horizontaux et verticaux - la distance l'ombre portée s'étend sous le texte (horizontal) et à droite du texte (vertical).

• Rayon de flou: La troisième valeur spécifie la quantité de flou dans l'ombre. Si vous n'incluez pas de rayon de flou, la valeur par défaut est 0, ce qui fait apparaître l'ombre 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 couleur hexadécimal ou d'un code couleur RGBa.

Vous pouvez ajouter une ombre de texte à l'aide du volet Propriétés en bas du panneau Styles CSS, comme indiqué dans l'image. Pour ce faire, procédez comme suit:

1. Cliquez sur le lien Ajouter une propriété dans la partie gauche du volet Propriétés des styles CSS.

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.

   Lorsque 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 texte-ombre.

   Une boîte apparaît.

4. Entrez les décalages X et Y, le rayon de flou et la couleur.