Friday, 10 August 2012

Cool Round CSS3 Badge

Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.

As you can see in above pic these round css3 badges are totally awesome and it's too easy to make :


<div id="RC3B">
HD
</div>
<style>
div#RC3B {background:black;
height:60px;
width:60px;
-moz-border-radius:64px;
-webkit-border-radius:64px;
padding:32px;
text-align:center;
color:white;background:#f656ac;
border:4px solid white;-webkit-box-shadow: 0 0 1px rgb(0,0,0);
-moz-box-shadow: 0 0 1px rgb(255,0,0);
box-shadow: 0 0 1px rgb(255,0,0);font-size:50px; font-weight:bold;text-shadow: 0px 2px 2px #1F1F1F;
-webkit-transform: rotate(-19deg);
-moz-transform: scale(0) rotate(-19deg);
-ms-transform: scale(0) rotate(-19deg);
transform: scale(0) rotate(-19deg);
rotate(-19deg);
-ms-transform: scale(0) rotate(-19deg);
transform: scale(0) rotate(-19deg);
</style>


Now just replace HD with your text and paste it on your site or blog.
Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.
 
Powered by Blogger.