HTML and CSS Reference
In-Depth Information
for two key differences: There is no “spread” value allowed, and there is no option to add the
inset keyword for text-shadow .
With both text shadows and box shadows, you have the ability to use any kind of color value
for the color of the shadow. This is good to keep in mind, because a shadow can be used to
create a number of different effects—such as an outline, or even a glow.
If you'd like to fiddle around with shadow values, there are a number of tools online that let
you do this, including the CSS3 Text Shadow Generator and the CSS3 Generator.
Warning: Go Easy on Shadows
As is the case with anything, you always want to be careful not to overdo it
with special effects that are created in pure CSS. For example, features like
shadows, gradients, and rounded corners don't use images, so some deve-
lopers may feel that it's okay to add them to many elements.
Shadows in particular, however, have been demonstrated to cause web pages
to slow down considerably when the user is scrolling, or when the page is
loading, or even when some kind of animation is running.
Although you can put a shadow on every element on the page, and you also
have the option to layer multiple shadows on a single element, in many cases
this could be overkill and cause your page to become sluggish.
Summary
This chapter has helped us make the RecipeFinder website a little more visually enticing,
adding some color and depth. Along the way, we've learned about CSS backgrounds, com-
mon units and values, different ways to achieve transparency, and how to add shadows to
elements with pure CSS.
In the next chapter, we're going to cover a number of different text-related CSS features, in-
cluding styling links and using custom fonts.
[3] F or example, http://www.impressivewebs.com/css-opacity-reference/ .
 
 
Search WWH ::




Custom Search