HTML and CSS Reference
In-Depth Information
This section is not just about re-creating the effects of the
border-radius
property, but it also demonstrates the use of many of the background
properties that are used earlier in the chapter.
Required Visual Elements vs. Optional
Embellishments
It can be hard to find a strategy for building a site that balances the
ease of applying CSS3 effects with the need to make a site look the
“same” across web browsers.
If you have the flexibility, break visual element into two groups—
those that are important for conveying a site's branding, aesthetic,
or emotion, and those that would only reinforce that aesthetic. Then
pick your solution accordingly. Rounded corners on sidebars, headers,
callouts, and featured elements may be important enough to make
it necessary to have them work in the largest number of browsers.
Buttons, form elements, thumbnail images, and other content may
fall into that other bucket where it would be “nice” to have rounded
corners, but if they were squared off, it would be OK, too.
The same goes for other effects such as box shadows or color gradi-
ents (Chapter 14), which can be mimicked using background images.
Using a Background Image
With all these great new CSS3 properties being supported, it is easy to
over-think and over-engineer solutions to design problems. Particularly
when the design requires background images to already be used (so
there's no additional bandwidth or maintenance hit), then it may just
make sense to create the rounded corner right in the graphic already
being used, as in
Figure 8.8
.
