Dreamweaver application goal: Make text effects
Application software: Dreamweaver MX
Operation Difficulty:
Our common web-making tools Dreamweavermx not only make Web pages, but also use 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.
|
| Figure 1 Creating a 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.
|
Figure 2 Defining 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; strength indicates luminous intensity , ranging from 0 to 255. In this example, we set the color to red, the luminous intensity is 8, and then determine.
|
| Figure 3 Setting the Glow filter |
Below we apply this CSS style to the table. Move the cursor to the cell, click the tab in the lower left corner of the document window, select the cell, and then click the new style that you just created in the CSS styles panel, and the label changes to indicate that the CSS style has 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).
|
| Figure 4 Halo Word effect |
What do you think? 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 represent the amount of shadow deviating from the text position, in pixels, positive for a logical value, 1 for all opaque elements, and 0 for all transparent elements.
|
| Figure 5 Shadow Word effects |
For example, the filter is set to DropShadow (color=6699cc, offx=2,offy=2,positive=1), resulting in the effect 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.
|
Figure 6 Insert a background picture in a table
|
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.
When the settings are 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, do not make mistakes.
Mobile Word
The production of mobile word we want to use the blur filter, the effect is to produce fuzzy effect, its syntax format for 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 the blur move value, in pixels. For example, we define blur (add=1,direction=90,strength=150), and in the preview we can see the effect shown in Figure 8.
|
| Figure 8 Dynamic Word effect |
In fact, many of the filters in the CSS can also be used to decorate the image, such as blur filter can make the picture has a blur effect. If we can use these filters skillfully, sometimes without professional image processing software, we can produce quite good picture effects. |
