html教程之css3网页制造实例:仿Apple.com的导航栏

HTML5TheMediaCaptureAPI提供了对摄像头的可编程访问，用户可以直接用getUserMedia获得摄像头提供的视频流。我们需要做的是添加一个HTML5的Video标签破洛洛文章简介：CSS3网页制造实例:仿Apple.com的导航栏
apple的官网有个相称不错的头部导航，明天我们使用css3的常识，不借助一张图片，来完成相似的效果。
下载源文件：http://www.pouoluo.com/files/soft/1_121211104404.zip
1.会用到的css3常识

• text-shadow：笔墨暗影
  
• border-radius：圆角
  
• box-shadow：容器暗影
  
• box-shadow:inset：当增添inset后，暗示利用内暗影
  
• gradient：突变，突变的代码仍是良多的，侥幸的是网上有主动天生突变的工具，请看CSS3GradientGenerator
  
• keyframes：这个属性就对照成心思，估量用的人很少，用于共同css3动画，了解为动画模块或一组css3动画设置。只要WebKit内核的扫瞄器撑持这一特征，经由明河考证firefox4也不撑持。
  

2.上一坨代码…

2.1导航容器款式

• /*导航*/
  
• #appleNav{
  
• margin:40px0;
  
• list-style:none;
  
• /*Apple利用Lucida字体*/
  
• font-family:"LucidaSansUnicode","LucidaGrande",Verdana,Arial,Helvetica,sans-serif;
  
• letter-spacing:-0.5px;
  
• font-size:13px;
  
• /*笔墨暗影*/
  
• text-shadow:0-1px3px#202020;
  
• 
  
• width:873px;
  
• height:34px;
  
• /*圆角*/
  
• -moz-border-radius:4px;
  
• -webkit-border-radius:4px;
  
• border-radius:4px;
  
• /*暗影*/
  
• -moz-box-shadow:03px3px#cecece;
  
• -webkit-box-shadow:03px3px#cecece;
  
• box-shadow:03px4px#8b8b8b;
  
• }
  

2.2导航子元素款式

• #appleNavli{
  
• display:block;
  
• float:left;
  
• border-right:1pxsolid#5d5d5d;
  
• border-left:1pxsolid#929292;
  
• width:105px;
  
• height:34px;
  
• border-bottom:1pxsolid#575757;
  
• border-top:1pxsolid#797979;
  
• /*突变背景，关于css3突变效果制造请看http://gradients.glrzad.com/*/
  
• background-image:-webkit-gradient(linear,leftbottom,lefttop,color-stop(0,#787878),color-stop(0.5,#5E5E5E),color-stop(0.51,#707070),color-stop(1,#838383));
  
• background-image:-moz-linear-gradient(centerbottom,#7878780%,#5E5E5E50%,#70707051%,#838383100%);
  
• background-color:#5f5f5f;
  
• }
  
• /*鼠标滑过菜单位素后*/
  
• #appleNavli:hover{
  
• background-image:-webkit-gradient(linear,leftbottom,lefttop,color-stop(0,#3F3F3F),color-stop(0.5,#383838),color-stop(0.51,#434343),color-stop(1,#555555));
  
• background-image:-moz-linear-gradient(centerbottom,#3F3F3F0%,#38383850%,#43434351%,#555555100%);
  
• background-color:#383838;
  
• 
  
• /*增添内暗影效果*/
  
• -moz-box-shadow:inset005px5px#535353;
  
• -webkit-box-shadow:inset005px5px#535353;
  
• box-shadow:inset005px5px#535353;
  
• }
  
• /*鼠标按下菜单位素后*/
  
• #appleNavli:active{
  
• background-image:-webkit-gradient(linear,leftbottom,lefttop,color-stop(0,#3F3F3F),color-stop(0.5,#383838),color-stop(0.51,#434343),color-stop(1,#555555));
  
• background-image:-moz-linear-gradient(centerbottom,#3F3F3F0%,#38383850%,#43434351%,#555555100%);
  
• background-color:#383838;
  
• 
  
• -moz-box-shadow:inset01px2px2px#000;
  
• -webkit-box-shadow:inset01px2px2px#000;
  
• box-shadow:inset01px2px2px#000;
  
• }
  

寄望内暗影部分的处置。
2.3容器向下滑动的动画效果

• /*Webkit内核的扫瞄器增添动画效果*/
  
• @-webkit-keyframesshowMenu{
  
• from{opacity:0;top:-20px;}
  
• to{opacity:1;}
  
• }
  
• 
  
• #appleNav{
  
• -webkit-animation:showMenu1s;
  
• position:relative;
  
• }
  

</p>
这不是理想状况。我们必须尽可能把精力放在改善这项规范，把耗费在派系相争的精力降到最低。