Quantcast
Viewing latest article 4
Browse Latest Browse All 12
↧

Tutorial: Create Retro logo Design With CSS3 Logo

June 1, 2012, 5:38 am
$
0
0

Design Inspiration Blog
Design Inspiration Blog -

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

Image may be NSFW.
Clik here to view.

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”>&nbsp;</span><span id=”char8″ class=”char”>&nbsp;</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

Tutorial: Create Retro logo Design With CSS3 Logo
Maan

↧
Search
Viewing latest article 4
Browse Latest Browse All 12

Trending Articles

Practice Sheet of Right form of verbs for HSC Students

September 22, 2019, 11:40 pm

Download: FK ft Shenky – Nakuyewa ”Prod by: Shenky”

February 16, 2017, 4:24 pm

How to win at Markstrat (Markstrat Tips and Tricks) – Vodites

January 5, 2014, 10:34 pm

Ominde Commission Report and Recommendations – Ominde Report of 1964

March 16, 2015, 5:14 am

Bureau of Internal Revenue: Regional Offices (Directory)

January 9, 2014, 11:06 pm

GO 53 on Enhancement of Ex-gratia upto 5 Lakhs Toddy Tappers in Telangana

March 26, 2017, 11:23 pm

Cakewalk CA-2A Leveling Amplifier v2.0.1.97 WiN, v2.0.1.96 OSX Incl Keygen

October 17, 2016, 7:20 am

Mp3 Download: Mdu - Kunjenjenjena

December 7, 2017, 8:16 am

How the kill the job , when DTP request running for long hours.

July 26, 2013, 2:41 am

Microsoft Intune から展開しているアプリのアップデートについて

October 17, 2016, 4:11 am

18-year-old girl was beaten for half an hour by two Northampton men in 'an...

September 1, 2017, 10:00 pm

Car crash in Dunton Bassett leaves driver in critical condition

October 7, 2014, 7:51 am

Macky 2, Two Others In Road Accident

March 29, 2015, 5:34 am

Application log 00000000000000089514: Could not convert queue DLVST90CLNT

May 14, 2015, 11:27 pm

Detroit mafia: D’Anna Brothers agree to plea deal

April 21, 2016, 6:56 am

Delivery block field greyed out using VA02

January 26, 2016, 2:52 pm

Muloraki Au

June 22, 2016, 1:44 am

【個人撮影】スマホのプライベート映像♪「中に出さないで///」カラオケ屋での生ハメ撮りが流出ｗ【リベンジポルノ】＠PornHub

October 12, 2017, 2:23 pm

BREAKING NEWS: Diamond Platnumz Is Reported Dead After Ghastly Car Accident

February 9, 2018, 4:56 am

FIAT 500 B0111 B0112

July 5, 2018, 10:31 am
Search