Make text effects with Dreamweaver mx (PHOTOS)

Source: Internet
Author: User
Tags filter format define insert key dreamweaver
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.

Figure 7 Matte Effect

  

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.



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.