CSS3制作逼真苹果键盘效果教程

      前段时间，本站发布的css3绘制iphone6教程得到了大家的一致好评，更有朋友开玩笑说“这回终于不用卖肾了”。既然苹果产品如此受宠，那小编姐姐今天就再来一篇苹果系列的教程。

　　拿同期的产品来对照，苹果PC电脑就要比iphone6贵多了，所以今天我们学着绘制电脑，其中最为复杂的莫过于键盘了。

　　其实说白了，键盘的复杂之处也就在于按键的数量很多，布局麻烦。其实它们的样式基本一致，所以数量不是问题，至于布局，这里我们用无序列表ul，并以功能区为单位进行分组。

　　这么多个键，HTML基础代码会很长。受篇幅所限，教程中不展示每个按键的代码，只通过几个例子让大家了解整体结构。

　　我们发现，每个按键都有一个区分于其它按键的class，其格式均为“c+键盘代码”，这是意味着每个键有单独的样式吗？非也，它跟样式没有任何关系。这是因为原作者非常用心，在成品中加入了键盘监听事件，然后具体按下的键就通过“c+键盘代码”的方式获取，小编姐姐不得不佩服作者的耐性啊。

　　首先，最外层的Keyboard是个圆角的矩形，用CSS3的border-radius属性即可轻松实现。

　　我们为不同的圆角设置了不同的圆角半径，这是注重细节和追求品质的表现。而实际上，键盘4个角的半径确实不完全一样。

　　运行效果如下图所示

　　接下来，我们为键盘的底板设置适当的颜色。我们知道，苹果键盘底板不是个完全的平面。它的上下两侧都有一个比较小的斜面。

　　斜面属于轻微立体的结构，在二维世界里，通过渐变生成阴影即可让肉眼产生斜面的错觉。

　　越向下倾斜，受光就越弱，颜色就越暗，所以这个渐变应该是一个线性渐变，从深灰色过渡到浅灰色。

　　两行background-image的功能一致，不同前缀用于兼容不同的浏览器。

　　我们来看看-webkitgradient的参数。

　　第一个是linear，代表使用线性渐变。

　　第二个是leftbottom，代表渐变的起点在左下角。

　　第三个是lefttop，代表渐变的重点是左上角。

　　所以渐变的方向是自下而上。

　　后面的参数就是渐变点的设置了，以第一个点为例，0.27代表渐变的位置，起点处为0，终点处为1，0~1之间的其它数值代表起点和终点之间的位置，数值越小，越接近起点，反之越接近终点。

　　而rgb(212,216,219)就是颜色了，三个数值分别代表红，绿，蓝三种色光的反射量，取值范围在0~255之间。

　　运行效果如下图所示，上方的斜面感觉出来了

　　

　　下方的斜面比上方的斜面小，为了控制得更精确，我们换一个样式，通过内阴影来实现。

　　阴影样式为box-shadow，其格式如下

　　inset代表使用内阴影，默认为outset（外阴影），第二和第三个参数代表阴影跟元素本身之间的偏移量（分别是x和y），第四个参数8px代表阴影大小，第五个参数是阴影颜色。

　　为了加强整体效果，我们可以使用多个阴影，并且内外结合，多个阴影用英文逗号分隔。

　　对于苹果键盘来说，具体的代码如下所示

　　运行效果如下图所示

　　键盘底板美化完毕，但是那些按键的链接样式太难看。不过我们先把内部的边距调大，不然esc键就跑到斜面上了。

　　现在，按键不会跑到斜面上了

　　

　　美化列表的第一步，是先把前面的圆点去掉，并且让它们支持横向排列。

　　我们直接用元素选择器对页面上所有的列表进行样式设置。

　　

　　代码中，list-style-type=none代表列表项不显示任何图形，而li中的float:left则指示列表项通过左侧浮动的方式从左到右顺序排列。

　　运行效果如下图所示

　　“按键”总算横向排列了。

　　下面我们设置按键的样式，首先设置好大小，圆角半径，字体格式和背景颜色等基础属性。

　　由于是链接，所以我们需要通过text-decoration属性去掉下划线。

　　然后上面的“按键”都挤一块了，所以我们通过margin属性增大外边距，让各“按键”之间都留有一定的空隙。

　　运行效果如下图所示，按键的感觉出来了

　　

　　接下来，我们用类似的方法打造按键的立体感，但是按键的面积比键盘底板小多了，用渐变容易导致阴影区域太大，尺寸小的渐变又很难做得明显，所以这里直接给上边缘设置边框反而能得到更好的效果。

　　

　　至于阴影，我们可以沿用前面的box-shadow来做，主要是阴影较渐变细腻，再小的尺寸也能调出不错的效果。

　　具体的数值和颜色没有任何科学依据，都是设计师精雕细琢的结果，非常考验设计师的耐性和功力。

　　运行效果如下图所示

　   嘿嘿，很有苹果的感觉吧！　

      精益求精的设计师还继续为文字加上一点投影，让按键上的字有点凸起来的感觉。

　　文字投影用的是text-shadow属性。

　　key样式运用了大量的CSS3代码，早期版本的IE不支持。若要兼容旧版IE，我们可以再加一个IE专属的filter属性。

　　下面我们来添加点交互。本来按键在鼠标移过的时候不会触发效果，但为了让效果看起来更有动感，我们还是在hover伪类中加一下鼠标移上时的样式变化吧。

　　该样式只改变文字颜色，并不会产生凹下去的感觉，所以动感得来略显低调。

　　再次运行，鼠标移到按键上时，对应按键的字体颜色会略微加深，如下图的tab键所示。

　　接下来我们实现按下的效果

　　按下的特点是按键凹下去了，所以高度变小，另一方面，凹下去以后受光变弱，因此颜色变暗。

　　具体的颜色值，边距大小，都是经过多次测试微调出来的结果，跟前面的样式一样都很考设计师的耐性。

　　再次运行，就可以测试按下的效果了

　　这时候大家可能有个疑问，keydown并没有出现在HTML标签上啊，为啥会莫名其妙地出来这么一个类呢？这里就是小编最佩服作者的一个地方了。这个类是为了键盘事件而设的。

　　不过，由于键盘事件无法直接针对元素（毕竟键盘不是鼠标，没有位置的概念），所以原作者使用了一些简单的Javascript来实现，并引入jquery类库来简化元素的访问过程。

　　由于本教程的重点是CSS3，所以Javascript部分就不作详细解释了，而以代码注释代之。

　　配置好点的苹果电脑，价格动辄上万，往往能达到同期手机的两倍以上。所以说，这次课课家又帮大家节省了两个肾，你们是不是也应该多上论坛，分享点好东西来报答小编姐姐呢？