基于css3仿造window7的开始菜单
发布时间：2010-06-17 22:36:12 作者：佚名 
我要评论
我要评论相当逼真，css3果然强悍。要留意的点依旧是哪几项，难点在于细节的微调，尤其是渐变背景的制作，css3中非常灵活，下次有机会，发篇css3渐变背景的详细教程。
相当逼真，css3果然强悍。
友情提示：请勿在IE下浏览。
来看下原作者的设计草图： 
简明创建过程
第一步 ：创建如下菜单结构
复制代码
代码如下:<div id="startmenu">
<ul id="programs">
<li><a href="#"><img src="firefox-32.png" alt="" />Mozilla Firefoxa></li>
<li><a href="#"><img src="chrome.png" alt="" />Google Chromea></li>
<li><a href="#"><img src="safari.png" alt="" />Safaria></li>
<li><a href="#"><img src="opera.png" alt="" />Operaa></li>
<li><a href="#"><img src="ie.png" alt="" />Internet Explorera></li>
<li><a href="#"><img src="rss_32.png" alt="" />RSS Feedsa></li>
<li><a href="#"><img src="twitter_32.png" alt="" />Twittera></li>
<li><a href="#"><img src="delicious_32.png" alt="" />Deliciousa></li>
<ul>
<ul id="links">
<li class="icon"><img src="folder.png" alt="" /></li>
<li><a href="#"><span>Documentsspan>a></li>
<li><a href="#"><span>Picturesspan>a></li>
<li><a href="#"><span>Musicspan>a></li>
<li><a href="#"><span>Computerspan>a></li>
<li><a href="#"><span>Networkspan>a></li>
<li><a href="#"><span>Connect tospan>a></li>
<ul>
div>
win7的开始菜单有二个部分，左侧程序菜单，右侧系统菜单。
第二步：菜单容器css
复制代码
代码如下:#startmenu { border:solid 1px #102a3e; overflow:visible; display:inline-block; margin:60px 0 0 20px;
-moz-border-radius:5px;-webkit-border-radius:5px; position:relative;
box-shadow: inset 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff;
background-color:#619bb9;
background: -moz-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75));
background: -webkit-gradient(linear, center top, center bottom, from(#327aa4),color-stop(45%, #2e4b5a), to(#5cb0dc)); }
有几个关注的点,可以留意下：
-moz-border-radius:5px;-webkit-border-radius:5px;圆角效果，这是css3中应用最广的
box-shadow: inset 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff;阴影效果
background: -moz-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75));渐变背景
第三步：菜单左侧部分的css
复制代码
代码如下:#programs { background:#fff; border:solid 1px #365167; margin:7px 0 7px 7px;
box-shadow: 0 0 1px #fff; -moz-box-shadow: 0 0 1px #fff; -webkit-box-shadow: 0 0 1px #fff;
-moz-border-radius:3px;-webkit-border-radius:3px;}
#programs a { border:solid 1px transparent; display:block; padding:3px; margin:3px;
color:#4b4b4b; text-decoration:none; min-width:220px;}
#programs a:hover {border:solid 1px #7da2ce;
-moz-border-radius:3px; -webkit-border-radius:3px;
box-shadow: inset 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-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));}
#programs a img {border:0; vertical-align:middle; margin:0 5px 0 0;}
这里值得留意的是鼠标经过菜单项的效果设置，也就是#programs a:hover里的样式，这是难点，也是css3的强大之处，依旧是圆角、阴影、渐变背景。
第四步：菜单右侧的CSS部分
复制代码
代码如下:#links {margin:7px; margin-top:-30px;}
#links li.icon {text-align:center;}
#links a {border:solid 1px transparent; display:block; margin:5px 0; position:relative;
color:#fff; text-decoration:none; min-width:120px;}
#links a:hover {border:solid 1px #000;
-moz-border-radius:3px; -webkit-border-radius:3px;
box-shadow: 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff;
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));
}
#links a span { padding:5px; display:block; }
#links 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))); }
要留意的点依旧是哪几项，难点在于细节的微调，尤其是渐变背景的制作，css3中非常灵活，下次有机会，发篇css3渐变背景的详细教程。
英文原文：http://www.jankoatwarpspeed.com/post/2010/04/06/windows-7-start-menu-css3.aspx
代码打包下载(请不要在IE下测试)
相关文章
- CSS3的@media查询功能允许我们根据不同的媒体类型和设备特性来应用不同的样式规则,,本文详细探讨了@media查询的定义、语法、使用场景及注意事项,旨在帮助开发者更好地理解2024-10-17
CSS3 新特性 box-shadow 阴影效果、圆角border-radius效果实现
CSS3的border-radius属性可以轻松制作圆角效果,支持一至四个值来分别定义四个角的圆角大小,一个值时所有角圆角相同,两个值时对角线上的角相同,本文给大家介绍CSS3 新特性 b2024-10-17- CSS3动画为网页设计带来了丰富的动态效果，使得页面更加生动和吸引人,然而，有时我们希望动画在结束时保持最终状态，而不是回到初始状态,本文将介绍几种方法来实现这一效果2024-10-15
伪元素和伪类都增强了CSS选择器的功能,但它们有明显的区别,伪元素通过::表示,如::before和::after,用于向元素添加或修改内容,伪类则通过:表示,如:hover和:first-child,用于2024-10-15- 本文介绍了使用CSS3实现各种样式效果的方法,包括文字渐变、圆角、阴影、多重背景等,通过实例代码,展示了如何简洁有效地增强网页视觉效果,无需额外图像或复杂脚本,适合前端2024-09-13
在Web开发中，动态滚动播放列表能够提升用户体验，使内容展示更加生动有趣,本文介绍了如何仅使用CSS3实现一个基础的循环播放列表，其中关键技术包括@keyframes规则和animat2024-09-11
之前有做过一个需求，安卓端嵌H5页面，实现语音输入并包含输入时动画，跳动的小球，多个小球同时跳动，相对定位需要left不相同，其次每个小球动画开始有时间差，其次就是小2024-08-29
详解CSS3 边框样式(包含border-radius、border-image与box-shadow)
这篇文章主要介绍了CSS3 边框样式(包含border-radius、border-image与box-shadow)的相关知识，本文给大家介绍的非常详细，,需要的朋友可以参考下2024-08-29
这篇文章主要介绍了css3 使用box-shadow实现浮雕风格按钮效果，本文通过实例代码给大家介绍的非常详细，感兴趣的朋友跟随小编一起看看吧2024-08-19
CSS3在CSS2的基础上，新增了很多强大的新功能，从而解决一些实际面临的问题，本篇文章主要讲解的为CSS3新增背景属性和新增边框属性，感兴趣的朋友一起看看吧2024-08-14
最新评论