CSS has been described as “the new PhotoShop”, due to the fact that an increasing number of visual effects that were previously the sole domain of bitmap editors are now achievable directly in stylesheets. Creating gradients and shadows in CSS reduces file size, improves rendering speed, and makes page content far easier to change and edit, and are now a vital part of every web designer’s arsenal.
Goals: Use shadows and gradients appropriately on web page elements.
Prerequisite: Introduction to CSS
Total practice time: 2 hours
Core Material
Box Shadow
“Lifted” Box Shadow
drop-shadow filter
Cross-browser drop-shadow filter
Basic Linear Gradients
Basic Circular Gradients
When You’re Done
Much more can be achieved with both shadows and gradients: shadows can be animated to create the effect of a developing Polaroid picture, or used to create simple image vignettes.
Photograph by Isaac Sloan, used with permission
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
