Tuesday 16 October 2012

Responsive Circles(Border-Radius) CSS3

Heres how to make responsive circles using CSS3, margin is not necessary, but this allows for vertical aligning to also be altered.

Styles:

.circle {
            postions:relative;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            width: 50%;
            display: table;
            margin:10px auto 0;
            padding: 30% 10%;
}


.logo {
            margin:0 auto;
            background:red;
        }
        .logotext {
            text-align:center;
            margin: auto 0;
            color:#ffffff;
        }

Example usages, in Jquery Bootstrap Twitter:

<div class="row">
<div class="span3 offset4">
<div class="logo circle">
<div class="logotext">
Test Logo
</div>
</div>
</div>
</div>

This will allow you to achieve such things as this:


No comments: