- Dreamweaver CS5.5 Rises to the Challenge
- Creating Visual Effects Without Images
- Gearing Up for Mobile
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Creating Visual Effects Without Images
Rounded corners, drop shadows, and text shadows are among the most commonly used visual effects in web design, but creating them has always involved images and convoluted markup. Now, thanks to the CSS3 border-radius, box-shadow, and text-shadow properties, you can add these effects without images. Dreamweaver CS5.5 makes adding and adjusting the effects a snap. When you select one of these properties in the CSS Styles panel, it pops up a simple panel where you can set the values while watching the changes reflected dynamically in Live view (see Figure 1).
)
Figure 1 Get the precise effect you want by using Live view to add rounded corners.
A really cool effect that you can create with border-radius is to turn a square into a circle. Create a <div> or other element that has the same width and height. Then apply the border-radius property to the element's style rule, setting the radius to half the square's width (or height). Figure 2 shows a 130-pixel square that has been converted into a circle by setting the value of border-radius to 65 pixels.
)
Figure 2 Moving from square to circle with a simple CSS property.
Dreamweaver's Related Files Toolbar makes it easy to dig directly into the style sheet while seeing the effect of your changes in Live view. After converting a square to a circle, why not add a further flourish by rotating the content of the circle with the CSS3 transform property and rotate() function? As Figure 3 shows, you currently need to use most CSS3 properties with vendor-specific prefixes (such as -moz- for Firefox and -webkit- for Safari and Chrome), but Dreamweaver CS5.5's code hints speed up the process.
){kind=small}
Figure 3 Dreamweaver's Live view and code hints support CSS3 properties such as transform.
Although you need to hand-code the transform property, Dreamweaver streamlines the addition of drop shadows and text shadows with a mini-panel similar to the one used for creating rounded corners. When adding drop shadows or text shadows, specify the color first, so you can see the extent of the shadow and adjust its blur radius. I find that translucent colors create effective shadows. Dreamweaver CS5.5's color picker now supports the RGBa (red, green, blue, alpha) and HSLa (hue, saturation, lightness, alpha) color formats, as shown in Figure 4.
)
Figure 4 Dreamweaver CS5.5's color picker supports the full range of CSS3 color formats.
These new color formats consist of four comma-separated values. The first three values represent the color expressed as red, green, and blue (rgb) or hue, saturation, and lightness (hsl). The final value is a decimal number between 0 (fully transparent) and 1 (fully opaque), representing the alpha transparency of the color. By default, Dreamweaver sets the alpha value of RGBa and HSLa to 1.0. Once you change the alpha value manually, Dreamweaver preserves the setting, so you can experiment with different colors. I find the best setting for a drop shadow to be rgba(0,0,0,0.3), which is black with 30% alpha transparency.
Using RGBa or HSLa for the background color of a text element also produces a nice translucent effect, allowing the background of a parent element to show through. However, don't confuse the RGBa and HSLa color formats with the CSS3 opacity property. With this property, you control the degree of transparency in the same way, by setting a decimal number between 0 and 1. In spite of the similarity in settings, the resulting effect is different, because the opacity property affects everything inside the element to which it is applied. Figure 5 demonstrates the difference.
)
Figure 5 Using the CSS3 opacity property can have undesired effects.
In both screenshots in Figure 5, 80% transparency has been applied to the <div> with the white background. The version on the left uses the opacity property, resulting in the main background image showing through everything, and the text is slightly faded. The version on the right specifies a background color using the RGBa color format. The text retains its original sharpness, and the background image doesn't show through the smaller, square foreground image.