Application goal: Make text special effects
Application software: Dreamweaver MX
Operation difficulty: ★★☆☆☆
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. deal with. Let's take a look at a few examples to see how to create special effects text in Dreamweaver.
Halo Word
first starts Dreamweaver, inserts a 1×1 table in a new document, sets the border to 0, and then enters 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 Create a new CSS style.
Click the New CSS style button, and the dialog box shown in Figure 1 will pop up.
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 the font, font size, 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 After setting the Glow filter
, we will 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 How about the effect of halo words
? It is 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.
There are two CSS filters forshadow words
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.
Themask word
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
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 to the entire table and corresponds to the label, while the CSS style is added to the cell and is the label. Don’t make a mistake.
To createdynamic
characters, 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
In fact, many filters in CSS can also be used to modify images, such as the Blur filter, which 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.