Home arrow Graphic Design arrow 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
(Page 1 of 4 )

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!

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