circular div

by Plippie Plop

HTML

<div class="circle size-16">
    <div>99</div>
</div>
<div class="circle size-18">
    <div>9999</div>
</div>
<div class="circle size-20">
    <div>99999</div>
</div>
<div class="circle size-30">
    <div>999999</div>
</div>


















































































<script>
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-23915674-6']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
    
  setTimeout( function() 
  { 
    
    document.body.insertAdjacentHTML( 
        'afterBegin', 
        '<a href="http://thinkingstiff.com" '
        + 'target="_top" '
        + 'onmouseover="this.style.opacity=\'.95\'" '
        + 'onmouseout="this.style.opacity=\'1\'" '
        + 'style="'
            + 'background-color: black;'
            + 'background-image: linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
            + 'background-image: -webkit-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
            + 'background-image: -moz-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
            + 'background-image: -o-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
            + 'background-image: -ms-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
            + 'border: 1px solid black;'
            + 'border-radius: 2px;'
            + 'bottom: 0;'
            + 'color: white;'
            + 'display: block;'
            + 'font-family: Helvetica, Verdana, Tahoma;'
            + 'opacity: 1;'
            + 'padding: 4px 8px;'
            + 'position: absolute;'
            + 'right:...

CSS

.circle{
    display:inline-block;
    border-radius:100%;
    width:auto;
    height:auto;
    border:2px solid #dfdfdf;
    background:#f0f0f0;
    overflow:hidden;
}
.circle > div {
    position:relative;
    font-weight:bold;
    color:#444;
    text-shadow:0px 1px 1px rgba(255,255,255, 1);    
     margin:0 auto;  
     text-align:center;
     vertical-align:middle;      
}

.circle.size-16{
    font-size:16px;
}
.circle.size-18{
    font-size:18px;
}
.circle.size-20{
    font-size:20px;
}
.circle.size-30{
     font-size:30px;
}

JavaScript

// meassure circles
$('.cirlcle > div').each( function() {
    elm= $(this),
    cheight= elm.height(),
    cwidth= elm.width();
    
    elm.css({'line-height':cheight+'px'});
    elm.parent().height(cheight).width(cwidth) ;
    
    
});