tags:

views:

176

answers:

4

I want to implement badge like in SO, maybe you can give me a nice css code?

+12  A: 

Maybe you can use the nice Firebug and take a peek at how SO does it.

Matti Virkkunen
Very nice answer.
John at CashCommons
@John: Thank you for the nice comment.
Matti Virkkunen
not sure whether to -1 you for unnecessary sarcasm or +1 you for making me giggle. :p will just leave it at 0 i think. :)
Thomas Clayson
It is nice that people are so nice to each other.
Felix Kling
@Thomas Clayson: I fail to see sarcasm in this answer... That's one of the ways I would have done it.
animuson
@animuson: It's nice to hear from you. Sarcasm is not nice at all, but this entire thread is rather nice, don't you think?
John at CashCommons
I just got a "Nice Answer" badge for this answer! Yay!
Matti Virkkunen
lol, was only a tongue in cheek comment :)
Thomas Clayson
Matti just won himself a ... um ... Nice Answer badge!! How appropriate. :) (OK, back to work now)
John at CashCommons
Thank you man, I didn't want to copy all the css of badge, I wanted something different. Congrats with your "Nice answer" badge, hope you will enjoy that.
hey
+1  A: 

You mean rounded corners? It uses CSS3 rounded corners:

border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
gertas
I can't wait until someone points out that using Firebug wouldn't actually yield all of these, because anything Firefox doesn't support gets ignored in its views. Well, it does have a raw request viewer, though...
Matti Virkkunen
+1  A: 

Or you can run a search for 'badge' on their CSS file:

.badge,.badge-tag{color:#fff!important;background-color:#333;border:1px solid #333;margin:0 3px 3px 0;padding:0 6px 0 3px;display:inline-block;text-decoration:none;line-height:1.9;-moz-border-radius:6px;-webkit-border-radius:6px;}
.badge:hover,.badge-tag:hover{border:1px solid #555;background-color:#555;text-decoration:none;}
.badge-tag:hover{color:#fff!important;border:2px solid #555;}
.badge-tag{color:#333!important;border:2px solid #333;background-color:#eee;}
animuson
+5  A: 

Introducing the brand new

StackOverflow BadgeMaker 3000

It makes Badges™

Just pop in a name, tell it what color you want your shiny new badge to be, and you're all set!

Browser support: All modern browsers, up to and including IE7. Round corners not supported in IE8 and below.

Yi Jiang
ROFL, this is awesome.
BoltClock