Home arrow Style Sheets arrow Creating Framed Pictures with CSS

Creating Framed Pictures with CSS

Welcome to the conclusion of a three-part article series that shows you how to decorate images with CSS. In this part, I'm going to extend the "background picture" technique I showed you in the previous part to create a very professional-looking frame around an image.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 6
January 11, 2010
  1. · Creating Framed Pictures with CSS
  2. · Review: assigning background pictures to HTML images
  3. · Creating frames around HTML images
  4. · Building a

print this article

Creating Framed Pictures with CSS
(Page 1 of 4 )

Being the most powerful and effective web-based visual presentation tool developed so far, it's not breaking news that style sheets can be used in all sorts of clever ways. These range from polishing the appearance of a great diversity of HTML elements, to performing a few more innovative tasks, such as modifying the behavior of selectors, a feature not surprisingly called behavioral CSS.

When analyzed as a whole, style sheets are quite impressive. However, one of the best things about them is that they can produce remarkable results even when you use only basic properties. That's exactly the case when styling inline images, as the proper combination of borders, padding and background pictures can give boring <img> elements an elegant and eye-catching appearance, thus making them look much more professional.

To demonstrate how easy it is to improve the look and feel of one (or many) HTML images, in the two previous articles of the series I built a pair of basic examples. The first one showed how to decorate a sample graphic by using a mix of thin borders, padding and a solid background color. On the other hand, the second example was slightly more complex; it performed the entire decorative process by assigning a background picture to the targeted image to produce a shadowed version of the image.

This last approach is particularly interesting. It permits you to produce different versions of the same base image with relative ease, which makes it suitable for implementing in a large number of projects. Considering the inherent flexibility of this decorative technique, in this last installment of the series I'm going to discuss how to use it to create a pretty realistic frame around an image, an effect that can be applied to other images with minor effort.

Ready to learn the full details of this styling process? Then, jump in and start 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