HTML and CSS Reference
In-Depth Information
Written Communication: How to Use Visual Effects
The CSS3 styles can add striking visual effects to your Web site; but as you've seen, many
of them are not completely supported by all browsers. Even if a current browser version
supports those styles, there is no guarantee that your users will be running up-to-date
browsers. This leaves you with the dilemma of when and how to use these styles. Here are
some tips to keep in mind when applying visual effects to your Web site:
• Because not every user will be able to see a particular visual effect, design your page so
that it is still readable to users with or without the visual effect.
• Be aware that some visual effects that flicker or produce strobe-like effects can cause
discomfort and even photo-epileptic seizures in susceptible individuals. Avoid clashing
color combinations and optical illusions that can cause these conditions.
• If you need to create a cross-browser solution, use the Internet Explorer filters and
WebKit style functions to support older versions of Internet Explorer, Chrome, and Safari.
• Consider using graphic images to create your visual effects. For example, rather than
using the CSS3 gradient functions, create a background image file containing the gradi-
ent effect of your choice.
No matter how you employ visual effects on your Web site, remember that the most
important part of your site is its content. Do not let visual effects distract from your content
and message.
Kevin appreciates the drop shadow, rotated photos, and background gradients you've
added to his Web page. He thinks they give the document visual appeal. He has a few
more visual effects he wants you to add, and he wants you to create a style sheet for the
printed version of his page. You'll accomplish these tasks in the next session.
