Siri

by JamesKyle

HTML

Siri
<div class="siri">
    <div class="ring1">
        <div class="ring2">
            <div class="ring3">
                <div class="mic">
                    <div class="diaphram">
                        <div class="design">
                            <div class="shine"></div>
                        </div>
                    </div>
                    <div class="guide">
                        <div class="inside"></div>
                    </div>
                    <div class="neck"></div>
                    <div class="legs"></div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

body {
    background: #23252a;
}

.siri .ring1, .siri .ring2, .siri .ring3, .siri .diaphram, .siri .neck, .siri .legs {margin: auto;position: relative;}
.siri .ring1, .siri .ring2, .siri .ring3, .siri .diaphram, .siri .diaphram .design {border-radius: 75px;}
.siri .guide, .siri .guide .inside {border-radius: 0px 0px 26px 26px;}
.siri .ring1, .siri .ring2, .siri .ring3 {padding: 5px;}


.siri .ring1 {
    height: 140px;
    width: 140px;
    background-color: #CCC;
    background: #f0f0f0;
    background: -moz-linear-gradient(45deg, #f0f0f0 0%, #545454 50%, #f0f0f0 100%);
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#f0f0f0), color-stop(50%,#545454), color-stop(100%,#f0f0f0));
    background: -webkit-linear-gradient(45deg, #f0f0f0 0%,#545454 50%,#f0f0f0 100%);
    background: -o-linear-gradient(45deg, #f0f0f0 0%,#545454 50%,#f0f0f0 100%);
    background: -ms-linear-gradient(45deg, #f0f0f0 0%,#545454 50%,#f0f0f0 100%);
    background: linear-gradient(45deg, #f0f0f0 0%,#545454 50%,#f0f0f0 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#f0f0f0',GradientType=1 );
}
.siri .ring2 {
    height: 130px;
    width: 130px;    
    background-color: #23252a;
}
.siri .ring3 {
    height: 120px;
    width: 120px;
    background: #f0f0f0;
    
    background-image: -webkit-repeating-radial-gradient(center center, circle, rgba(0,0,0,0.5), rgba(0,0,0,0.5) 2px, rgba(0,0,0,0) 2px), rgba(0,0,0,0) 4px);
    background-image:  -khtml-repeating-radial-gradient(center center, circle, rgba(0,0,0,0.5), rgba(0,0,0,0.5) 2px, rgba(0,0,0,0) 2px), rgba(0,0,0,0) 4px);
    background-image:    -moz-repeating-radial-gradient(center center, circle, rgba(0,0,0,0.5), rgba(0,0,0,0.5) 2px, rgba(0,0,0,0) 2px), rgba(0,0,0,0) 4px);
    background-image:     -ms-repeating-radial-gradient(center center, circle, rgba(0,0,0,0.5), rgba(0,0,0,0.5) 2px, rgba(0,0,0,0) 2px), rgba(0,0,0,0) 4px);
    background-image:     ...