CSS3 enables you to easily apply several new graphics effects to HTML elements, making the user interface more appealing. Some of the new graphics effects include rounded corners, drop-shadows, transparency, and background gradients. You can even apply some of these properties, like shadows, to text.
CREATING ROUNDED CORNERS
You use the CSS3 border-radius property to create rounded corners around layout ele-ments, like headers, footers, sidebars, graphics boxes, and outlines around images. border-radius is a length, which is usually expressed in pixels or ems but can be a percentage.
The length is the radius of the circle that defines the “roundedness” of each box corner. The lower the number, the less rounded the corner. Some browsers have problems rendering the percentage properly, so use a pixel or em length whenever possible.
To create a box with a rounded border, the CSS code and markup might look like this:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Rounded Corners</title>
<div>A box with rounded corners</div>
</body>
</html>
The rounded box renders in a Web browser as shown in Figure 7-1.
Figure 7-1
A box with four rounded corners
You can also round a single corner of a box using the following properties:
• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius Figure 7-2 shows an example of each box.
Figure 7-2
Boxes with one rounded corner each
If you plan to use single rounded corners on several elements in an HTML document, you can save time by creating a separate class for each (top left, top right, bottom left, and bottom right). The syntax would look similar to the following:
.top-left-corner { border-top-left-radius:25px; }
The Microsoft “Hands-on: border-radius” Web page at http://ie.microsoft.com/testdrive/
Graphics/hands-on-css3/hands-on_border-radius.htm lets you see how changes made to the border-radius length affect a box’s corners.
TAKE NOTE
*
CREATING SHADOWS
CSS3 introduces the box-shadow property to create drop shadows around layout elements. A drop shadow is a visual effect in which an object is repeated behind and slightly below itself to create the illusion that the object floats over its background.
The CSS syntax for creating a shadow is:
box-shadow: h-shadow v-shadow blur spread color inset;
The h-shadow and v-shadow attributes indicate the horizontal and vertical position of the shadow in relation to the box. Both of these attributes are required. The h-shadow value defines the horizontal offset of the shadow. A positive value offsets the shadow to the right of the element, and a negative value to the left. The v-shadow value defines the vertical offset of the shadow. A positive value offsets the shadow from the bottom of the element, and a negative value from the top.
The remaining attributes are optional. The blur attribute, in pixels, indicates the amount of blur applied to the shadow. The spread attribute indicates the size of the shadow, color specifies the color of the drop shadow, and inset moves the shadow from the outside to the inside of the box.
Figure 7-3 shows an example of the rounded-corners box with a drop shadow. The shadow was created from these values, which specify the horizontal and vertical shadow position, the amount of blur, and the color of the shadow:
box-shadow: 10px 10px 5px #808080;
CERTIFICATION READY
A drop shadow applied to a box
CSS3 also provides the text-shadow property to apply shadowing to text. The attributes are the same as the box-shadow property, except that spread and inset are not included.
CREATE A BOX WITH ROUNDED CORNERS AND A SHADOW
GET READY. To create a box with rounded corners and a shadow, perform the following steps:
1. In an editing or app development tool, create an HTML document that includes the following content:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Rounded Corners</title>
<body>
<div>A box example</div>
</body>
</html>
2. Save the file as L7-box-exercise.html. View the file in a Web browser, which should look similar to Figure 7-4.
Figure 7-4
A box with rounded corners
3. To add a drop shadow, add the following line to the style element:
box-shadow: 5px 5px 5px #999;
4. Save the file and view the results in a Web browser. The box should resemble Figure 7-5.
Figure 7-5
A box with rounded corners and a drop shadow
5. Leave the file, editing tool, and Web browser open if you complete the next exercise during this session.
APPLYING TRANSPARENCY
An opaque item does not let light pass through, whereas you can see through a transparent item. Even though the terms are opposite, by reducing the opacity of an item or increasing its transparency, you eventually reach the same point.
Figure 7-6 shows the effect of transparency (or reduced opacity) on an image. The original image is on the left; the image with a 50% transparency applied is on the right.
Figure 7-6
Transparency applied to an image
Original With transparency Illustrations: © AVTG/iStockphoto
The syntax for applying a transparency to an image or other element is:
opacity: value
The value is a floating-point value between 0.0 (100% transparent) and 1.0 (100% opaque).
To apply a 45% transparency, for example, you would use the value 0.55 (1.0 – 0.45).
CERTIFICATION READY Which CSS property enables you to apply a transparency to an image or element?
3.4
ADD TRANSPARENCY TO A BOX
GET READY. To add transparency to a box, perform the following steps:
1. Open L7-box-exercise.html in an editing or app development tool, if it isn’t already open.
2. Add the following line to the style element:
opacity: 0.6;
3. Save the file as L7-tranparency-exercise.html and view the results in a Web browser.
The box should resemble Figure 7-7.
Figure 7-7
A rounded-corner box, with a drop shadow and 40%
transparency
CERTIFICATION READY Which CSS property enables you to add a background gradient to an HTML container?
3.4
Figure 7-8
A linear gradient from black (top) to white (bottom)
4. Leave the file, editing tool, and Web browser open if you complete the next exercise during this session.
APPLYING BACKGROUND GRADIENTS
A gradient is a smooth change of colors, either within the same hue, such as from dark green to light green, or starting with one color and ending with a different color, such as starting with blue and ending with yellow. Developers commonly use gradients for subtle shading within backgrounds, buttons, and more.
The different types, or methods, of CSS3 gradients are:
• linear-gradient: Creates a gradient from top to bottom or vice versa, or from corner to corner
• radial-gradient: Creates a gradient that radiates out from a central point
• repeating-linear-gradient: Creates a repeating linear gradient, which results in straight bands of gradient color
• repeating-radial-gradient: Creates a repeating radial gradient, which results in circular bands of gradient color
To apply a gradient to an HTML image, use the background property with one of the gradient methods listed above, along with the parameters specific to each method.
The possible values for the methods are listed on the W3C “CSS Image Values and Replaced Content Module Level 3” Web page at http://dev.w3.org/csswg/css3-images/
#repeating-gradients.
A linear gradient is a horizontal, vertical, or diagonal gradient. To create a linear gradient from black to white, use the following CSS code:
background: linear-gradient(black, white);
The default gradient goes from top to bottom. You can insert “top,” “bottom,” “right,” or
“left” as the first value to control the direction of the gradient. Figure 7-8 shows the black-to-white gradient that spans from top to bottom.
A diagonal gradient is a type of linear gradient that extends from one corner of a container diagonally to another corner. The code for a diagonal gradient that starts in the lower-left corner and extends to the upper-right corner of a container is:
background: linear-gradient(45deg, white, black);
CSS3 gradients also support color interpolation in the alpha color space, which is part of the red blue green alpha (RGBA) color model, to produce smoother color transitions in gradients.
(You’ve probably seen some gradients where you can readily see the transition from one shade to the next—they look like thin bands of color. Color interpolation in the alpha color space eliminates the “bandy” look.) You can specify multiple color stops, with an RGBA color and position for each one.
The following is an example of the use of rgba colors:
linear-gradient(to right, rgba(255,255,255,0)
Radial gradients start from a central point and radiate color out to the edges of a container.
The values for radials differ slightly from linear gradients. The general syntax for radial gradients is:
radial-gradient(position,size and shape,color stops);
Let’s look at an example of a radial gradient that begins with light blue (indicated by the hexidecimal code #99CCFF) at the center and changes to a darker blue (indicated by
#3D5266) at the edges. The code might look like the following, which renders in a browser as shown in Figure 7-9.
radial-gradient(50% 50%, 70% 70%, #99CCFF, #3D5266);
Figure 7-9 A radial gradient
The first set of percentages (50% 50%) defines the horizontal and vertical center values.
In this case, the gradient starts in the center of the element. The second set of percentages (70% 70%) specifies the size and shape of the gradient. Because a radial gradient resembles an ellipse, the percentages refer to radii. The hexadecimal codes in the example are the color stops; the first color stop is the starting point and the second color stop is the ending point.
You might see the background-image property in some sources; it works the same as the shorthand background property.
TAKE NOTE
*
APPLY A BACKGROUND GRADIENT TO A BOX
GET READY. To apply a background gradient to a box, perform the following steps:
1. Open L7-tranparency-exercise.html in an editing or app development tool, if it isn’t already open.
2. Add the following lines to the style element:
background: linear-gradient(black,white);
background: -ms-linear-gradient(black,white);
background: -moz-linear-gradient(black,white);
background: -o-linear-gradient(black,white);
background: -webkit-linear-gradient(black,white);
6. Close the file and the Web browsers but leave the editing tool open if you plan to complete the next exercise during this session.
Notice the use of vendor prefixes in this code. By including all of the major vendor pre-fixes, your HTML document is more likely to be rendered properly by the largest number of users. As a reminder from Lesson 5, however, including all four vendor prefixes in your code doesn’t guarantee the CSS3 feature will work within all of the browsers. A browser that doesn’t support a certain feature will not display the feature properly, even with a vendor prefix. Some browsers offer partial support for a feature, which can produce mixed results. During the transition to CSS3, you should test your code in all of the major browsers before using a certain feature in HTML/CSS documents that will be displayed to a wide audience.
TAKE NOTE
*
Figure 7-10
A box with a background gradient applied
✚
MORE INFORMATIONThe Microsoft “Explore new ideas in website design and layout” Web page at http://bit.ly/KtYr1W provides links to information on creating rounded corners, drop-shadows, and much more. The W3C “CSS Color Module Level 3” Web page at http://www.w3.org/TR/css3-color/ provides the specification for color properties and opacity. You can also visit the W3schools.com Web site and search for “CSS3” and the topic of your choice.
Web developers are beginning to use the Web Open Font Format (WOFF) as a way to enhance UIs with just about any font available or custom-created fonts. The flexibility to use any font is a big change from the pre-WOFF restrictions on font usage in HTML documents.