Create text effects with Dreamweaver MX

Author：Eve Cole Update Time：2009-05-31 21:03:30

Our commonly used web page creation tool Dreamweaver MX can not only create web pages, but also use the CSS filters to perform simple special effects on text or pictures. Let's take a look at a few examples to see how to create special effects text in Dreamweaver.

halo word

First start Dreamweaver, insert a 1×1 table in a new document, set the border to 0, and then enter the text that needs to be modified.

Click "Design→CSS Style" in the floating panel on the right to open this floating panel.

The four buttons in the lower right corner of the panel are: add, create, edit, and delete CSS styles.

Note: In Dreamweaver, CSS filters can only be used on objects with area restrictions, such as tables, cells, pictures, etc., but cannot be used directly on text, so we need to put the text that needs to be added with special effects in the table in advance. , and then apply CSS styles to the table to create special effects on the text.

Figure 1 New CSS style

Click the New CSS Style button to bring up the dialog box shown in Figure 1.

Select "Create custom style" for the "Type" item, select "Only for this document" for "Defined in", and click OK to pop up the CSS style definition dialog box (Figure 2). In the type panel, we can define fonts, font sizes, Color and other content, in this example we choose the font to be official script, the size to be 50 pixels, and the color to be white.

Figure 2 To define CSS styles

to produce text effects, the most important thing is the settings in the extension panel (Figure 3). All CSS filters are listed in the filter under "Visual Effects". Select the Glow filter. , which can make the text have a glowing edge effect. The syntax format of the Glow filter is: Glow(Color=?, Strength=?), which has two parameters: Color determines the color of the halo. You can use hexadecimal codes such as ffffff, or words such as Red and Yellow. Represents; Strength represents the luminous intensity, ranging from 0 to 255. In this example we set the color to Red, the luminous intensity to 8, and then OK.

Figure 3 Set up the Glow filter

Next we apply this CSS style to the table. Move the cursor to the cell, click the label in the lower left corner of the document window to select the cell, and then click the newly created style in the CSS style panel. At this time, the label changes to indicate that the CSS style has been applied to the cell. We can't see the change in the document window. Press the F12 key to preview in IE, and the effect will appear (Figure 4).

Figure 4 Halo word effect

How about it? It's not inferior to the filter effect in Photoshop. Putting a few of these special effects words on a webpage will make the webpage much more beautiful, and we can also use the PrintScreen key to capture the screen, and then paste and save it in the drawing program to make it a separate picture.

shadow word

There are two CSS filters that can produce shadow effects on text, namely Drowshadow and Shadow. The effects they produce are slightly different.

The steps for making shadow words are basically the same as making halo words. You just need to reselect a filter in the CSS style.
The syntax of the Drowshadow filter is as follows: DropShadow(Color=?, OffX=?, OffY=?, Positive=?).

Among them, Color represents the color of the shadow, expressed as a hexadecimal number; OffX and OffY respectively represent the amount of shadow deviation from the text position, in pixels; Positive is a logical value, 1 represents the creation of shadows for all opaque elements, 0 Represents the creation of visible shadows for all transparent elements.

Figure 5 Shadow word effect

For example, if the filter is set to DropShadow(Color=6699cc, OffX=2, OffY=2, Positive=1), the effect will be as shown in Figure 5.

Mask words

The CSS filter also provides us with a mask function, which can process the text part into a mask. If a suitable picture is used in the background, a beautiful hollow text effect can be produced.

Insert a 1×1 table into the document window, click the label in the lower left corner of the document window to select the entire table, select a suitable picture in the background image of the property inspector (as shown in Figure 6), and then enter the required text.

Figure 6 Insert a background image into the table

Next we add a Mask filter to the cell, the steps are similar to the previous two examples. Select Mask (Color=?) in the filter. This parameter determines the color of the mask. We choose white.

Note: The color selection of the text in this example is not important, because the text will be hollowed out in the final effect and the color will not be displayed.

Figure 7 After the mask word effect

is set, apply this CSS style to the cell, and then press the F12 key to see the effect (Figure 7).

Note: The background image is added for the entire table, corresponding to the <table> tag, while the CSS style is added to the cell, which is the <td> tag. Don’t make a mistake.

Dynamic words

To create dynamic words, we need to use the Blur filter, which is used to produce a blur effect. Its syntax format is Blur(Add=?, Direction=?, Strength=?). The Add parameter is a Boolean value. Generally speaking, when the filter is used for pictures, it takes 0, and when it is used for text, it takes 1; Direction represents the blur direction, and the unit is an angle; Strength represents the blur movement value, and the unit is pixels. For example, if we define Blur(Add=1, Direction=90, Strength=150), you can see the effect as shown in Figure 8 in the preview.

Figure 8 Dynamic word effect friends

In fact, many filters in CSS can also be used to modify images. For example, the Blur filter can produce a blur effect on images. If we can apply these filters skillfully, we can sometimes create pretty good picture effects without professional image processing software.