Home arrow Style Sheets arrow Creating Angled Corners with Transparent Background Images
STYLE SHEETS

Creating Angled Corners with Transparent Background Images


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.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 4
February 05, 2008
TABLE OF CONTENTS:
  1. · Creating Angled Corners with Transparent Background Images
  2. · Review: building rounded corners by using a transparent background image
  3. · Building angled corners by using a single transparent background image
  4. · Seeing the angled corners effect in action

print this article
SEARCH DEVARTICLES

Creating Angled Corners with Transparent Background Images
(Page 1 of 4 )

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!


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

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 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials