Brackets logo

Brackets logo made in CSS3

Few hours ago I got a USB mouse from Adobe. They are sponsors of jQuery conference at San Francisco (http://events.jquery.org/2012/sf/.

They are showing few cool applications there. One of them is Brackets open-source code editor built with the web for the web.

To say "Thanks" for that I decided to make a little gift and help to spread this application.

So, my gift is called "Brackets CSS3 logo". Developed with the help of this beautifull application in pure CSS3.

HTML

<div class="brackets">
	<div class="white">
		<div class="left_scope"></div>
		<div class="right_scope"></div>
	</div>
</div>

CSS3 version

.brackets {
	width: 374px;
	height: 330px;
	background: -webkit-linear-gradient(top, #07ADE1 0%, #07A6DC 70%, #0676BB);
	background:    -moz-linear-gradient(top, #07ADE1 0%, #07A6DC 70%, #0676BB);
	background:     -ms-linear-gradient(top, #07ADE1 0%, #07A6DC 70%, #0676BB);
	background:      -o-linear-gradient(top, #07ADE1 0%, #07A6DC 70%, #0676BB);
	background:         linear-gradient(top, #07ADE1 0%, #07A6DC 70%, #0676BB);
	box-shadow: 0 44px 0 #035D90;
	border-radius: 105px;
	padding: 55px;

	position: relative;
	margin: 0 auto 100px auto;
}
.white {
	background: #fff;
	height: 100%;
	width: 100%;
	border-radius: 50px;
	position: relative;
}

.left_scope,
.right_scope {
	background: #4D4D4D;
	height: 57px;
	width: 127px;
	top: 41px;
	z-index:10;
	position: absolute;
	box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.left_scope { left: 45px; }
.right_scope { right: 45px; }

.left_scope::after,
.right_scope::after {
	bottom: -130px;

	content: '';
	background: #4D4D4D;
	width: 56px;
	height: 130px;
	position: absolute;
	display: block;
	right: 0;
}

.left_scope::after {
	left: 0;
}

.right_scope::after {
	right: 0;
}

.left_scope::before,
.right_scope::before {
	bottom: -187px;
	box-shadow: 0 10px 20px rgba(0,0,0,0.2);
	content: '';
	background: #4D4D4D;
	height: 57px;
	width: 127px;
	position: absolute;
	display: block;
	left: 0;
	z-index: -1;
}