Home arrow Style Sheets arrow Page 3 - Indenting H2 Elements as a CSS Image Replacement Technique
STYLE SHEETS

Indenting H2 Elements as a CSS Image Replacement Technique


In this second part of a six-part series on image replacement techniques, I demonstrate how to use the technique you learned in the previous part on all of the H2 headers contained in a sample web document. This technique is fairly straightforward, so you shouldn’t have any major problems using it within your own web pages.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 1
November 23, 2009
TABLE OF CONTENTS:
  1. · Indenting H2 Elements as a CSS Image Replacement Technique
  2. · Review: image replacement with an H1 header
  3. · Styling H2 elements
  4. · Applying the same IR technique to H1 and H2 elements

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Indenting H2 Elements as a CSS Image Replacement Technique - Styling H2 elements
(Page 3 of 4 )

If you found it easy to understand how to implement the previous image replacement approach with an H1 element on a web page, then when I show you how to perform the same task with all of its H2 headers, your love for CSS will be even stronger, trust me.

Does this sound a bit exaggerated? Well, it’s possible. Imagine that you’re bored with your text-based H2 elements and want to spice them up with the following background image:

By using the IR approach that you learned in the preceding section, styling all of the H2 headers of the web document would be reduced to coding the CSS styles below:

h2 {

width: 300px;

height: 150px;

background: url(h2.png) center center no-repeat;

text-indent: -9999px;

}

There you have it. Once again, assigning a value of –9999px to the headers in question will make them display the previous background image, while the inner text will disappear into limbo.

Of course, if you’re like me, you’ll want to see how this short CSS fragment can be merged with the one that styles H1 elements. In the section to come I’ll be showing the full source code of a brand new web document, which will include this last IR snippet.

Please read the following segment. It’s only one click away.


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 11 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials