RSS-feed subscription
Newsletter subscription
Atom-feed subscription
Comment-Feed subscription
About

type in your email-address and press enter
Comments RSS icon Via RSS Comments mail icon Via mail
Cartoon me This is my wholly own, personal blog in which I blog whatever I want. Although I come from Germany I blog in English, simply because it's way cooler. Nevertheless I'm not that great English-speaker, that's why my English is creepily crappy from time to time.

CSS: Have a site’s favicon behind its link without using JavaScript or PHP

Is that cool or what?! It’s worthwhile to learn more CSS than actually necessary! I didn’t know that you could specify styles for links e.g. without using classes or ids or the other usual stuff. You’re able to show the favicon of the site you’re referring to only with CSS – no JavaScript or PHP included! It’s actually quite simple: If I have a Wikipedia-link, I write “wikipedia” anywhere in the link’s title (<a title=”abc wikipedia efg xyz”>). Now I can refer to it via

a[title~=wikipedia] {
color:black; //for example
}

in the CSS-files. But it can be even more interesting: With :after and content: …;

a[title~=wikipedia]:after {
content: url(http://en.wikipedia.org/favicon.ico);
}

With this phrase you have the Wikipedia’s favicon behind every Link that has a title-attribute which contains the word “wikipedia”. You can extend this thing, till it looks completely trashy:

a[title~=wikipedia]:after {
content: url(http://en.wikipedia.org/favicon.ico);
opacity: 0.5;
filter:Alpha(opacity=50); //shitty IE… always needs extras
}

a[title~=wikipedia]:hover:after {
opacity: 1;
filter:Alpha(opacity=100);
}

…and so on. Also possible with every other site.

Written 13.02.2009 by me / no responses yet, write one! / Trackback / Short-URL / Share and Save / Tags: ,
No comments so far. Be the first to write one!

Leave a Comment