Amazing Windows7 Start Menu Using Pure CSS3

Have you ever used online desktops. I think they are really amazing. I got this post idea form there. I want to create Windows7 UI with HTML&CSS. Previous days developers use lot of images to create such UI, But now we can achieve such amazing UI using CSS3. Today i will explain you how to create Amazing Windows7 Start Menu Using CSS3. In this tutorial I am using only CSS3 and very less images. Have look at the demo below.
Amazing Windows7 Start Menu UI Using Pure CSS3


demo

download

The Html

<div id="startmenu">  
<ul id="applications">  
<li><a href="http://techumber.com"><img src="img/chrome.png" alt="" />Google Chrome</a></li>  
<li><a href="http://techumber.com"><img src="img/notepad.jpg" alt="" />Notepad</a></li>  
<li><a href="http://techumber.com"><img src="img/firefox-32.png" alt="" />Mozilla Firefox</a></li>  
<li><a href="http://techumber.com"><img src="img/ie.png" alt="" />Internet Explorer</a></li>  
<li><a href="http://techumber.com"><img src="img/vs2010.jpg" alt="" />Microsoft Visual Studio 2010</a></li>  
<li><a href="http://techumber.com"><img src="img/paint.jpg" alt="" />Paint</a></li>  
<li class="search">  
<form action="">  
<input type="text" placeholder="Search programs and files">  
</form>  
</li>  
</ul>  
<ul id="sysdir">  
<li class="user"><img src="img/user.png" alt=""></li>  
<li><a href="http://techumber.com"><span>Documents</span></a></li>  
<li><a href="http://techumber.com"><span>Pictures</span></a></li>  
<li><a href="http://techumber.com"><span>Music</span></a></li>  
<li><a href="http://techumber.com"><span>Computer</span></a></li>  
<li><a href="http://techumber.com"><span>Network</span></a></li>  
<li><a href="http://techumber.com"><span>Connect to</span></a></li>  
</ul>  
</div>  
<div id="bottom">  
<div class="start"></div>  
</div> 

This is the html. We will apply out css on this code.

Here we have 3 sections.

Applications Amazing Windows7 Start Menu UI Using Pure CSS3-1

#applications{ 
-moz-box-shadow: 0 0 1px #fff; 
-webkit-box-shadow: 0 0 1px #fff; 
-moz-border-radius: 3px; 
-webkit-border-radius: 3px; 
background: white;  
border: solid 1px #365167;  
box-shadow: 0 0 1px #fff;  
display: block;  
float: left;  
list-style: none;  
margin: 7px 0 7px 7px;  
padding: 0;  
} 
#applications li{ 
list-style: none;  
} 

#applications li a { 
border:solid 1px transparent;  
color:#4b4b4b;  
display:block;  
margin:3px;  
min-width:220px;  
padding:3px;  
text-decoration:none;  
} 
#applications li a:hover { 
-moz-border-radius:3px; 
-webkit-border-radius:3px; 
-moz-box-shadow: inset 0 0 1px #fff; 
-webkit-box-shadow: inset 0 0 1px #fff; 
box-shadow: inset 0 0 1px #fff;  
background-color:#cfe3fd;  
background: -moz-linear-gradient(top, #dcebfd, #c2dcfd);  
background: -webkit-gradient(linear, center top, center bottom, from(#dcebfd), to(#c2dcfd));  
border:solid 1px #7da2ce;  
} 
#applications li a img { 
border:0;  
margin:0 5px 0 0;  
vertical-align:middle;  
} 
.search form{ 
background: #E4F4FC;  
border-top: 2px solid #BEE6FD;  
padding: 10px 0;  
-webkit-border-radius: 0 0 5px 5px; 
-moz-border-radius: 0 0 5px 5px; 
border-radius: 0 0 5px 5px;  
display: block;  
padding: 3px;  
height: 30px;  
} 
.search input { 
background: white;  
border: 1px solid #AAA;  
padding: 3px 5px;  
margin: 0 14px;  
font: italic 12px Calibri,Arial,Sans-Serif;  
color: #999;  
width: 188px;  
position: relative;  
outline: none;  
background: white url(img/search.png) no-repeat scroll 178px center;  
} 

This code is used to design applications area in start menu. In this code we used different css3 properties like box-shadow,border-radious,gridents to design this.
System Folders Amazing Windows7 Start Menu UI Using Pure CSS3-2

#sysdir{ 
margin: 7px;  
margin-top: -30px;  
float: left;  
display: block;  
padding: 0;  
list-style: none;  
} 
#sysdir li a { 
border:solid 1px transparent;  
display:block;  
margin:5px 0;  
position:relative;  
color:#fff;  
text-decoration:none;  
min-width:120px;  
} 
#sysdir li a:hover { 
-moz-border-radius:3px; 
-webkit-border-radius:3px; 
-moz-box-shadow: inset 0 0 1px #fff; 
-webkit-box-shadow: inset 0 0 1px #fff; 
border:solid 1px #000;  
background-color:#658da0;  
background: -moz-linear-gradient(center left, rgba(81,115,132,0.55), rgba(121,163,184,0.55) 50%, rgba(81,115,132,0.55));  
background: -webkit-gradient(linear, 0% 100%, 100% 100%, from(#517384), color-stop(50%, #79a3b8), to(#517384));  
box-shadow: 0 0 1px #fff;  
} 
#sysdir li a span { 
padding:5px;  
display:block;  
} 
#sysdir li a:hover span { 
background: -moz-linear-gradient(center top, transparent, transparent 49%, rgba(2,37,58,0.5) 50%, rgba(63,111,135,0.5));  
background: -webkit-gradient(linear, center top, center bottom, from(transparent), color-stop(49%, transparent), color-stop(50%, rgba(2,37,58,0.5)), to(rgba(63,111,135,0.5)));  
} 
#sysdir li.user { 
text-align:center;  
} 

TaskBar Amazing Windows7 Start Menu UI Using Pure CSS3-3

#bottom{ 
z-index: 1000;  
width: 100%;  
height: 40px;  
background: -webkit-linear-gradient(65deg,rgba(0, 0, 0, 0.6),rgba(0, 0, 0, 0.9),rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.9));  
background: -moz-linear-gradient(65deg,rgba(0, 0, 0, 0.6),rgba(0, 0, 0, 0.9),rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.9));  
background: -ms-linear-gradient(65deg,rgba(0, 0, 0, 0.6),rgba(0, 0, 0, 0.9),rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.9));  
background: -o-linear-gradient(65deg,rgba(0, 0, 0, 0.6),rgba(0, 0, 0, 0.9),rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.9));  
background: linear-gradient(65deg,rgba(0, 0, 0, 0.6),rgba(0, 0, 0, 0.9),rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.9));  
border-top: 1px solid rgba(0, 0, 0, 0.5);  
-webkit-box-shadow: inset 0 1px 0px rgba(255,255,255,0.4); 
-moz-box-shadow: inset 0 1px 0px rgba(255,255,255,0.4); 
box-shadow: inset 0 1px 0px rgba(255,255,255,0.4);  
} 
#bottom div{ 
background: url(img/start-button.png) no-repeat 51% 10%;  
width: 40px;  
height: 40px;  
margin-left: 10px;  
} 
#bottom div:hover{ 
background: url(img/start-button.png) no-repeat 51% 86%;  
} 

In this code for windows icon effect I am using two images where I am changing the background position.
That's it. Hope you like it:-)

Get posts by email

Like what you're reading? Get these posts delivered to your inbox.