CSS3制作Windows7开始菜单

开发 前端
如果我们分解这个Windows 7开始菜单,我们会得到1个div,2个ul列表,1组链接以及一些icon小图标,我们可以一起来看看具体的效果。下面是简单的制作过程及部分代码

我对使用少量CSS3代码来实现很多效果这一过程非常的着迷,很多UI元素都需要用图片来展示其漂亮的外观,但是你可能不知道,单纯的CSS3代码也是可以实现的。下面我就用纯CSS3来制作Windows 7开始菜单(额外需要几个小图标),从而来证明这个观点。


纯CSS3制作的Windows7开始菜单

如果我们分解这个Windows 7开始菜单,我们会得到1个div,2个ul列表,1组链接以及一些icon小图标,我们可以一起来看看具体的效果。下面是简单的制作过程及部分代码

菜单容器(Container)

这个容器命名为startmenu ,里面包含了2个ul列表。同时用3种颜色实现线性渐变:顶部是浅蓝色,中间是深蓝色,底部是接近浅蓝色的其他颜色。接着用rgba()实现透明度,rgba()有四个参数,前3个表示红、绿、蓝,第4个表示透明度,两条边线使用了box-shadow属性。

  1. #startmenu { border:solid 1px #102a3e; overflow:visible; display:inline-block; margin:60px 0 0 20px;   
  2.              -moz-border-radius:5px;-webkit-border-radius:5px; position:relative;   
  3.              box-shadow: inset 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff;   
  4.              background-color:#619bb9;   
  5.              background: -moz-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75));   
  6.              background: -webkit-gradient(linear, center top, center bottom, from(#327aa4),color-stop(45%, #2e4b5a), to(#5cb0dc)); } 

程序菜单(Programs Menu)

这是一个白色背景的ul列表,两条边线用了border和box-shadow属性。程序链接包含了几个小图标以及程序名称,同时做了一个鼠标滑过渐变投影的效果。

  1. #programs, #links {float:left; display:block; padding:0; list-style:none;}   
  2. #programs { background:#fff; border:solid 1px #365167; margin:7px 0 7px 7px;   
  3.             box-shadow: 0 0 1px #fff; -moz-box-shadow: 0 0 1px #fff; -webkit-box-shadow: 0 0 1px #fff;   
  4.             -moz-border-radius:3px;-webkit-border-radius:3px;}   
  5. #programs a { border:solid 1px transparent; display:block; padding:3px; margin:3px;   
  6.               color:#4b4b4b; text-decoration:none; min-width:220px;}   
  7. #programs a:hover {border:solid 1px #7da2ce;   
  8.              -moz-border-radius:3px; -webkit-border-radius:3px;   
  9.              box-shadow: inset 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff;   
  10.              background-color:#cfe3fd;   
  11.              background: -moz-linear-gradient(top, #dcebfd, #c2dcfd);   
  12.              background: -webkit-gradient(linear, center top, center bottom, from(#dcebfd), to(#c2dcfd));}   
  13. #programs a img {border:0; vertical-align:middle; margin:0 5px 0 0;}  

链接菜单(Link Menu)

上面提到的链接菜单非常简单,但是这里我们可以做出更炫的鼠标滑过效果。每一个链接菜单都有3种颜色的水平渐变:左边和右边是深蓝色,中间用稍微淡一点的蓝色。现在,不像程序菜单中的链接那样,这个链接内部用<span>来包含菜单的文字,同时span元素还拥有多种垂直线性渐变。

  1. #links {margin:7px; margin-top:-30px;}   
  2. #links li.icon {text-align:center;}   
  3. #links a {border:solid 1px transparent; display:block; margin:5px 0; position:relative;   
  4.               color:#fff; text-decoration:none; min-width:120px;}   
  5. #links a:hover {border:solid 1px #000;   
  6.              -moz-border-radius:3px; -webkit-border-radius:3px;   
  7.              box-shadow: 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff;   
  8.              background-color:#658da0;   
  9.              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));   
  10.              background: -webkit-gradient(linear, 0% 100%, 100% 100%, from(#517384), color-stop(50%, #79a3b8), to(#517384));   
  11.              }   
  12. #links a span { padding:5px; display:block; }   
  13. #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));   
  14.             background: -webkit-gradient(linear, center top, center bottom, from(transparent), color-stop(49%, transparent),   
  15.             color-stop(50%, rgba(2,37,58,0.5)), to(rgba(63,111,135,0.5))); } 

下面是效果截图,你也可以去看在线示例和下载源码

这个CSS3制作的Windows 7开始菜单例子可以在Firefox 3.6+, Safari 和 Chrome浏览器中运行,Opera和IE中的效果就不行了,也许我可以继续优化一下,欢迎大家提出建议和意见。

责任编辑:张伟 来源: 玄意html5
相关推荐

2009-11-10 09:00:50

2011-08-18 18:20:35

windows7开始菜单

2009-09-09 08:43:36

Windows 7自定义开始菜单

2009-08-27 09:38:02

Windows 7开始菜单

2009-09-24 08:28:21

Windows 7新功能任务栏

2021-04-22 21:53:15

Windows 10Windows微软

2009-12-04 13:02:23

Windows 7开始

2011-08-09 15:51:52

Windows7开始菜单

2009-06-19 08:29:36

Windows 7微软操作系统

2021-08-30 05:37:33

Windows 11操作系统微软

2014-04-22 09:13:58

开始菜单Windows

2014-04-29 10:39:27

CSS3JavaScript

2011-09-28 09:10:51

Windows开始

2009-12-30 09:24:10

Windows 7系统菜单

2014-06-03 09:48:48

Windows 8.1开始菜单

2010-02-23 09:53:28

Windows 7开始菜单

2010-03-09 08:55:55

Windows 7IE还原

2014-01-09 11:28:21

Windows 9

2012-11-19 13:40:21

Windows 8

2013-07-23 09:37:24

Windows 8.1开始菜单
点赞
收藏

51CTO技术栈公众号