We just launched 15tags blog! We are documenting the whole process of 15 tags, our new "pet project" development from the napkin to the web!

ClearYourMind is a personal blog about science, productivity, gadgets, business, web 2.0 and everything a "web-guy" loves by Javier Cabrera, owner and principal of Emaginacion, a small web design agency.

Powered by Google

CSS Visited Link Hint

Hey there. I used Newsvine last week and it was pretty cool. I noticed a feature I never found before and I thought it was cool enough for making a small tutorial. Here we go:
UPDATE: anty just sent me a better one, “no-repeat” (I forgot it!)! Thanks Anty!
What is it?
It’s a way to show your users and visitors they already have visited a link (or subpage) without the ugly purple default color scheme, instead a cool “ok” graphic is shown at the end of the link. It’s pretty basic and simple, but you can grow it from there.

Come here to try a functional demo.

So, how’s the CSS code?

This baby goes right into your CSS code. Now, it all depends on your current font choice (verdana, trebuchet, serif, georgia, etc) so don’t be surprise if the CSS doesn’t work right away and it look overplaced, you should play a little bit with the red value in the code below to get it right; but usually you don’t need to.

.visited a:visited {
    background: url(visited.gif) no-repeat right 3px;
    padding-right: 17px;
    color: #909090;
}
.visited a:hover {
    color: #4a4a4a;
}

And that’s it. Pretty easy uh? and you can use it everywhere across your site.

March 7 , 2006 by Javier

Saved in: CSS Hints

Trackback URL for this post:
http://www.emaginacion.com.ar/cym/css-visited-link-hint/trackback/

2 comments on “CSS Visited Link Hint”

I like the idea and I like your download button ;)

Gravatar of anty

anty
7 of March 2006 at 6:16 pm    

China…

Read more about China…

Gravatar of China

China
9 of December 2006 at 10:48 pm    

Not ready yet.

Working on it. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos

Working on it. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos



Copyright © Emaginacion - CC License -XHTML (IE SUCKS!) - Grab the feed! - Found some typo? - Legal Notice

Thanks for visiting http://www.emaginacion.com.ar/cym/ ClearYourMind; keep printing us!