Badges
-
Cool that'd be awesome - but would that be under an open source license of some sort?
-
24 Badges that require no Attribution.
Duplicated badges with II, III are meant as levels.
They are full vector images and can be scaled.
Images in the file are at 100x100px.
Download:
https://www.dropbox.com/s/oqcbhghhpdjmwxx/badges.ai -
Those are perfect!
But what is that blue ring around the star icon and that lime green text... -
I'm not too familiar with using CSS for images other than resizing. CSS Tricks had a good write up on CSS vs SVG.
Inline SVG Vs Icon Fonts [CAGEMATCH] | CSS-Tricks
If you're building an icon system for a site, you have some options. If you know the icons need to be raster images, then you'll likely be using CSS sprites.
CSS-Tricks (css-tricks.com)
On another note, your all probably aware of Achievements for Wordpress. (The guy works on Buddypress). You upload the graphic for the achievement and assign in a select amount of karma points and base it off an event like total post count, uploading avatar and so on. In the user panel the admin can check off which badges can be assigned and in the frontend the user will receive a light box notification of the award.
Could we tie the badges app into the reputation program you have here?
-
CSS? Yeah, should be simple enough. Looks like FontAwesome, icons (some of them at least, not sure about the mustache) but yes.
This is what it would look in HTML just to give you an idea.<a href="#" class="btn btn-icon b-2x btn-bg-trophy btn-rounded"> <i class="fa fa-trophy"></i> </a>So I'll explain;
btnis the standard class for a button.
btn-iconits a button that will hold an icon.
b-2xdouble the size of the icon by 2 times.
btn-bg-{}change the background color for Trophies (or whatever the badge name is)
btn-circleadd a circular border-radius of 999em (yes I use em instead of % though it should be standard in BS3 as %)Perhaps an extra class to add the border around the like border-
colorName. -
@Ganzuelo said:
Is it possible to add a generator inside the plugin itself to create badges on the fly?
That would be ideal.
-
Oh I just saw @julian's Fiddle, pretty simple.
Okay so even better, I'll tweak that.EDIT [1]: http://jsfiddle.net/3EKz5/1/
So this is scalable in my opinion:
Theres a default badge class for the badges
We should use another class to overwrite this for different badges per name.
And another class name for badge degrees (levels or whatever you'd like to call em). http://jsfiddle.net/3EKz5/3/EDIT [2]:
So lets tie all of this together and we get a pretty scalable solution: http://jsfiddle.net/3EKz5/4/EDIT [3]:
Sorry guys, heres the last one here that shows scalability. I opt to use the CSS3 scale in this case as an example.
http://jsfiddle.net/3EKz5/5/Pheww, that was fun.
-
I'm really liking the CSS + Font Awesome badges and how they're turning out. Also like the idea of being able to change them on the fly rather than have them be static content. Great work guys!
