Home arrow Graphic Design arrow Page 3 - Building Corner Effects with Transparent Background Images

Building Corner Effects with Transparent Background Images

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.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 14
January 29, 2008
  1. · Building Corner Effects with Transparent Background Images
  2. · Building rounded corners using a conventional approach
  3. · Creating transparent background images
  4. · Creating rounded corners with transparent background images

print this article

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.

blog comments powered by Disqus

- Customizing Wordpress Favicons and Gravatars
- Building Corner Effects with Transparent Bac...
- 3D Graphics Technology: VRML Part I - Introd...
- Creating Visual Effects
- Web Page Design Overview
- Creating Artistic Photographs
- Working with Tools in Paint Shop Pro 8
- Using HTML Quickform for Form Processing
- Introduction to Adobe FrameMaker
- WebLogic Workshop, WebLogic Platform, and th...
- Planning the Site
- Working with Web Services
- WebLogic Workshop Application Development Ba...
- Scanning Images for Web Use
- Web Graphics Overview

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