搜索

用CSS3制作Windows7开始菜单

04月13日
分类:前端 标签: 评论:[0]

CSS3让我们花更少的时间做更多的事，其强大让人叹止。windows7系统界面很华丽，现在看看我们用CSS3和一些ICON实现windows7的开始菜单。查看Demo

windows7 start menu Sketch

Container

staremenu包含两个无序的菜单链接，其中用到CSS3中的圆角，阴影，渐变！样式代码如下：

  1. #startmenu {
  2. border:solid 1px #838A44;
  3. overflow:visible;
  4. display:inline-block;
  5. margin:60px 0 0 20px;
  6. -moz-border-radius:5px;
  7. -webkit-border-radius:5px;
  8. position:relative;
  9. -moz-box-shadow: inset 0 0 1px #fff;
  10. -webkit-box-shadow: inset 0 0 1px #fff;
  11. background-color:#A5AF4C;
  12. background: -moz-linear-gradient(top, #E8EC4D, #869F03 50%, #697806);
  13. background: -webkit-gradient(linear, center top, center bottom, from(#E8EC4D),color-stop(45%, #869F03), to(#697806));
  14. }

Programs menu

program中用到CSS3中的圆角，阴影，渐变！样式代码如下：

  1. #programs {
  2. background:#fff;
  3. border:solid 1px #838A44;
  4. margin:7px 0 7px 7px;
  5. -moz-box-shadow: 0 0 1px #fff;
  6. -webkit-box-shadow: 0 0 1px #fff;
  7. -moz-border-radius:3px;
  8. -webkit-border-radius:3px;
  9. min-height:400px;
  10. }
  1. #programs a {
  2. border:solid 1px transparent;
  3. display:block;
  4. padding:3px;
  5. margin:3px;
  6. color:#4b4b4b;
  7. text-decoration:none;
  8. min-width:220px;
  9. }
  1. #programs a:hover {
  2. border:solid 1px #DDDE46;
  3. -moz-border-radius:5px;
  4. -webkit-border-radius:5px;
  5. -moz-box-shadow: inset 0 0 1px #fff;
  6. -webkit-box-shadow: inset 0 0 1px #fff;
  7. background-color:#cfe3fd;
  8. background: -moz-linear-gradient(top, #E5E64B, #B4C940);
  9. background: -webkit-gradient(linear, center top, center bottom, from(#E5E64B), to(#B4C940));}
  10. }
  1. #programs a img {
  2. border:0;
  3. vertical-align:middle;
  4. margin:0 5px 0 0;
  5. }

Links menu

Link menu比较简单，其中用到CSS3中的圆角，阴影，渐变！样式代码如下：

  1. #links li.icon {
  2. text-align:center;
  3. }
  1. #links a {
  2. border:solid 1px transparent;
  3. display:block;
  4. margin:5px 0;
  5. position:relative;
  6. color:#fff;
  7. text-decoration:none;
  8. min-width:120px;
  9. ｝
  1. #links a:hover {
  2. border:solid 1px #F2FF7F;
  3. -moz-border-radius:5px;
  4. -webkit-border-radius:5px;
  5. -moz-box-shadow: inset 0 0 1px #fff;
  6. -webkit-box-shadow: inset 0 0 1px #fff;
  7. background-color:#658da0;
  8. background: -moz-linear-gradient(center left, #CAD184, #747C2F 50%, #889044);
  9. background: -webkit-gradient(linear, 0% 100%, 100% 100%, from(#CAD184), color-stop(50%, #747C2F), to(#889044));
  10. ｝
  1. #links a span {
  2. padding:5px;
  3. display:block;
  4. ｝
  1. #links a:hover span {
  2. -moz-border-radius:5px;
  3. -webkit-border-radius:5px;
  4. background: -moz-linear-gradient(center top, transparent, transparent 49%, #6D7721 50%, #8E9542);
  5. background: -webkit-gradient(linear, center top, center bottom, from(transparent), color-stop(49%, transparent),
    color-stop(50%, #6D7721), to(#8E9542));
  6. ｝

win7 start menu

要点学习：

阴影

box-shadow：<length> <llength> <llength> <llength> || <lcolor> 

-moz-box-shadow: inset 0 0 1px #fff;

-webkit-box-shadow: inset 0 0 1px #fff;

圆角

border-radius ： none | <length>{1,4} [ / <length>{1,4} ]?

-moz-border-radius:5px;

-webkit-border-radius:5px;

背景渐变

-moz-linear-gradient( [<point> || &ltangle>,]? &ltstop>, &ltstop> [, &ltstop>]* )

-webkit-gradient(&lttype>, &ltpoint> [, &ltradius>]?, &ltpoint> [, &ltradius>]? [, &ltstop>]*)

background: -moz-linear-gradient(center top, transparent, transparent 49%, #6D7721 50%, #8E9542);

background: -webkit-gradient(linear, center top, center bottom, from(transparent), color-stop(49%, transparent),
                               color-stop(50%, #6D7721), to(#8E9542));

同学有话要说吗？