Comment ajouter des ombres portées et des ombres portées dans Dreamweaver - Des tétines

Vous pouvez améliorer vos conceptions dans Dreamweaver et donner plus de profondeur à vos pages en ajoutant des ombres portées aux images, tags et autres éléments. L'ajout d'ombres de texte facilite la lecture de vos mots, en particulier si votre dessin présente un arrière-plan complexe ou si les couleurs de premier plan et d'arrière-plan manquent de contraste.

Crédit: Photo par iStockphoto. com

Dreamweaver CC offre une meilleure prise en charge et une meilleure intégration des ombres portées CSS3 et des ombres de texte à partir du nouveau panneau CSS Designer.

Vous pouvez créer des styles de classe ou d'ID avec des ombres de texte et ajouter des ombres de texte aux éléments HTML existants en définissant un style de tag, tel que le style de titre 1 vu ici. Le code CSS3 qui crée cette ombre de texte est

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

Les nombres dans le code spécifient que l'ombre de texte doit s'étendre de 2 pixels vers la droite et de 2 pixels texte avec un flou de 2 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.

Lors de la création de 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 obligatoires et décalages verticaux - distance à laquelle l'ombre portée s'étend sous le texte (vertical ) et à droite du texte (horizontal).

• 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 de couleur hexadécimal ou d'un code de couleur RGBa.

Le choix d'une couleur RGBa pour l'option Couleur vous permet de mieux contrôler l'apparence de l'ombre car vous pouvez ajouter de la transparence.

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

1. Faites défiler jusqu'à la section Text-Shadow du panneau Propriétés du Concepteur CSS.

2. Entrez la taille de l'ombre que vous souhaitez afficher en utilisant les champs H-ombre (horizontal) et V-ombre (vertical).

3. Ajoutez la quantité de flou que vous souhaitez pour votre ombre de texte en entrant une taille dans le champ Flou.

4. Cliquez bien sur la couleur et sélectionnez la couleur que vous souhaitez utiliser dans l'ombre du texte.