Dreamweaver Super skills of writing special effects _dreamweaver

Application goal: Make text effects

Application software: Dreamweaver MX
Operation Difficulty: ★★☆☆☆
Our common web-making tools Dreamweaver MX not only makes Web pages, but also uses CSS filters in which we can do simple effects on text or pictures. Let's take a few examples to see how to make special effects text in Dreamweaver.
Halo Word
Start Dreamweaver First, insert a 1x1 table in the new document, set the border to 0, and enter the text you want to decorate.
Click Design →css Style in the floating panel to the right to open the floating panel.
The four buttons in the lower-right corner of the panel are: Add, create, edit, and delete CSS styles.
Note: In the Dreamweaver, CSS filters can only be used for areas with restricted objects, such as tables, cells, pictures, and so on, but not directly to the text, so we need to put the added effects of the text in advance in the table, and then apply CSS style to the table, so that the text has special effects.
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7 this.alt= ' Click here to open new Window\nctrl+mouse Wheel to zoom in/out ';} ' border=0> Figure 1 New CSS style Click the new CSS Style button to eject the dialog box shown in Figure 1.
Type Item Select Create custom style, defined in the "Select the document Only", the point is OK after the pop-up CSS style Definition dialog box (Figure 2), in the type panel we can define the font, font size, color and so on, in this case we choose the font for the official script, size 50 pixels, the color is white.
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7 this.alt= ' Click here to open new Window\nctrl+mouse Wheel to zoom in/out ';} ' Border=0> Figure 2 defines a CSS style

To produce a text effect, the most important is in the expansion panel (such as Figure 3) in the settings, in the "visual effect" of the filter listed is all the CSS filters, select the Glow filter, it can make text produce edge glow effect. The syntax format of the Glow filter is: Glow (color=?, strength=?), which has two parameters: color determines the colour of the halo, can be used as a hexadecimal code such as FFFFFF, or in red, yellow and other words expressed; The strength represents the luminous intensity, ranging from 0 to 255. In this example, we set the color to red, the luminous intensity is 8, and then determine. screen.width*0.7) {this.resized=true; this.width=screen.width*0.7 this.alt= ' Click here to open new Window\nctrl+mouse Wheel to zoom in/out ';} ' Border=0> Figure 3 Set the Glow filter below we apply this CSS style to the table. Move the cursor to a cell, in the document window
Bottom left corner Click the tab to select the cell, and then click the new style that you just created in the CSS styles panel, when the label changes to indicate that CSS styles have been applied to the cell. We do not see changes in the document window, press the F12 key in IE preview, the effect is out (see Figure 4).
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7 this.alt= ' Click here to open new Window\nctrl+mouse Wheel to zoom in/out ';} ' Border=0> Figure 4 What's the effect of the halo word? No more than the filter effect in Photoshop. Put a few such special effects words on the Web page will make the page beautiful, and we can also use the Printscreen key to grasp the screen, and then paste in the paint program to save to make it a separate picture.
Shadow Word
There are two kinds of CSS filters that make text have shading effects, respectively Drowshadow and shadow, and they produce slightly different effects.
The process of making a shadow word is basically the same as making a flare word, as long as you select a filter in the CSS style.
The syntax for the Drowshadow filter is as follows: DropShadow (color=, offx=, offy=, positive=?).
where color represents the colour of the projection shadow, expressed in hexadecimal numbers, OFFX, Offy, respectively, representing the amount of the shadow deviating from the text position, in pixels ositive for a logical value, 1 for all opaque elements, and 0 for visible shadows for all transparent elements.
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7 this.alt= ' Click here to open new Window\nctrl+mouse Wheel to zoom in/out ';} ' Border=0> Figure 5 Shaded word effects such as setting the filter to DropShadow (color=6699cc, offx=2, offy=2, positive=1), produce the effect as shown in Figure 5.


Mask Word
CSS filters also provide us with the mask function, you can handle the text part of the mask, if the use of the appropriate picture in the background, you can produce beautiful hollow text effect.
In the document window, insert a 1x1 table, click the tab 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 (Figure 6), and then enter the text you want in the cell.
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7 this.alt= ' Click here to open new Window\nctrl+mouse Wheel to zoom in/out ';} ' Border=0> Figure 6 Next we add the mask filter to the cell, which is similar to the first two examples. Select Mask in the filter (color=?), this parameter determines the color of the mask, we choose to use 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.
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7 this.alt= ' Click here to open new Window\nctrl+mouse Wheel to zoom in/out ';} ' Border=0> Figure 7 After the mask word effect friends setting is complete, apply the CSS style to the cell, and then press the F12 key to see the effect (Figure 7).
Note: The background picture is added for the entire table, the corresponding label, and CSS style is added to the cell, is the label, do not make mistakes.
Mobile Word
We need to use the blur filter to create a blur effect, its grammatical format is blur (Add=, direction=, strength=?). The Add parameter is a Boolean value, in general, when the filter used for the picture of the time to take 0, used for text when the 1;direction represents the fuzzy direction, unit is the angle; Strength represents a blur move value in pixels. For example, we define blur (Add=1, direction=90, strength=150), and in the preview you can see the effect shown in Figure 8.
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7 this.alt= ' Click here to open new Window\nctrl+mouse Wheel to zoom in/out ';} ' Border=0> Figure 8 Mobile word effect friends in fact, many of the CSS filters can also be used for image modification, such as blur filter can make the picture produce blur effect. If we can use these filters skillfully, sometimes without professional image processing software, we can produce quite good picture effects.