Create a nice badge-like object

You can create a nice round object and use it as a badge or a personal logo. It’s pure CSS, so it’s not suitable as a Sandvox logo like the one you usually place into the header: this needs to be an image. What I’m talking about is something more dynamic, something you can create, customize and add on the fly to any page.

You can use it to emphasize an article’s content, for example (like “New offer!”, or “Editorial”, or “Guest post”). You can also choose different colors to differentiate sections or categories. Or you can add it to your sidebar as its first element and use it as a site-wide logo.

Here is the code and how it looks like, just play with it and change values according to your taste and your goal (round corners and box shadows require IE9 or later, so check it gracefully degrades for IE8):

See the Pen hLmGc by Cristiano Maria Gaston (@cgaston) on CodePen.0