How to Create a Drop Shadow in Dreamweaver
A drop shadow makes a 2-D object appear 3-D by placing shading behind it. The shading simulates a light source, making the object appear to stand off the page in 3-D space. Before HTML5, the latest Web markup language version, and CSS3, the latest cascading style sheet version, designers had to create simple drop shadows in graphics editors, such as Photoshop, and then import them into Dreamweaver. CSS is a page element formatting language commonly used in Web page design. The new HTML5 and CSS3 standards allow you to create drop shadows with code, which saves time and helps keep your Web pages' overall file sizes smaller.
Other People Are Reading
Instructions
-
-
1
Create a new HTML5 document in Dreamweaver. Click the "File" menu and choose "New." This displays the New Document dialog box. Choose "HTML" from the Page Type list, and then choose "None" from the Layout list. Click the "DocType" drop-down menu and choose "HTML 5," and then click "Create."
-
2
Click the "Window" menu and choose "CSS Style" to display the CSS Style panel.
-
-
3
Click the "Add New Rule" button in the lower-right corner of the CSS Style panel. This opens the New CSS Rule dialog box.
-
4
Type ".h1" in the "Selector Name" field and then click "OK." You can name the selector anything you want. With this selector, all text that you tag with <h1> will format according to this CSS rule. This opens the CSS Rule Definition for .h1 dialog box.
-
5
Select "Type" in the Category list to display options for formatting text. Use these options to set the properties, such as font family, font weight, font size and font color for this CSS rule.
-
6
Click "OK." Dreamweaver creates a new CSS rule named ".h1" and displays it and its properties in the CSS Styles panel.
-
7
Click "Add Property" in the CSS Style panel, and then type "text-shadow" in the Add Property field. This property creates a text drop shadow. To create a drop shadow on the CSS box or container, use "box-shadow."
-
8
Click the field to the right of your new CSS rule. This displays a dialog box for setting the properties of your drop shadow, such as X -- Offset, Y -- Offset, Blur Radius and Color. These options control the darkness and sharpness of your drop shadow. A typical text drop shadow might use the following settings:
X-- Offset = "2" pixels
Y-- Offset = "2" pixels
Blur Radius = "5" pixels
Color = gray, or "#333"
You can use whatever settings you want to customize your drop shadow. These settings create a nice, understated drop shadow that looks good with text.
-
9
Click in the Web page where you want to insert text with a drop shadow, and then click the "Targeted Rule" drop-down menu in the Properties panel and choose ".h1."
-
10
Type the text. Dreamweaver can't display the drop shadow in Design view. Click the "Live View" button beneath the menu bar to see the drop shadow.
-
1
Tips & Warnings
Drop shadows can make small text, such as body copy, difficult to read. You should use it for display text, such as headings and decorative text.
Not all Web browsers support all HTML5 and CSS3 properties, especially some mobile Web browsers. You can make sure a wider range of browsers can see your drop shadows by using browser extensions. For example, to create a drop shadow for WebKit browsers, which many mobile browsers support, you would write your drop shadow property as follows:
-webkit-text-shadow: 2px 2px 5px #333;
Most popular browsers support extensions. Here is a list of the most popular browsers and their extensions:
Microsoft Internet Explorer = -ms
Mozilla browsers = -moz
Opera and Opera Mobile = -o
WebKit browsers = -webkit
Note that Google Chrome and Firefox are Mozilla browsers and Apple Safari is a WebKit browser.
References
Resources
- Photo Credit Jupiterimages/Brand X Pictures/Getty Images
