Home arrow Style Sheets arrow Spanning H2 Elements for Image Replacement
STYLE SHEETS

Spanning H2 Elements for Image Replacement


Welcome to the fifth part of a six-part series on CSS-based image replacement techniques. In this part, you'll learn how to use Todd Fahrner’s image replacement method with all of the H2 elements of a basic web page.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 1
November 30, 2009
TABLE OF CONTENTS:
  1. · Spanning H2 Elements for Image Replacement
  2. · Review: applying Fahrner’s IR method to the H1 header of a web page
  3. · Styling multiple H2 headers with Fahrner's IR method
  4. · The finished version of the sample web document

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Spanning H2 Elements for Image Replacement
(Page 1 of 4 )

Beyond their primary use, which as you know is aimed at keeping the visual presentation of one or multiple HTML pages isolated from the structural markup, style sheets have been used in the last few years for some other purposes that very often walk the thin gray area that separates both presentational and behavioral layers.

Good examples of these “extreme” cases are drop-down menus, where the functionality of CSS is exploited not only to give the elements of the menu a pleasant look, but to define their behavior in response to specific mouse events as well. Drop-down menus aren't the only case where style sheets directly affect the behavior of web page elements; there are a few others that are equally illustrative, as you’ll see below.

Frankly speaking, most CSS-based image replacement (IR) methods are commonly used to modify the behavior of certain web page elements to hide the elements’ inner text from display, while keeping the assigned background image visible.

As with other techniques that involve a rather tricky use of CSS, some IR approaches are slightly harder to implement than others. That’s exactly the case with the one that I left off discussing in the last installment of this series. In that tutorial I explained how to apply the IR method created by Todd Fahrner to the H1 header of an XHTML document, which required the use of a couple of additional <span> tags to hide the text wrapped by the header via a “display: none” CSS declaration.

In this particular case, the method was implemented with a single web page header, but it’s easy to extend its use to other text-based elements. Provided that the topic has caught your attention, in this fifth installment of the series I’ll be discussing how to apply the aforementioned IR method to all of the H2 headers included in a sample web document.

Want to learn how this will be achieved in a few simple steps? Then begin reading right now!


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- 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...
- CSS3 Animated Image Gallery: Transitions
- CSS3 Properties: Fixed Heights with box-sizi...
- CSS3 Properties: Altering Strokes and 3D Eff...
- CSS3 Properties: Text-Stroke
- CSS3 Transitions: Width and Height Properties
- Creating a Drop Down Menu in CSS3
- Intro to CSS Transitions

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



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