mountaindayz ios icon design

just to demonstrate css skillz

by voodoomonkey

HTML

<span class="md-logo-frame"><span class="md-logo-frame-inner"><span class="md-logo"><h3 class="text">MOUNTAIN</h3><h3 class="text2">DAYZ</h3></span></span></span>
<span class="text2 small">icon design by Andreas Braun</span>

CSS

body{background-color:#23a2d8}
.md-logo-frame-inner{
  display:block;
  width: 105px;
	height: 105px;
  
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	background-color: #f00;
	-webkit-box-shadow: 0 1px rgba(255,255,255,.4), inset 0 1px rgba(255,255,255,.35);
	-moz-box-shadow: 0 1px rgba(255,255,255,.4), inset 0 1px rgba(255,255,255,.35);
	box-shadow: 0 1px rgba(255,255,255,.4), inset 0 1px rgba(255,255,255,.35);
	border: solid 1px rgba(0,0,0,.28);
	background-image: -webkit-linear-gradient(bottom, #1c83c6, #23a7db);
	background-image: -moz-linear-gradient(bottom, #1c83c6, #23a7db);
	background-image: -o-linear-gradient(bottom, #1c83c6, #23a7db);
	background-image: linear-gradient(to top, #1c83c6, #23a7db);
}
.md-logo-frame
{
  display:block;
	width: 117px;
	height: 119px;
  padding-left:10px;
  padding-top:10px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	background-color: #f00;
	-webkit-box-shadow: 0 -1px rgba(255,255,255,.31);
	-moz-box-shadow: 0 -1px rgba(255,255,255,.31);
	box-shadow: 0 -1px rgba(255,255,255,.31);
	background-image: -webkit-linear-gradient(bottom, #0f5689, #1c8ac7);
	background-image: -moz-linear-gradient(bottom, #0f5689, #1c8ac7);
	background-image: -o-linear-gradient(bottom, #0f5689, #1c8ac7);
	background-image: linear-gradient(to top, #0f5689, #1c8ac7);
}

.md-logo{
  background-image:url('http://s22.postimg.org/lq0uc22fx/md_copy.png');
  width:85px;
  height:75px;
 display:block;
  margin-left:10px;
  margin-top:15px; 
}
.text {
    display: block;
  color:#0c649f;
    font: bold 3em Arial, sans-serif;
    position:absolute;
  left:150px;
  top:0px;
  text-shadow: 1px 1px 1px rgba(255,255,255,0.4);
}


.text2{
   font: bold 3em Arial, sans-serif;
	color: #f8f9fb;
	text-shadow: 0 2px rgba(12,100,159,.75);
   position:absolute;
   left:410px;
  top:0px;
}
.small{
  font: bold 1em Arial, sans-serif;
   position:absolute;
   left:180px;
  top:200px;
}