Creating Angled Corners with Transparent Background Images
(Page 1 of 4 )
This series of instructive tutorials shows you how to build rounded and angled corners, as well as other eye-catching effects by utilizing a few basic transparent background images. These images can be easily applied to any web page element in order to improve its look and feel and make it more attractive to the users of a given web site.
As you probably know, rounded corners are one of the most common decorative effects that web designers use to provide their web sites with a more professional and attractive look. However, the creation of this visual effect on web pages can be achieved by way of a huge variety of approaches, which range from utilizing tiny JavaScript routines to using CSS-based techniques.
Now that I introduced the primary goal of this series, I believe it’s time to summarize briefly all the topics that were covered in the first article. In this way I provide you with an appropriate method for linking the concepts deployed in that specific tutorial with the ones that I plan to treat in this second article, which you’re hopefully reading with interest.
In simple terms, in the previous tutorial I walked you though the process of building the popular rounded corners by utilizing a unique transparent background image, which was properly positioned inside of all the <h2> headers of a sample web document. In this manner it achieves the aforementioned visual effect.
Of course, building rounded corners using a conventional approach is a two-step process. The first step consists basically of creating the pertinent rounded corner background image with any graphic editing software. And the second one rests in positioning this image within the web page element that you wish to decorate.
Using transparent background images to create different corner effects has an additional advantage, since this approach allows you to change the background color of the web page elements that display the affected corners directly via the modification of its CSS styles without having to build a brand new background image.
So far, so good. At this stage all of the core concepts surrounding the creation of corner effects with some transparent background images should be quite familiar to you. So assuming this, in the course of this second tutorial of the series I’ll show you how to utilize the same approach to build some angled corners, which might also be useful when it comes to providing the different elements of a web site with a more professional and attractive appearance.
So, with the preliminaries out of our way, let’s learn together how to create some fancy angled corners on a sample web page by using a simple transparent background image. Let’s begin now!
Next: Review: building rounded corners by using a transparent background image >>
More Style Sheets Articles
More By Alejandro Gervasio
/ 2 
