Dreamweaver Super Tips Effets de texte

Objectif de l'application : Créer des effets spéciaux de texte

Logiciel d'application : Dreamweaver MX

Difficulté de fonctionnement : ★★☆☆☆

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 de simples effets spéciaux sur du texte ou photos. Jetons un coup d'œil à quelques exemples pour voir comment créer du texte avec effets spéciaux dans Dreamweaver.

Halo Word

démarre d'abord Dreamweaver, insère un tableau 1 × 1 dans un nouveau document, définit la bordure sur 0, puis saisit le texte qui doit être modifié.

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 Créez un nouveau style CSS

Cliquez sur le bouton Nouveau style CSS et la boîte de dialogue illustrée dans la figure 1 apparaîtra.

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 la police, la taille de la 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 Après avoir défini le filtre Glow

, nous appliquerons 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

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 Qu'en est-il de l'effet des mots halo

? Il 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.

les mots fantômes

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 indiqué dans la figure 5.

de mot de masque

nous fournit également une fonction de masque, qui peut transformer la partie de 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

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 à l'ensemble du tableau et correspond à l'étiquette, tandis que le style CSS est ajouté à la cellule et constitue l'étiquette. Ne vous trompez pas.

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 Effet de mot dynamique

En fait, de nombreux filtres en CSS peuvent également être utilisés pour modifier les images, comme le filtre Flou, qui 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.