STYLE SHEETS

Langridge`s Image Replaceement Technique: A Final Look

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.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 1

December 16, 2009

TABLE OF CONTENTS:

As a proper conclusion to this tutorial, in the next few lines I listed the complete definition of a web page that contains the CSS styles defined in the segment that you just read. As you might expect, the page includes at the bottom of each of its sections an <a> element, which has been assigned the corresponding “fancy_link” class.

With that being said, here’s how this example web page looks:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Stuart Langridge's image replacement on H1, H2 elements and links</title>

body {

padding: 0;

margin: 0;

background: #fff;

font: 1em Arial, Helvetica, sans-serif;

color: #000;

}

#wrapper {

width: 960px;

margin: 0 auto;

background: #ffc;

}

#header, #content, #footer {

padding: 20px;

}

/* apply image replacement on H1 element */

#header h1 {

width: 400px;

height: 0;

padding-top: 200px;

background: url(h1.png) top left no-repeat;

overflow: hidden;

}

/* apply image replacement on H2 elements */

h2 {

width: 300px;

height: 0;

padding-top: 150px;

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

overflow: hidden;

}

/* apply image replacement on links with this class */

.fancy_link {

display: block;

width: 200px;

height: 0;

padding-top: 50px;

background: url(fancy_link.png) top left no-repeat;

overflow: hidden;

}

</style>

</head>

<body>

<h1>Welcome to our website</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Sed quis elit erat, et ultricies diam. Phasellus non turpis malesuada erat ultrices tincidunt sed vitae magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis purus risus, lacinia at faucibus id, luctus nec diam. In nulla neque, consequat ac hendrerit ac, pulvinar eu dui. Aenean in arcu felis, non hendrerit est.</p>

<a href="#" class="fancy_link">Read more on this topic...</a>

</div>

<h2>Main content section</h2>

<a href="#" class="fancy_link">Read more on this topic...</a>

</div>

<h2>Footer section</h2>

<a href="#" class="fancy_link">Read more on this topic...</a>

</div>

</body>

</html>

Considering that the above XHTML document is extremely basic, I won’t explain how it works again. Instead, please pay attention to the following screen capture, which shows the results produced by Langridge’s image replacement method when used with the previous web page links:

And with this final example, I’m finishing not only this tutorial, but this entire series on the most popular image replacement techniques created so far. As always, feel free to tweak all of the code samples developed in this article. Doing so will help you acquire a solid background in how to implement each of these techniques when building your next killer website.

Final thoughts

It’s hard to believe, but we’ve come to the end of this series. I hope you enjoyed reading it as much as I did writing it, since its humble purpose was to provide you with a quick overview of the most popular CSS-based image replacement methods available nowadays, so you can pick the one that best suits your personal requirements.

Regardless of the method that you choose now or in the near future, one thing is certain: all of them are of great help when you want to give different web page elements a more pleasant look, without having to write large sections of ugly, non-semantic markup.

See you in the next web design tutorial!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.