CSS3 Retro Logo Style - Snippet

Preview
HTML
CSS
JS

<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>

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: 50px;
	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;
}

Tutorials Palace 20 December, 2018 No Comments

362 Views

CSS3 Retro Logo Style

Logo 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 (you can learn more about these here). 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.

CSS Logo

Download CSS3 Retro Logo Style Code Fullscreen Tutor Play Walkthrough

Tutorials Palace

CSS3 Retro Logo Style - Snippet

Related Snippets

Leave a Reply

Related Snippets

Leave a Reply

CSS3 Retro Logo Style - Code Walkthrough