Techumber

Amazing Windows7 Start Menu Using Pure CSS3

Github avatar
Dimpu
September 24, 2012. 4 min read

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="//techumber.com"><img src="img/chrome.png" alt="" />Google Chrome</a></li>
<li><a href="//techumber.com"><img src="img/notepad.jpg" alt="" />Notepad</a></li>
<li><a href="//techumber.com"><img src="img/firefox-32.png" alt="" />Mozilla Firefox</a></li>
<li><a href="//techumber.com"><img src="img/ie.png" alt="" />Internet Explorer</a></li>
<li><a href="//techumber.com"><img src="img/vs2010.jpg" alt="" />Microsoft Visual Studio 2010</a></li>
<li><a href="//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="//techumber.com"><span>Documents</span></a></li>
<li><a href="//techumber.com"><span>Pictures</span></a></li>
<li><a href="//techumber.com"><span>Music</span></a></li>
<li><a href="//techumber.com"><span>Computer</span></a></li>
<li><a href="//techumber.com"><span>Network</span></a></li>
<li><a href="//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(topundefined #dcebfdundefined #c2dcfd);
background: -webkit-gradient(linearundefined center topundefined center bottomundefined from(#dcebfd)undefined 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 CalibriundefinedArialundefinedSans-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 leftundefined rgba(81undefined115undefined132undefined0.55)undefined rgba(121undefined163undefined184undefined0.55) 50%undefined rgba(81undefined115undefined132undefined0.55));
background: -webkit-gradient(linearundefined 0% 100%undefined 100% 100%undefined from(#517384)undefined color-stop(50%undefined #79a3b8)undefined 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 topundefined transparentundefined transparent 49%undefined rgba(2undefined37undefined58undefined0.5) 50%undefined rgba(63undefined111undefined135undefined0.5));
background: -webkit-gradient(linearundefined center topundefined center bottomundefined from(transparent)undefined color-stop(49%undefined transparent)undefined color-stop(50%undefined rgba(2undefined37undefined58undefined0.5))undefined to(rgba(63undefined111undefined135undefined0.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(65degundefinedrgba(0undefined 0undefined 0undefined 0.6)undefinedrgba(0undefined 0undefined 0undefined 0.9)undefinedrgba(0undefined 0undefined 0undefined 0.5)undefinedrgba(0undefined 0undefined 0undefined 0.9));
background: -moz-linear-gradient(65degundefinedrgba(0undefined 0undefined 0undefined 0.6)undefinedrgba(0undefined 0undefined 0undefined 0.9)undefinedrgba(0undefined 0undefined 0undefined 0.5)undefinedrgba(0undefined 0undefined 0undefined 0.9));
background: -ms-linear-gradient(65degundefinedrgba(0undefined 0undefined 0undefined 0.6)undefinedrgba(0undefined 0undefined 0undefined 0.9)undefinedrgba(0undefined 0undefined 0undefined 0.5)undefinedrgba(0undefined 0undefined 0undefined 0.9));
background: -o-linear-gradient(65degundefinedrgba(0undefined 0undefined 0undefined 0.6)undefinedrgba(0undefined 0undefined 0undefined 0.9)undefinedrgba(0undefined 0undefined 0undefined 0.5)undefinedrgba(0undefined 0undefined 0undefined 0.9));
background: linear-gradient(65degundefinedrgba(0undefined 0undefined 0undefined 0.6)undefinedrgba(0undefined 0undefined 0undefined 0.9)undefinedrgba(0undefined 0undefined 0undefined 0.5)undefinedrgba(0undefined 0undefined 0undefined 0.9));
border-top: 1px solid rgba(0undefined 0undefined 0undefined 0.5);
-webkit-box-shadow: inset 0 1px 0px rgba(255undefined255undefined255undefined0.4);
-moz-box-shadow: inset 0 1px 0px rgba(255undefined255undefined255undefined0.4);
box-shadow: inset 0 1px 0px rgba(255undefined255undefined255undefined0.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:-)


...