Style Sheets
  Home arrow Style Sheets arrow Langridge`s Image Replaceement Technique: ...
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

Langridge`s Image Replaceement Technique: A Final Look
By: Alejandro Gervasio
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 5 stars5 stars5 stars5 stars5 stars / 1
    2009-12-16

    Table of Contents:
  • Langridge`s Image Replaceement Technique: A Final Look
  • Review: Langridge’s image replacement method with H2 elements
  • Using Langridge's technique with hyperlinks
  • Tying the CSS styles to the structural markup

  • 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


    Langridge`s Image Replaceement Technique: A Final Look


    (Page 1 of 4 )

    Welcome to the final part of a 12-part series on image replacement techniques. By means of a strong hands-on approach, this series helps you start using these methods so you can add a fresh, appealing look to different text-based elements of your web pages, without having to sacrifice the cleanness of their structural markup.

    And now that you’re aware of the goal of this series, it’s time to summarize the topics covered in the last installment. In that tutorial  I showed you how to apply the image replacement method created by Stuart Langridge to the H2 headers of a trivial web page to improve their visual presentation.

    The functionality of this method relies on combining the “height” and “padding-top” CSS properties to hide from view the text of the element being styled, while keeping its background image visible. Its implementation is really that easy.

    Considering that in previous parts of the series, I discussed how to use other image replacement methods with H1, H2 and <a> elements, this last article will demonstrate how to apply Langridge’s approach to a few hyperlinks as well.

    Now, let’s leave the preliminaries behind and start improving the look and feel of those wild web page links!

    More Style Sheets Articles
    More By Alejandro Gervasio


       · This last article of the series creates an example that shows how to apply...
     

    STYLE SHEETS ARTICLES

    - Styling Pseudo Classes with the RGBA CSS3 Pr...
    - Controlling Overall Transparency of an HTML ...
    - Altering the Border Opacity of an HTML Eleme...
    - The RGBA CSS3 Property: an Overview
    - Using Span Tags to Include Logos in Web Pages
    - Using a Single H1 Element to Include Logos i...
    - Combining Divs and H1 Elements to Include Lo...
    - Semantically Including Logos in Web Pages
    - Adding Text Indentation to Style Code Blocks...
    - Decorating Line Numbers in Code Blocks Style...
    - Changing the Color of Code Lines with CSS
    - Using Ordered Lists to Style Code Blocks wit...
    - Using a Zebra Background Effect to Style Cod...
    - Displaying Rounded Corners Built with CSS3 i...
    - Building Rounded Corners with CSS3`s -webkit...







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