Created purely in CSS scaling up on hover. I used JS for circular placement of elements, then just copied generated CSS to stylesheet. Everything is created using CSS3 shapes. For the outer semi-circles and the dashed border, 36 separate divs are used by both of them which are then placed according to the design.
The animation is done using transitions and scale transforms. These animations are not supported in IE so you won’t see the transition but it’ll jump to the new size on hover. For noise-like background I used two linear gradients.
Create Retro logo Design With CSS3
First step Html Code:
<div id=”wrapper”>
<div id=”c”>
<div id=”c-in”>
<div id=”txt”>
<span id=”char1″ class=”char”>•</span><span id=”char2″ class=”char”>R</span><span id=”char3″ class=”char”>E</span><span id=”char4″ class=”char”>T</span><span id=”char5″ class=”char”>R</span><span id=”char6″ class=”char”>O</span><span id=”char7″ class=”char”> </span><span id=”char8″ class=”char”> </span><span id=”char9″ class=”char”>L</span><span id=”char10″ class=”char”>O</span><span id=”char11″ class=”char”>G</span><span id=”char12″ class=”char”>O</span><span id=”char13″ class=”char”>•</span>
</div>
<div id=”txt1″>CSS3</div>
<div id=”ro-c”>
<div class=”r-o” id=”ro1″>
<div class=”r-in1 r-in” style=” “></div>
</div>
<div class=”r-o” id=”ro2″>
<div class=”r-in1 r-in”></div>
</div>
<div class=”r-o” id=”ro3″>
<div class=”r-in1 r-in” ></div>
</div>
<div class=”r-o” id=”ro4″>
<div class=”r-in1 r-in”></div>
</div>
<div class=”r-o” id=”ro5″>
<div class=”r-in1 r-in”></div>
</div>
<div class=”r-o” id=”ro6″>
<div class=”r-in2 r-in”></div>
</div>
<div class=”r-o” id=”ro7″>
<div class=”r-in2 r-in”></div>
</div>
<div class=”r-o” id=”ro8″>
<div class=”r-in2 r-in”></div>
</div>
<div class=”r-o” id=”ro9″>
<div class=”r-in2 r-in”></div>
</div>
<div class=”r-o” id=”ro10″>
<div class=”r-in2 r-in”></div>
</div>
<div class=”r-o” id=”ro11″>
<div class=”r-in2 r-in”></div>
</div>
<div class=”r-o” id=”ro12″>
<div class=”r-in2 r-in”></div>
</div>
<div class=”r-o” id=”ro13″>
<div class=”r-in2 r-in”></div>
</div>
<div class=”r-o” id=”ro14″>
<div class=”r-in2 r-in”></div>
</div>
<div class=”r-o” id=”ro15″>
<div class=”r-in3 r-in”></div>
</div>
<div class=”r-o” id=”ro16″>
<div class=”r-in3 r-in”></div>
</div>
<div class=”r-o” id=”ro17″>
<div class=”r-in3 r-in”></div>
</div>
<div class=”r-o” id=”ro18″>
<div class=”r-in3 r-in”></div>
</div>
<div class=”r-o” id=”ro19″>
<div class=”r-in3 r-in”></div>
</div>
<div class=”r-o” id=”ro20″>
<div class=”r-in3 r-in”></div>
</div>
<div class=”r-o” id=”ro21″>
<div class=”r-in3 r-in”></div>
</div>
<div class=”r-o” id=”ro22″>
<div class=”r-in3 r-in”></div>
</div>
<div class=”r-o” id=”ro23″>
<div class=”r-in3 r-in”></div>
</div>
<div class=”r-o” id=”ro24″>
<div class=”r-in4 r-in”></div>
</div>
<div class=”r-o” id=”ro25″>
<div class=”r-in4 r-in”></div>
</div>
<div class=”r-o” id=”ro26″>
<div class=”r-in4 r-in”></div>
</div>
<div class=”r-o” id=”ro27″>
<div class=”r-in4 r-in”></div>
</div>
<div class=”r-o” id=”ro28″>
<div class=”r-in4 r-in”></div>
</div>
<div class=”r-o” id=”ro29″>
<div class=”r-in4 r-in”></div>
</div>
<div class=”r-o” id=”ro30″>
<div class=”r-in5 r-in”></div>
</div>
<div class=”r-o” id=”ro31″>
<div class=”r-in5 r-in”></div>
</div>
<div class=”r-o” id=”ro32″>
<div class=”r-in5 r-in”></div>
</div>
<div class=”r-o” id=”ro33″>
<div class=”r-in5 r-in”></div>
</div>
<div class=”r-o” id=”ro34″>
<div class=”r-in5 r-in”></div>
</div>
<div class=”r-o” id=”ro35″>
<div class=”r-in5 r-in”></div>
</div>
<div class=”r-o” id=”ro36″>
<div class=”r-in5 r-in”></div>
</div>
</div>
</div>
<div id=”co-c”>
<div class=”c-o” id=”co1″></div>
<div class=”c-o” id=”co2″></div>
<div class=”c-o” id=”co3″></div>
<div class=”c-o” id=”co4″></div>
<div class=”c-o” id=”co5″></div>
<div class=”c-o” id=”co6″></div>
<div class=”c-o” id=”co7″></div>
<div class=”c-o” id=”co8″></div>
<div class=”c-o” id=”co9″></div>
<div class=”c-o” id=”co10″></div>
<div class=”c-o” id=”co11″></div>
<div class=”c-o” id=”co12″></div>
<div class=”c-o” id=”co13″></div>
<div class=”c-o” id=”co14″></div>
<div class=”c-o” id=”co15″></div>
<div class=”c-o” id=”co16″></div>
<div class=”c-o” id=”co17″></div>
<div class=”c-o” id=”co18″></div>
<div class=”c-o” id=”co19″></div>
<div class=”c-o” id=”co20″></div>
<div class=”c-o” id=”co21″></div>
<div class=”c-o” id=”co22″></div>
<div class=”c-o” id=”co23″></div>
<div class=”c-o” id=”co24″></div>
<div class=”c-o” id=”co25″></div>
<div class=”c-o” id=”co26″></div>
<div class=”c-o” id=”co27″></div>
<div class=”c-o” id=”co28″></div>
<div class=”c-o” id=”co29″></div>
<div class=”c-o” id=”co30″></div>
<div class=”c-o” id=”co31″></div>
<div class=”c-o” id=”co32″></div>
<div class=”c-o” id=”co33″></div>
<div class=”c-o” id=”co34″></div>
<div class=”c-o” id=”co35″></div>
<div class=”c-o” id=”co36″></div>
</div>
</div>
</div>
Second step Css Code:
body {
background-color: #DADADA;
background-image: -webkit-radial-gradient(#fff 25%, #DADADA);
background-image: -moz-radial-gradient(#fff 25%, #DADADA);
background-image: -o-radial-gradient(#fff 25%, #DADADA);
background-image: -ms-radial-gradient(#fff 25%, #DADADA);
background-image: radial-gradient(#fff 25%, #DADADA);
}
#wrapper {
width: 400px;
height: 400px;
position: relative;
overflow: hidden;
margin: 0 auto;
}
#c {
width: 200px;
height: 200px;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
background-color: #402B0B;
position: absolute;
left: 100px;
top: 100px;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
transition: all 0.5s;
}
#c:hover {
-webkit-transform: scale(1.8);
-moz-transform: scale(1.8);
-o-transform: scale(1.8);
-ms-transform: scale(1.8);
transform: scale(1.8);
}
#c-in {
width: 180px;
height: 180px;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
background-color: #8F6627;
background-image: -webkit-linear-gradient(0, #91664e 50%,transparent 50%), -webkit-linear-gradient(rgba(255,255,255, 0.1) 50%,transparent 50%);
background-image: -moz-linear-gradient(0, #91664e 50%,transparent 50%), -moz-linear-gradient(rgba(255,255,255, 0.1) 50%,transparent 50%);
background-image: -o-linear-gradient(0, #91664e 50%,transparent 50%), -o-linear-gradient(rgba(255,255,255, 0.1) 50%,transparent 50%);
background-image: -ms-linear-gradient(0, #91664e 50%,transparent 50%), -ms-linear-gradient(rgba(255,255,255, 0.1) 50%,transparent 50%);
background-image: linear-gradient(0, #91664e 50%,transparent 50%),linear-gradient(rgba(255,255,255, 0.1) 50%,transparent 50%);
-webkit-background-size: 3px 3px;
-moz-background-size: 3px 3px;
background-size: 3px 3px;
position: absolute;
left: 10px;
top: 10px;
z-index: 5;
-webkit-box-shadow: inset 1px 1px rgba(0,0,0,.7), 1px 1px rgba(255,255,255,.2);
-moz-box-shadow: inset 1px 1px rgba(0,0,0,.7), 1px 1px rgba(255,255,255,.2);
box-shadow: inset 1px 1px rgba(0,0,0,.7), 1px 1px rgba(255,255,255,.2);
}
#co-c {
position: absolute;
left: 25px;
top: 25px;
z-index: 3;
}
.c-o {
width: 16px;
height: 16px;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
background-color: #402B0B;
position: absolute;
}
#ro-c {
left: 30px;
top: 30px;
position: absolute;
z-index: 7;
width: 120px;
height: 120px;
}
.r-o {
position: absolute;
}
.r-in {
width: 10px;
height: 3px;
background-color: #735235;
position: absolute;
}
#txt {
font-family: arial, helvetica, sans-serif;
font-size: 16px;
font-weight: 900;
bottom: 14px;
position: absolute;
left: 29px;
color: #543C2F;
text-shadow: 1px 1px rgba(255, 255, 255, .1), 0 -1px rgba(0, 0, 0, .1);
line-height: 1em;
}
#txt1 {
font-family: Arial, Helvetica, sans-serif;
font-weight: 900;
color: #543C2F;
font-size: 55px;
position: absolute;
left: 20px;
top: 60px;
line-height: 1em;
text-shadow: 1px 1px rgba(255, 255, 255, .1), 0 -1px rgba(0, 0, 0, .4);
}
.char {
display: inline-block;
}
#char1 {
-webkit-transform: translateX(-1px) translateY(-33px) rotate(58deg);
-moz-transform: translateX(-1px) translateY(-33px) rotate(58deg);
-o-transform: translateX(-1px) translateY(-33px) rotate(58deg);
-ms-transform: translateX(-1px) translateY(-33px) rotate(58deg);
transform: translateX(-1px) translateY(-33px) rotate(58deg);
}
#char2 {
-webkit-transform: translateX(-3px) translateY(-24px) rotate(49deg);
-moz-transform: translateX(-3px) translateY(-24px) rotate(49deg);
-o-transform: translateX(-3px) translateY(-24px) rotate(49deg);
-ms-transform: translateX(-3px) translateY(-24px) rotate(49deg);
transform: translateX(-3px) translateY(-24px) rotate(49deg);
}
#char3 {
-webkit-transform: translateX(-4px) translateY(-15px) rotate(37deg);
-moz-transform: translateX(-4px) translateY(-15px) rotate(37deg);
-o-transform: translateX(-4px) translateY(-15px) rotate(37deg);
-ms-transform: translateX(-4px) translateY(-15px) rotate(37deg);
transform: translateX(-4px) translateY(-15px) rotate(37deg);
}
#char4 {
-webkit-transform: translateX(-4px) translateY(-8px) rotate(27deg);
-moz-transform: translateX(-4px) translateY(-8px) rotate(27deg);
-o-transform: translateX(-4px) translateY(-8px) rotate(27deg);
-ms-transform: translateX(-4px) translateY(-8px) rotate(27deg);
transform: translateX(-4px) translateY(-8px) rotate(27deg);
}
#char5 {
-webkit-transform: translateX(-3px) translateY(-3px) rotate(16deg);
-moz-transform: translateX(-3px) translateY(-3px) rotate(16deg);
-o-transform: translateX(-3px) translateY(-3px) rotate(16deg);
-ms-transform: translateX(-3px) translateY(-3px) rotate(16deg);
transform: translateX(-3px) translateY(-3px) rotate(16deg);
}
#char6 {
-webkit-transform: translateX(0px) translateY(0px) rotate(4deg);
-moz-transform: translateX(0px) translateY(0px) rotate(4deg);
-o-transform: translateX(0px) translateY(0px) rotate(4deg);
-ms-transform: translateX(0px) translateY(0px) rotate(4deg);
transform: translateX(0px) translateY(0px) rotate(4deg);
}
#char7 {
-webkit-transform: translateX(0px) translateY(0px) rotate(-3deg);
-moz-transform: translateX(0px) translateY(0px) rotate(-3deg);
-o-transform: translateX(0px) translateY(0px) rotate(-3deg);
-ms-transform: translateX(0px) translateY(0px) rotate(-3deg);
transform: translateX(0px) translateY(0px) rotate(-3deg);
}
#char8 {
-webkit-transform: translateX(1px) translateY(0px) rotate(-7deg);
-moz-transform: translateX(1px) translateY(0px) rotate(-7deg);
-o-transform: translateX(1px) translateY(0px) rotate(-7deg);
-ms-transform: translateX(1px) translateY(0px) rotate(-7deg);
transform: translateX(1px) translateY(0px) rotate(-7deg);
}
#char9 {
-webkit-transform: translateX(2px) translateY(-2px) rotate(-14deg);
-moz-transform: translateX(2px) translateY(-2px) rotate(-14deg);
-o-transform: translateX(2px) translateY(-2px) rotate(-14deg);
-ms-transform: translateX(2px) translateY(-2px) rotate(-14deg);
transform: translateX(2px) translateY(-2px) rotate(-14deg);
}
#char10 {
-webkit-transform: translateX(4px) translateY(-7px) rotate(-25deg);
-moz-transform: translateX(4px) translateY(-7px) rotate(-25deg);
-o-transform: translateX(4px) translateY(-7px) rotate(-25deg);
-ms-transform: translateX(4px) translateY(-7px) rotate(-25deg);
transform: translateX(4px) translateY(-7px) rotate(-25deg);
}
#char11 {
-webkit-transform: translateX(4px) translateY(-14px) rotate(-37deg);
-moz-transform: translateX(4px) translateY(-14px) rotate(-37deg);
-o-transform: translateX(4px) translateY(-14px) rotate(-37deg);
-ms-transform: translateX(4px) translateY(-14px) rotate(-37deg);
transform: translateX(4px) translateY(-14px) rotate(-37deg);
}
#char12 {
-webkit-transform: translateX(3px) translateY(-24px) rotate(-49deg);
-moz-transform: translateX(3px) translateY(-24px) rotate(-49deg);
-o-transform: translateX(3px) translateY(-24px) rotate(-49deg);
-ms-transform: translateX(3px) translateY(-24px) rotate(-49deg);
transform: translateX(3px) translateY(-24px) rotate(-49deg);
}
#char13 {
-webkit-transform: translateX(1px) translateY(-33px) rotate(-58deg);
-moz-transform: translateX(1px) translateY(-33px) rotate(-58deg);
-o-transform: translateX(1px) translateY(-33px) rotate(-58deg);
-ms-transform: translateX(1px) translateY(-33px) rotate(-58deg);
transform: translateX(1px) translateY(-33px) rotate(-58deg);
}
.r-o {
-webkit-transform-origin: 61px 61px;
-moz-transform-origin: 61px 61px;
-o-transform-origin: 61px 61px;
-ms-transform-origin: 61px 61px;
transform-origin: 61px 61px;
}
#ro1, #co1 {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
#ro2, #co2 {
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
#ro3, #co3 {
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-o-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
}
#ro4, #co4 {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
#ro5, #co5 {
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
-o-transform: rotate(40deg);
-ms-transform: rotate(40deg);
transform: rotate(40deg);
}
#ro6, #co6 {
-webkit-transform: rotate(50deg);
-moz-transform: rotate(50deg);
-o-transform: rotate(50deg);
-ms-transform: rotate(50deg);
transform: rotate(50deg);
}
#ro7, #co7 {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-o-transform: rotate(60deg);
-ms-transform: rotate(60deg);
transform: rotate(60deg);
}
#ro8, #co8 {
-webkit-transform: rotate(70deg);
-moz-transform: rotate(70deg);
-o-transform: rotate(70deg);
-ms-transform: rotate(70deg);
transform: rotate(70deg);
}
#ro9, #co9 {
-webkit-transform: rotate(80deg);
-moz-transform: rotate(80deg);
-o-transform: rotate(80deg);
-ms-transform: rotate(80deg);
transform: rotate(80deg);
}
#ro10, #co10 {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
#ro11, #co11 {
-webkit-transform: rotate(100deg);
-moz-transform: rotate(100deg);
-o-transform: rotate(100deg);
-ms-transform: rotate(100deg);
transform: rotate(100deg);
}
#ro12, #co12 {
-webkit-transform: rotate(110deg);
-moz-transform: rotate(110deg);
-o-transform: rotate(110deg);
-ms-transform: rotate(110deg);
transform: rotate(110deg);
}
#ro13, #co13 {
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-o-transform: rotate(120deg);
-ms-transform: rotate(120deg);
transform: rotate(120deg);
}
#ro14, #co14 {
-webkit-transform: rotate(130deg);
-moz-transform: rotate(130deg);
-o-transform: rotate(130deg);
-ms-transform: rotate(130deg);
transform: rotate(130deg);
}
#ro15, #co15 {
-webkit-transform: rotate(140deg);
-moz-transform: rotate(140deg);
-o-transform: rotate(140deg);
-ms-transform: rotate(140deg);
transform: rotate(140deg);
}
#ro16, #co16 {
-webkit-transform: rotate(150deg);
-moz-transform: rotate(150deg);
-o-transform: rotate(150deg);
-ms-transform: rotate(150deg);
transform: rotate(150deg);
}
#ro17, #co17 {
-webkit-transform: rotate(160deg);
-moz-transform: rotate(160deg);
-o-transform: rotate(160deg);
-ms-transform: rotate(160deg);
transform: rotate(160deg);
}
#ro18, #co18 {
-webkit-transform: rotate(170deg);
-moz-transform: rotate(170deg);
-o-transform: rotate(170deg);
-ms-transform: rotate(170deg);
transform: rotate(170deg);
}
#ro19, #co19 {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
#ro20, #co20 {
-webkit-transform: rotate(190deg);
-moz-transform: rotate(190deg);
-o-transform: rotate(190deg);
-ms-transform: rotate(190deg);
transform: rotate(190deg);
}
#ro21, #co21 {
-webkit-transform: rotate(200deg);
-moz-transform: rotate(200deg);
-o-transform: rotate(200deg);
-ms-transform: rotate(200deg);
transform: rotate(200deg);
}
#ro22, #co22 {
-webkit-transform: rotate(210deg);
-moz-transform: rotate(210deg);
-o-transform: rotate(210deg);
-ms-transform: rotate(210deg);
transform: rotate(210deg);
}
#ro23, #co23 {
-webkit-transform: rotate(220deg);
-moz-transform: rotate(220deg);
-o-transform: rotate(220deg);
-ms-transform: rotate(220deg);
transform: rotate(220deg);
}
#ro24, #co24 {
-webkit-transform: rotate(230deg);
-moz-transform: rotate(230deg);
-o-transform: rotate(230deg);
-ms-transform: rotate(230deg);
transform: rotate(230deg);
}
#ro25, #co25 {
-webkit-transform: rotate(240deg);
-moz-transform: rotate(240deg);
-o-transform: rotate(240deg);
-ms-transform: rotate(240deg);
transform: rotate(240deg);
}
#ro26, #co26 {
-webkit-transform: rotate(250deg);
-moz-transform: rotate(250deg);
-o-transform: rotate(250deg);
-ms-transform: rotate(250deg);
transform: rotate(250deg);
}
#ro27, #co27 {
-webkit-transform: rotate(260deg);
-moz-transform: rotate(260deg);
-o-transform: rotate(260deg);
-ms-transform: rotate(260deg);
transform: rotate(260deg);
}
#ro28, #co28 {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
#ro29, #co29 {
-webkit-transform: rotate(280deg);
-moz-transform: rotate(280deg);
-o-transform: rotate(280deg);
-ms-transform: rotate(280deg);
transform: rotate(280deg);
}
#ro30, #co30 {
-webkit-transform: rotate(290deg);
-moz-transform: rotate(290deg);
-o-transform: rotate(290deg);
-ms-transform: rotate(290deg);
transform: rotate(290deg);
}
#ro31, #co31 {
-webkit-transform: rotate(300deg);
-moz-transform: rotate(300deg);
-o-transform: rotate(300deg);
-ms-transform: rotate(300deg);
transform: rotate(300deg);
}
#ro32, #co32 {
-webkit-transform: rotate(310deg);
-moz-transform: rotate(310deg);
-o-transform: rotate(310deg);
-ms-transform: rotate(310deg);
transform: rotate(310deg);
}
#ro33, #co33 {
-webkit-transform: rotate(320deg);
-moz-transform: rotate(320deg);
-o-transform: rotate(320deg);
-ms-transform: rotate(320deg);
transform: rotate(320deg);
}
#ro34, #co34 {
-webkit-transform: rotate(330deg);
-moz-transform: rotate(330deg);
-o-transform: rotate(330deg);
-ms-transform: rotate(330deg);
transform: rotate(330deg);
}
#ro35, #co35 {
-webkit-transform: rotate(340deg);
-moz-transform: rotate(340deg);
-o-transform: rotate(340deg);
-ms-transform: rotate(340deg);
transform: rotate(340deg);
}
#ro36, #co36 {
-webkit-transform: rotate(350deg);
-moz-transform: rotate(350deg);
-o-transform: rotate(350deg);
-ms-transform: rotate(350deg);
transform: rotate(350deg);
}
.r-in {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.r-in1 {
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px inset, rgba(255, 255, 255, 0.1) 0px 1px;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px inset, rgba(255, 255, 255, 0.1) 0px 1px;
box-shadow: rgba(0, 0, 0, 0.2) 0px 1px inset, rgba(255, 255, 255, 0.1) 0px 1px;
}
.r-in2 {
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 1px -1px inset, rgba(255, 255, 255, 0.1) 1px 0px;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 1px -1px inset, rgba(255, 255, 255, 0.1) 1px 0px;
box-shadow: rgba(0, 0, 0, 0.2) 1px -1px inset, rgba(255, 255, 255, 0.1) 1px 0px;
}
.r-in3 {
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px -1px inset, rgba(255, 255, 255, 0.1) -1px -1px;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0px -1px inset, rgba(255, 255, 255, 0.1) -1px -1px;
box-shadow: rgba(0, 0, 0, 0.2) 0px -1px inset, rgba(255, 255, 255, 0.1) -1px -1px;
}
.r-in4 {
-webkit-box-shadow: rgba(0, 0, 0, 0.2) -1px 0px inset, rgba(255, 255, 255, 0.1) -1px 0px;
-moz-box-shadow: rgba(0, 0, 0, 0.2) -1px 0px inset, rgba(255, 255, 255, 0.1) -1px 0px;
box-shadow: rgba(0, 0, 0, 0.2) -1px 0px inset, rgba(255, 255, 255, 0.1) -1px 0px;
}
.r-in5 {
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px inset, rgba(255, 255, 255, 0.1) -1px 1px;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px inset, rgba(255, 255, 255, 0.1) -1px 1px;
box-shadow: rgba(0, 0, 0, 0.2) 0px 1px inset, rgba(255, 255, 255, 0.1) -1px 1px;
}
.c-o {
-webkit-transform-origin: 75px 75px;
-moz-transform-origin: 75px 75px;
-o-transform-origin: 75px 75px;
-ms-transform-origin: 75px 75px;
transform-origin: 75px 75px;
}
Via @ Cssdeck
jQuery CDNJS
