Style Sheets
  Home arrow Style Sheets arrow Creating Angled Corners with Transparent B...
Dev Articles Forums 
ADO.NET  
Apache  
ASP  
ASP.NET  
C#  
C++  
ColdFusion  
COM/COM+  
Delphi-Kylix  
Design Usability  
Development Cycles  
DHTML  
Embedded Tools  
Flash  
Graphic Design  
HTML  
IIS  
Interviews  
Java  
JavaScript  
MySQL  
Oracle  
Photoshop  
PHP  
Reviews  
Ruby-on-Rails  
SQL  
SQL Server  
Style Sheets  
VB.Net  
Visual Basic  
Web Authoring  
Web Services  
Web Standards  
XML  
Mobile Linux 
App Generation ROI 
IBM® developerWorks 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us Get Paid 
Request Media Kit
Contact Us 
Site Map 
Privacy Policy 
Support 
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
STYLE SHEETS

Creating Angled Corners with Transparent Background Images
By: Alejandro Gervasio
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 4 stars4 stars4 stars4 stars4 stars / 2
    2008-02-05

    Table of Contents:
  • Creating Angled Corners with Transparent Background Images
  • Review: building rounded corners by using a transparent background image
  • Building angled corners by using a single transparent background image
  • Seeing the angled corners effect in action

  • Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article
     
     
    ADVERTISEMENT


    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!

    More Style Sheets Articles
    More By Alejandro Gervasio


       · In the course of this second part of the series, you’ll see you how to use...
     

    STYLE SHEETS ARTICLES

    - Image Replacement CSS Techniques
    - Using BlueTrip`s Success, Notice and Error C...
    - More Uses for the Thin and Caps CSS Classes ...
    - Styling Definition Lists with the BlueTrip C...
    - Styling Unordered and Ordered HTML Lists wit...
    - Using the BlueTrip CSS Framework`s Thin and ...
    - Adding Borders to Web Page Columns with Blue...
    - Introducing the BlueTrip CSS Framework
    - Using a Background Grid to Assist Web Page L...
    - Extending the Rule Of Thirds for Web Page La...
    - A Two-Column Web Page Layout Based on the Ru...
    - Using the Rule Of Thirds for Web Page Layout
    - Swapping Columns Using the Divine Ratio for ...
    - Using the Golden Ratio in Liquid Web Page De...
    - Fundamental Design Principles for Web Page L...







    © 2003-2009 by Developer Shed. All rights reserved. DS Cluster 4 Hosted by Hostway
    For more Enterprise Application Development news, visit eWeek