Créez des effets de texte avec Dreamweaver MX

Auteur：Eve Cole Date de mise à jour：2009-05-31 21:03:30

Notre outil de création de pages Web couramment utilisé, Dreamweaver MX, peut non seulement créer des pages Web, mais également utiliser les filtres CSS pour effectuer des effets spéciaux simples sur du texte ou des images. Jetons un coup d'œil à quelques exemples pour voir comment créer du texte avec effets spéciaux dans Dreamweaver.

mot halo

Démarrez d’abord Dreamweaver, insérez un tableau 1 × 1 dans un nouveau document, définissez la bordure sur 0, puis saisissez le texte à modifier.

Cliquez sur "Conception → Style CSS" dans le panneau flottant à droite pour ouvrir ce panneau flottant.

Les quatre boutons dans le coin inférieur droit du panneau sont : ajouter, créer, modifier et supprimer des styles CSS.

Remarque : Dans Dreamweaver, les filtres CSS ne peuvent être utilisés que sur des objets soumis à des restrictions de zone, tels que des tableaux, des cellules, des images, etc., mais ne peuvent pas être utilisés directement sur du texte. Nous devons donc placer le texte à ajouter avec des paramètres spéciaux. effets dans le tableau à l'avance, puis appliquez des styles CSS au tableau pour créer des effets spéciaux sur le texte.

Figure 1 Nouveau style CSS

Cliquez sur le bouton Nouveau style CSS pour afficher la boîte de dialogue illustrée à la figure 1.

Sélectionnez "Créer un style personnalisé" pour l'élément "Type", sélectionnez "Uniquement pour ce document" pour "Défini dans" et cliquez sur OK pour faire apparaître la boîte de dialogue de définition du style CSS (Figure 2). définissons les polices, les tailles de police, la couleur et tout autre contenu. Dans cet exemple, nous choisissons la police comme script officiel, la taille comme étant de 50 pixels et la couleur comme étant blanche.

Figure 2 Pour définir les styles CSS

afin de produire des effets de texte, le plus important est les paramètres du panneau d'extension (Figure 3). Tous les filtres CSS sont répertoriés dans le filtre sous "Effets visuels". le texte a un effet de bord brillant. Le format de syntaxe du filtre Glow est : Glow(Color=?, Strength=?), qui a deux paramètres : Color détermine la couleur du halo Vous pouvez utiliser des codes hexadécimaux tels que ffffff, ou des mots tels que Rouge et Jaune. Représente ; La force représente l’intensité lumineuse, allant de 0 à 255. Dans cet exemple, nous définissons la couleur sur Rouge, l'intensité lumineuse sur 8, puis OK.

Figure 3 Configurer le filtre Glow

Ensuite, nous appliquons ce style CSS au tableau. Déplacez le curseur sur la cellule, cliquez sur l'étiquette dans le coin inférieur gauche de la fenêtre du document pour sélectionner la cellule, puis cliquez sur le style nouvellement créé dans le panneau de style CSS. À ce stade, l'étiquette change pour indiquer qu'il s'agit du style CSS. a été appliqué à la cellule. Nous ne pouvons pas voir le changement dans la fenêtre du document. Appuyez sur la touche F12 pour prévisualiser dans IE et l'effet apparaîtra (Figure 4).

Figure 4 Effet de mot Halo

Et ça ? Ce n'est pas inférieur à l'effet de filtre dans Photoshop. Mettre quelques-uns de ces mots d'effets spéciaux sur une page Web rendra la page Web beaucoup plus belle, et nous pouvons également utiliser la touche PrintScreen pour capturer l'écran, puis le coller et l'enregistrer dans le programme de dessin pour en faire une image distincte.

mot de l'ombre

Il existe deux filtres CSS qui peuvent produire des effets d'ombre sur le texte, à savoir Drowshadow et Shadow. Les effets qu'ils produisent sont légèrement différents.

Les étapes pour créer des mots fantômes sont fondamentalement les mêmes que pour créer des mots halo. Il vous suffit de resélectionner un filtre dans le style CSS.
La syntaxe du filtre Drowshadow est la suivante : DropShadow(Color=?, OffX=?, OffY=?, Positive=?).

Parmi eux, Color représente la couleur de l'ombre, exprimée sous forme de nombre hexadécimal ; OffX et OffY représentent respectivement la quantité d'écart de l'ombre par rapport à la position du texte, en pixels ; Positive est une valeur logique, 1 représente la création d'ombres pour tous les opaques ; elements, 0 Représente la création d'ombres visibles pour tous les éléments transparents.

Figure 5 Effet de mot fantôme

Par exemple, si le filtre est défini sur DropShadow(Color=6699cc, OffX=2, OffY=2, Positive=1), l'effet sera celui illustré à la figure 5.

Masquer les mots

Le filtre CSS nous fournit également une fonction de masque, qui peut transformer la partie du texte en masque. Si une image appropriée est utilisée en arrière-plan, un bel effet de texte creux peut être produit.

Insérez un tableau 1 × 1 dans la fenêtre du document, cliquez sur l'étiquette dans le coin inférieur gauche de la fenêtre du document pour sélectionner le tableau entier, sélectionnez une image appropriée dans l'image d'arrière-plan de l'inspecteur des propriétés (comme le montre la figure 6), et puis entrez le texte requis.

Figure 6 Insérer une image d'arrière-plan dans le tableau

Ensuite, nous ajoutons un filtre Masque à la cellule, les étapes sont similaires aux deux exemples précédents. Sélectionnez Masque (Couleur =?) dans le filtre. Ce paramètre détermine la couleur du masque. Nous choisissons le blanc.

Remarque : La sélection de la couleur du texte dans cet exemple n'est pas importante, car le texte sera évidé dans l'effet final et la couleur ne sera pas affichée.

Figure 7 Une fois l'effet de mot de masque

défini, appliquez ce style CSS à la cellule, puis appuyez sur la touche F12 pour voir l'effet (Figure 7).

Remarque : L'image d'arrière-plan est ajoutée pour l'ensemble du tableau, correspondant à la balise <table>, tandis que le style CSS est ajouté à la cellule, qui est la balise <td>.

Mots dynamiques

Pour créer des mots dynamiques, nous devons utiliser le filtre Blur, qui permet de produire un effet de flou. Son format de syntaxe est Blur(Add=?, Direction=?, Strength=?). Le paramètre Ajouter est une valeur booléenne. De manière générale, lorsque le filtre est utilisé pour des images, il prend 0, et lorsqu'il est utilisé pour du texte, il prend 1 ; la direction représente la direction du flou et l'unité est un angle ; la valeur du mouvement du flou et l'unité est le pixel. Par exemple, si nous définissons Blur(Add=1, Direction=90, Strength=150), vous pouvez voir l'effet comme le montre la figure 8 dans l'aperçu.

Figure 8 Amis à effet de mot dynamique

En fait, de nombreux filtres en CSS peuvent également être utilisés pour modifier les images. Par exemple, le filtre Flou peut produire un effet de flou sur les images. Si nous pouvons appliquer ces filtres habilement, nous pouvons parfois créer de très bons effets d’image sans logiciel de traitement d’image professionnel.