"Reprint" Html+css mimic windows 7 Desktop effects

A while ago in the garden saw an article "using CSS3 imitation window7 Start Menu", the article only uses CSS3 to achieve the Windows 7 Start menu Dynamic effect, has long been attracted by the scenery of Wpf/silverlight Mountain, Not chengxiang the other mountains are equally fascinating. So the whim also tried to do a Windows 7 desktop effect, first look at a few.

Desktop program mouse hover effect:

Task bar Program Mouse Hover effect:

Start Menu Effect:

Desktop program icons

The structure of the desktop background and program icons is as follows:

<div id="win">
    <ul id="app">
        <li>
            <a href="#">
            <img src="images/computer.png"><br />
            Computer</a>
        </li>
        <li>
            <a href="#">
            <img src="images/recycle.png"><br />
            Recycle Bin</a>
        </li>
        <li>
            <a href="#">
            <img src="images/network.png"><br />
            Network</a>
        </li>
    </ul>
</div>

Add a background image to your desktop <div>:

#win
{
    background-image: url(images/win7bg.jpg);
    background-position: center;
    width: 880px;
    height: 550px;
    border: #ffffff 1px solid;
}

Add a mouse hover dynamic effect to the Desktop app icon, Text-shadow to set the application text shadow effect,-webkit-border-radius to set the border fillet:

#app
{
    float: left;
    text-align: center;
    margin: -15px 0 0 -30px;
    list-style: none;
}

#app a
{
    text-decoration: none;
    border: solid 1px transparent;
    display: block;
    padding: 3px;
    margin: 20px 0 0 0;
    color: #ffffff;
    text-shadow: 0.2em 0.1em 0.3em #000000;
}

#app a:hover
{
    border: solid 1px #bbd6ec;
    -webkit-border-radius: 3px;
    box-shadow: inset 0 0 1px #fff;
    -webkit-box-shadow: inset 0 0 1px #fff;
    background-color: #5caae8;
}

Taskbar program icon

The following is the HTML code for the taskbar structure:

<div id="taskbar">
    <a href="#" id="start"></a>
    <a href="#" style="left: 60px">
        <img src="images/ie.png" />
    </a>
    <a href="#" style="left: 120px">
        <img src="images/library.png" />
    </a>
    <a href="#" style="left: 180px">
        <img src="images/mp.png" />
    </a>
    <a href="#" style="left: 240px">
        <img src="images/live.png" />
    </a>
    <a href="#" style="left: 300px">
        <img src="images/outlook.png" />
    </a>
    <div id="desktop"></div>
</div>

First of all, look at how the Start menu icon is set, through the hover Operation transform start.bmp display position, to achieve the icon glow effect.

#taskbar #start
{
    position: absolute;
    text-align: center;
    width: 57px;
    height: 46px;
    background: url(images/start.bmp) 0 -6px no-repeat;
}

#taskbar #start:hover
{
    text-decoration: none;
    background-position: 0 -114px;
}

The taskbar background is implemented by Taskbarbg.png, and the other icon hover effect highlights the icons below the icon by changing the position of the taskbarhover.png image.

#taskbar
{
    height: 42px;
    width: 880px;
    margin: -42px 0 0 1px;
    background: url(images/taskbarbg.png) no-repeat;
}

#taskbar img
{
    margin: 5px 0 0 0;
    width: 30px;
    height: 29px;
}

#taskbar a
{
    position: absolute;
    text-align: center;
    width: 57px;
    height: 46px;
    background: url(images/taskbarhover.png) 0 -46px no-repeat;
}

#taskbar a:hover
{
    background-position: 0 -3px;
}

	 

Start Menu

For the Start menu settings can refer to the previous article, this article on the basis of the addition of the menu split line and transparency effect.

<div id="menuwin">
    <div id="startmenu"></div>
    <ul id="programs">
        <li><a href="#">
            <img src="images/ie.png" />Internet Explorer</a></li>
        <li><a href="#">
            <img src="images/mc.png" />Microsoft Media Center</a></li>
        <li>
            <div id="leftspliter"></div></li>
        <li><a href="#">
            <img src="images/word.png" />Microsoft Word 2010</a></li>
        <li><a href="#">
            <img src="images/excel.png" />Microsoft Excel 2010</a></li>
        <li><a href="#">
            <img src="images/powerpoint.png" />Microsoft PowerPoint 2010</a></li>
        <li><a href="#">
            <img src="images/access.png" />Microsoft Access 2010</a></li>
        <li><a href="#">
            <img src="images/update.png" />Windows Update</a></li>
        <li>
            <div id="leftspliter"></div></li>
        <li><a href="#">
            <img src="images/narrow.png" />All Programs</a></li>
        <li>
            <img id="search" src="images/search.png" /></li>
    </ul>
    <ul id="links">
        <li class="icon"><img src="images/user.png" /></li>
        <li><a href="#"><span>Documents</span></a></li>
        <li><a href="#"><span>Pictures</span></a></li>
        <li><a href="#"><span>Music</span></a></li>
        <li><div id="rightspliter"></div></li>
        <li><a href="#"><span>Games</span></a></li>
        <li><a href="#"><span>Computer</span></a></li>
        <li><div id="rightspliter"></div></li>
        <li><a href="#"><span>Control Panel</span></a></li>
        <li><a href="#"><span>Devices and Printers</span></a></li>
        <li><a href="#"><span>Default Programs</span></a></li>
    </ul>
</div>

The Start menu sets its transparency through opacity:

#startmenu
{
    border: solid 1px #102a3e;
    overflow: visible;
    display: block;
    float: left;
    height: 404px;
    width: 400px;
    opacity: 0.9;
    -webkit-border-radius: 5px;
    position: absolute;
    box-shadow: inset 0 0 1px #ffffff;
    -webkit-box-shadow: inset 0 0 1px #ffffff;
    background-color: #619bb9;
    background: -webkit-gradient(linear, center top, center bottom, from(#327aa4),color-stop(45%, #2e4b5a), to(#5cb0dc));
}

Complete the Start menu open/close effect with jquery (Common.js)

$(document).ready(function () {
    $("#start").click(function () {
        $("#menuwin").css("display", "block");
    });
    $("#win").click(function () {
        $("#menuwin").css("display", "none");
    });
    $("#desktop").click(function () {
        $("#menuwin").css("display", "none");
    });
});

Source code Download

Please use Chrome to browse