Thursday, November 11, 2010

Target text links but not images with css



Its been an irritating thing with css where you style your text links beyond the typical text-decoration:underline and your images seem to be married to it. It is quite impossible to target the look of text links in general irrespective of class without applying effects meant for text to your images, as you see under the tilted image above.

What looks good for your text links need not necessarily do your images any favours.

I am using a solution that should work for many modern browsers (not till IE8), so this is a catch.

Instead of a:hover{} I use a:not(img) a:hover{text-shadow:whatever;transform:something;etc:etc;} of course, this is going to create problems with a vast percentage of visitors still using < IE9, which apparently supports :not()

So, my workaround is to use CSS3 effects that IE is unable to render to style text links. If the effects are rendered, they are also not rendered on image links. Otherwise, I style them in a back up manner, which may not be my heart's desire, but will also not wreck the look of my images. One good way is to change the link color and use text-decoration.

No comments: