Building Corner Effects with Transparent Background Images
(Page 1 of 4 )
Among the vast arsenal of eye-catching visual effects that are used by many modern web sites nowadays, there’s one in particular that’s already considered a true classic by both beginners and seasoned web designers. Of course, in this case I’m talking about the popular rounded corners, which can be built by utilizing a huge variety of approaches, ranging from JavaScript-dependent solutions to CSS-based approaches.
However, one thing is true regarding the creation of rounded corners and other similar decorative effects for web pages: since most modern browsers don’t offer native support for building them, web designers have gone crazy developing different workarounds over time to create this kind of visual effect as painlessly as possible.
Speaking of workarounds used to make the visual appearance of a web site more appealing to potential visitors, I found one that immediately caught my attention because of its remarkable attractiveness and relatively easy implementation. All right, before you finish guessing, let me tell you what I’m talking about here: as you've possibly heard, it’s perfectly possibly to build different corner effects (and many others, actually) by placing a few tiny transparent background images inside of a specific web page element to simulate rounded and angled corners, fancy headers, and so forth.
Using transparent background images to build professional-looking web page effects is really a no-brainer process that can be tackled by even the most novice web designers. The whole procedure is limited to first creating the image in question, and then positioning it into the desired web page element with some simple CSS declarations.
Naturally, the concepts surrounding the use of transparent graphics aimed at creating fancy corner effects seem rather hard to grasp when explained without showing some explanatory code examples. Therefore, assuming that this topic might be really interesting to you, in this series of articles I’ll be demonstrating how to utilize some basic transparent background images to build rounded and angled corners, attractive web page headers, and much more.
So, having introduced you to the subject of the series, let’s learn together how to build all the aforementioned web page effects with the help of a few background graphics. Let’s begin now!
Next: Building rounded corners using a conventional approach >>
More Graphic Design Articles
More By Alejandro Gervasio
