The great thing about CSS is that, if done correctly, it can make your life much easier. Here’s a little trick that will label links based on their attributes without you having to add additional HTML when posting the link. This trick hinges on the fact that you can identify parameters in your CSS following the a beyong the usual :hover, :visited, etc.

Note: Doesn’t seem to be working in IE8… I’ll check for other version of IE later, but FireFox, Chrome, etc. are fine.)

Suppose that you’d like to have an icon next to any link that would identify it as being a mailto link, or a link that will open in a new window.

Setup your CSS as follows:

a[href^="mailto:"] {
 padding-left:20px;
 background: transparent url(icons/mail.gif) no-repeat center left;
}
a[target $='_blank'] {
 padding-left:20px;
 background: transparent url(icons/newWin.gif) no-repeat center left;
}

Now, what about file types? No problem, setup your CSS as follows:

a[href$='.doc'] {
 padding-left:20px;
 background: transparent url(icons/word.png) no-repeat center left;
}
a[href$='.xls'] {
 padding-left:20px;
 background: transparent url(icons/excel.png) no-repeat center left;
}
a[href$='.jpg'] {
 padding-left:20px;
 background: transparent url(icons/pic.png) no-repeat center left;
}

You can see it in action here.

If you want to apply the same formatting to several file types, e.g, the same image icon for .jpg, .jpeg, .gif, etc., you can avoid retyping the CSS for each by setting up your CSS as follows:

a[href$='.jpg'],
a[href$='.jpeg'],
a[href$='.gif'] {
 padding-left:20px;
 background: transparent url(icons/pic.png) no-repeat center left;
}

If you’d prefer that your icons appear following the text as opposed to preceeding it, change your CSS to read:

 padding-right:20px;
 background: transparent url(icons/pic.png) no-repeat center right;

Depending on the size of your icons, you may need to play with the padding. Here, I’ve used 20px as my icons are 16px wide so, given that we are centering the icon within the padding, I get a nice 2px buffer on either side. Also, if you have tall icons, or you’d like to use a smaller font size, you can add some line-height to your CSS so that the icon doesn’t get cropped.

The icons that I’m using in this example can be found here. They are licensed under a Creative Commons Attribution 2.5 License, so you can use them anywhere, for any purpose, and make whatever alterations to them that you would like.

Web Site Stuff CSS, web design, Web Development

This is a follow up to my CSS image mouse over post.

So, the problem is that Internet Explorer ignores the pseudoclass :hover unless it’s applied to a link, i.e., img:hover won’t work (no pun intended ).

Here’s how to make them all play nice.

This is what we came up with last time:

HTML:

<a href="target.html" class="highlight"><img src="yourimage.png"></a>

CSS:

.highlight img{
 border:0;
}
.highlight img:hover{
 background-color:#ff6c00;
}

Now, we were on the right track, so this isn’t all throw away, we just need to make a few adjustments.

First of all, as I said above, IE doesn’t like it when :hover is applied to anything other than a link, so let’s break down and give it what it wants. Tell your .highlight class that it’s to deal with a link and not an image. While you’re at it, you can delete the border:0; as it will no longer do us any good here. It should read as follows:

a.highlight {
}
a:hover.highlight {
  background-color:#ff6c00;
}

Now, we just have to deal with the fact that there is a big ugly border on our image. Add a new class called .noborder and put the border:0; in there.

.noborder {
 border:0;
}

Go ahead and apply that class to the image in your HTML.

<a href="target.html" class="highlight"><img src="yourimage.png" class="noborder"></a>

And that’s that! We’ve managed to trick IE into doing what FireFox had been doing for us all along. There’s just one problem… refresh document in a FireFox browser… no dice; it’s broken.

So we had it working in FireFox but not IE, now we force it to work in IE and it breaks FireFox… are we doomed to crawling back to javascript to get us out of this one?

Actually, no. This is an easy fix! Were you wondering why I kept that empty a.highlight class?

Add the following to your a.highlight class (I used 100×100 because that’s the size of my image, replace those values with your own dimensions):

height:100px;
width:100px;
display:block;

Voila! You now have a nice image mouse over effect that it completely cross-browser compatible using only one image and without resorting to javascript.

Your final code should look like this:

HTML:

<a href="target.html" class="highlight"><img src="yourimage.png" class="noborder"></a>

CSS:

a.highlight {
 width:100px;
 height:100px;
 display:block;
}
a:hover.highlight {
 background-color:#ff6c00;
}
.noborder {
 border:0;
}

Here it is in action.

I hope that this proves to be useful, have fun!

Web Site Stuff CSS, web design, Web Development

This is a quick and easy way to get a nice image mouse over effect using only one image, some CSS, and without resorting to any javascript.

The real trick is in the preparation of the image.

Open Photoshop, or whatever tool it is that your prefer, and create a new file. To keep things simple, I’m just going to draw out a quick shape on a 100 x 100px canvas. Make sure that you draw your shape on a new layer.

You can go ahead and delete your Background layer.

Next, rasterize your shape and select it’s mask (Ctrl + click on the layer in Photoshop).

Invert the selection so that you now have the transparent surrounding area selected. From the Select menu, shoose Modify > Contract. The value by which you choose to contract the selection will be the thickness of the mouseover highlight.

Fill the selected area with the color of your website background, in my case, white. You should end up with a logo that has a thin transparent outline against a solid background.

Save your image as .gif or .png in order to preserve the transparency.

Now, onto the code

This is the easy part. We are only going to make one class to control the mouse over effect. First, however, add the HTML for your image link (you could always use a span, etc instead of a link, I’m just demonstrating it this way as I would imagine that a link would be the most typical application for this trick):

<a href="target.html" class="highlight"><img src="yourimage.png"></a>

Now, for the CSS:

.highlight img{
 border:0;
}
.highlight img:hover{
 background-color:#ff6c00;
}

That’s it! Your result should look like this.

You can get creative with the shape and size of the transparent section in your image; there’s absolutely nothing saying that it has to be a solid continuous outline. Have fun!

Update: I just realized that this doesn’t work in IE8 Beta… not sure about 6 or 7. Firefox and Chrome are fine, though… I’ll adjust it to be compatible with IE8 (and likely 6 & 7) later tonight.
Another Update: Nope, it’s not just IE8; This won’t work in any version of Internet Explorer. Just another example of their refusal to adhere to the standards.

Web Site Stuff CSS, Photoshop, web design