Decorating Images with CSS
(Page 1 of 4 )
If you want a web site with images that make it stand out from the crowd, keep reading. This three-part article series will show you how to give your images a professional look without resorting to Photoshop. All you'll need is some basic CSS. In this first part, you'll learn how to use slim borders and padding to achieve a picture frame effect.
From the old and nostalgic days when Tim Berner Lee brought it to Life, the web has been not only a creature in constant evolution, but one that now owns the largest audience worldwide. What’s more, a number of surveys have revealed that, for many users, the web is the Internet. This is conceptually wrong, but perfectly understandable from a beginner’s point of view.
There are numerous reasons that might justify this misleading opinion, which are out of the scope of this article. At least two of them should be kept in mind, however: first, the web is by far the easiest platform to deal with (especially when compared to other application-level protocols such as FTP, SMTP or POP3), and last but not least, it’s unquestionably the most appealing, too.
Without a doubt, a web site providing carefully crafted content can attract many visitors. However, one offering the same quality of content, but delivering it through a polished interface and loaded with a bunch of eye-catching images, will attract many more. The moral of this story is ridiculously simple: images are of great help when it comes to building a professional-looking web site, but quite possibly the most challenging task is to give them a pleasant appearance without having to be a Photoshop guru.
Here’s exactly where style sheets come into play. It's possible to provide online images with a fresh look by using only a few basic mixtures of CSS properties. These are extremely easy to code, even for beginning web designers.
If I've caught your attention now, in this three-part series, I’ll be exploring some proven CSS-based techniques that you can use to make your images stand out from the crowd, ranging from using borders and padding, to working with background images. But wait a minute! Images that decorate other images? That sounds like a confusing, recursive thing. Well, it’s not, trust me.
Even so, if you want to make your doubts disappear in the flicker of an eye, start reading!
Next: A basic web page with sample images >>
More Style Sheets Articles
More By Alejandro Gervasio
