Building Corner Effects with Transparent Background Images - Creating transparent background images
(Page 3 of 4 )
As I said in the previous section, it’s quite easy to recreate the rounded corner effects that you learned earlier, in this case by using only one transparent background image. The nitty-gritty of this approach resides in building the image in question in such a way that it will hide the corners of a given web page element, while the rest of it will remain visible, via the creation of transparent sections.
If the previous concept sounds rather confusing, the following sample image should dissipate any possible doubts that you might have. Here’s how this background image looks:
As you can see, the above sample background image is composed of two well-differentiated sections. The first one corresponds with the solid corners and the second one is all the remaining area, which logically is created transparently.
Now that you saw how the previous image looks, I guess you should have a better idea of how it can be placed within a specific web page element to implement a simple rounded corner effect on it. However, since all things are better grasped through practical examples, in the upcoming section of this article, I’m going to teach you how to use the previous transparent background image to build the aforementioned corner effect.
To learn how this brand new example will be developed, please go ahead and read the next few lines.
Next: Creating rounded corners with transparent background images >>
More Graphic Design Articles
More By Alejandro Gervasio
