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
2010-09-20 16:27:00
Very nice answer.
John at CashCommons
2010-09-20 16:27:57
@John: Thank you for the nice comment.
Matti Virkkunen
2010-09-20 16:28:32
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
2010-09-20 16:28:32
It is nice that people are so nice to each other.
Felix Kling
2010-09-20 16:28:50
@Thomas Clayson: I fail to see sarcasm in this answer... That's one of the ways I would have done it.
animuson
2010-09-20 16:31:53
@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
2010-09-20 16:35:10
I just got a "Nice Answer" badge for this answer! Yay!
Matti Virkkunen
2010-09-20 16:38:55
lol, was only a tongue in cheek comment :)
Thomas Clayson
2010-09-20 16:39:10
Matti just won himself a ... um ... Nice Answer badge!! How appropriate. :) (OK, back to work now)
John at CashCommons
2010-09-20 16:40:12
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
2010-09-20 16:55:46
+1
A:
You mean rounded corners? It uses CSS3 rounded corners:
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
gertas
2010-09-20 16:29:59
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
2010-09-20 16:32:43
+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
2010-09-20 16:30:42
+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
2010-09-20 16:47:25