您的位置：首页 > Web前端 > CSS

[原]利用CSS3实现模拟一个windows7桌面的页面

2013-03-01 23:17 274 查看
利用CSS3的border-radius和box-shadow可以很容易的实现一个类似Windows7的桌面效果的页面，效果如图



主要是圆角的设计，透明设计，参考css3实战地5章的类容，马马虎虎做了一下午，只有样式，没有事件，一个html文件，一个css文件。源码以下：

simuWin7.html:

<html>
<head>
<title>用CSS3模拟Windows7的界面</title>
<link rel="stylesheet" href="./simuWin7.css" />
</head>
<body>
<!-- 桌面 -->
<div id="desktop">
<!-- 第一个窗口 -->
<div id="bgwindow" class="window first">
<span>窗口1</span>
<div class="control">
<button class="ctrl">-</button>
<button class="ctrl">O</button>
<button class="ctrl">X</button>
</div>
<div class="content">这是第一个窗口</div>
</div>

<!-- 窗口 -->

<div id="frontWindow" class="window">
<span>窗口2</span>

<div class="control">
<button class="ctrl">-</button>
<button class="ctrl">O</button>
<button class="ctrl">X</button>
</div>

<div id="winInput">
<input type="text" placeholder="hello world">
<input type="text"  placeholder="again">
</div>
<div id="winContent" class="content">这是第二个窗口的文本区域</div>
</div>

<!-- 开始菜单&工具栏 -->
<div id="startmenu">
<button id="winflag">Start</button>
<span id="tollBtn">
<button class="application">A</button>
<button class="application">B</button>
<button class="application">C</button>
<button class="application">D</button>
<button class="application">E</button>
<button class="application">F</button>
<button class="application">G</button>
<button class="application">H</button>
</span>
</div>

</div>

</body>
</html>


simuWin7.css：

body {
padding: 0;
margin: 0;
height: 100%;
}

/*background of desktop*/
#desktop {
background: #2c609b;
height: 100%;
width: 100%;
font: 12px "Segoe UI", Tahoma, sans-serif;
position: relative;
-moz-box-shadow: inset 0 -200px 100px #032b5c,
inset -100px 100px 100px #2073b5,
inset -100px 200px 100px #1f9bb1;
-webkit-box-shadow: inset 0 -200px 100px #032b5c,
inset -100px 100px 100px #2073b5,
inset -100px 200px 100px #1f9bb1;
box-shadow: inset 0 -200px 100px #032b5c,
inset -100px 100px 100px #2073b5,
inset -100px 200px 100px #1f9bb1;
overflow: hidden;
}

/*startmenu*/
#startmenu {
/*position*/
position: absolute;
bottom: 0;
/*size*/
height: 40px;
width: 100%;
background: rgba(178, 215, 255, 0.25);
-webkit-box-shadow: 0 -2px 20px rgba(0,0,0,0,25);
-moz-box-shadow: 0 -2px 20px rgba(0,0,0,0.25),
inset 0, 1px #042754,
inset 0 2px #5785b0;
box-shadow: 0 -2px 20px rgba(0,0,0,0.25),
inset 0, 1px #042754,
inset 0 2px #5785b0;
overflow: hidden;
}

#startmenu button {
font-size: 1.6em;
color: rgba(0,0,0,0.1);
margin-top: 6px;
text-shadow: 0px 0px 1px #00294b;
text-
}

/*startmenu*/
#startmenu #winflag {
float: left;
width: 60px;
height: 34px;
margin: 3px 8px;
/*padding: 0 auto 0;*/
background: #034a76;
border: none;
-moz-border-radius: 18px;
-webkit-border-radius: 18px;
border-radius: 18px;

-moz-box-shadow: 0 0 1px #34f,
0 0 3px #000,
0 0 3px #000;
-webkit-box-shadow: 0 0 1px #34f,
0 0 3px #000,
0 0 3px #000;
box-shadow: 0 0 1px #34f,
0 0 3px #000,
0 0 3px #000;
}

/*taskbar sheet*/
#startmenu .application {
position: relative;
height: 34px;
width: 60px;
bottom: 3px;
background:rgba(14, 59, 103, 0.25);
border: 1px solid rgba(0,0,0,0.6);
-webkit-border-radius: 4;
-moz-border-radius: 4;
border-radius: 4;
}

#startmenu .application:hover {
background-color: hsla(240,70%, 70%, 0.6);
}

#startmenu #winflag:hover {
background-color: hsla(150, 50%, 70%, 0.5);
}

/*window basic style*/
.window {
position: absolute;
left:150px;
top:100px;
width: 300px;
height: 400px;
padding: 8px;

/*特殊效果*/
border: 1px solid hsla(0,100%,0%,0.6);
background: rgba(178, 215, 255, 0.75);

-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;

/*shadow*/
-webkit-box-shadow: 0 2px 32px #000,
0 0 1px #000,
0 0 1px #000;
-moz-box-shadow: 0 2px 16px #000,
0 0 1px #000,
0 0 1px #000;

box-shadow: 0 2px 16px #000,
0 0 1px #000,
0 0 1px #000;

text-shadow: 0 0 10px #fff;
}

.window span {display: block;}

.window input {
width: 100px;
margin-right: 40px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;

-moz-box-shadow: 0 0 2px #fff,
0 0 1px #fff,
inset 0 0 3px #fff;
-webkit-box-shadow: 0 0 2px #fff,
0 0 1px #fff;
/*inset 0 0 3px #fff;*/
box-shadow: 0 0 2px #fff,
0 0 1px #fff,
inset 0 0 3px #fff;
}

.window winInput {margin-left: 12px;}

.window.first {
left:300px;
top: 180px;
opacity: 0.66;
}
.window span {margin-bottom:20px;}
.window.first span {margin-bottom: 60px;}

.window .content {
margin-top: 16px;
padding: 10px;
height:250px;
background: hsla(0, 0%, 100%, 0.6);
border: 1px, dotted, #000;

-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;

-webkit-box-shadow: 0 0 5px #fff,
0 0 1px #fff;
/*inset 0 1px 2px #aaa;*/
-moz-box-shadow: 0 0 5px #fff,
0 0 1px #fff,
inset 0 1px 2px #aaa;
box-shadow: 0 0 50px hsla(120, 90%, 60%, 0.7),
0 0 1px #fff,
inset 0 1px 2px #aaa;

text-shadow: none;
}

.window .control {
position: relative;
left: 220px;
top: -40px;
}

.window.first .control {top: -80px;}

.window .control .ctrl {
position: relative;
/*height: 34px;*/
width: 26px;
/*bottom: 3px;*/
background:rgba(14, 59, 103, 0.25);
border: 1px solid rgba(0,0,0,0.6);
-webkit-border-radius: 3;
-moz-border-radius: 3;
border-radius: 3;
}

.window .control .ctrl:hover {
background-color: hsla(240,70%, 80%, 0.6);
}


对于shadow的使用还有些难以把握，对于色彩的把握基本没什么方法，纯粹乱配，不过熟悉了一下hsl，hsla，rgba的基本用法，收获还是有的，以后要加强配色的感性认识。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航