Home arrow Style Sheets arrow Using a CSS Shading Effect to Decorate Images

Using a CSS Shading Effect to Decorate Images

In this second part of a three-part series, I implement a simple CSS approach that enhances the appearance of a given image by assigning to it an additional background graphic. The purpose in this case is to add a soft shadow to the targeted image. It's quite possible, however, to use the same technique to achieve more creative results.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 12
January 08, 2010
  1. · Using a CSS Shading Effect to Decorate Images
  2. · Review: adding borders and padding to a sample HTML image
  3. · Creating a simple shadow effect
  4. · Putting it together in a basic web page

print this article

Using a CSS Shading Effect to Decorate Images
(Page 1 of 4 )

Providing images on a web page with an appealing appearance can be a challenging, even frustrating experience. This is because of their intrinsic nature: after all, images need to be displayed in a great variety of contexts that range from mere decorative purposes to using them with a real semantic meaning within the structural markup of the page.

This rather ambiguous scenario makes styling images a process that must be constantly balanced between two well-differentiated endpoints: the first one is a a plain situation where images are reduced to their most minimalist expression, while the second one overloads the same images are overloaded with visual and heavy effects that are completely pointless.

Of course, deciding which path to travel depends on several factors, such as the kind of audience to which the images will be targeted, or in what environment the images will be shown. Regardless of this dilemma, the concrete implementation of decorative techniques on bitmapped graphics can be reduced to two general categories: first, images that are styled using pure CSS elements, including borders, padding and background colors; and second, images that are decorated utilizing other images, which can lead to quite impressive results at the expense of triggering additional HTTP requests.

To demonstrate how easy it is to implement the first decorative approach, in the article that precedes this one I showed how to improve the look and feel of a sample picture by adding to it first a slim border, then a small amount of padding, and finally a soft gray background color, thus giving the image an elegant ”framed” effect.

As I explained before, though, it’s also possible to polish the visual presentation of an image by means of another graphic, even though this may sound confusing initially. As you might have guessed, achieving this requires a clever use of the “padding” and “background-image” CSS properties; therefore, in this second part of the series I’m going to discuss how to use this technique for adding a subtle shadow to the same example image used in the previous tutorial.

Are you ready to continue learning how to use the functionality of CSS to decorate HTML images in a few simple steps? Then jump in and begin reading!

blog comments powered by Disqus

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials