Degrading Link and Image

Here’s some code that I’ve been using all over.  It displays and image with markup for degrading gracefully.  Nothing fancy but very useful.

The CSS

.degradingImg {
display:block;
text-decoration:none;
background-repeat:no-repeat;
}

.degradingImg span{
left:-9999px;
position:relative;
}

The markup

<div id="header_cern" class="degradingImg"><span><h1>CERN - European Organization for Nuclear Research</h1></span></div>

A link works in the same way but makes a block of and ancor tag.

The CSS

.degradingLink {
display:block;
text-decoration:none;
background-repeat:no-repeat;
}

.degradingLink:hover {
text-decoration:none;
opacity: 0.5;
filter: alpha(opacity = 50);
}

.degradingLink span{
left:-9999px;
position:relative;
}

The markup

<a id="thumbs_2" class="degradingLink left_menu" href="particles_matter.html"><span>Particles Matter - What are Particles?</span></a>
Advertisements
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: