当前位置:天才代写 > tutorial > 网页教程 > CSS3制作逼真苹果键盘效果教程

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

2018-05-17 08:00 星期四 所属: 网页教程 浏览:755

      前段时间,本站发布的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键就跑到斜面上了。

调整内部边距代码

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

  键盘底板效果图

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

#p#分页标题#e#

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

  美化列表代码

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

  运行效果如下图所示

运行效果图

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

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

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

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

设置按键样式代码

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

  效果图

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

  设置上边框代码

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

设置阴影代码

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

  运行效果如下图所示

效果图

    嘿嘿,很有苹果的感觉吧! 

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

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

设置文字投影代码

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

兼容IE代码

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

添加交互代码

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

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

tab键所示

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

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

实现按下效果代码

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

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

效果图

#p#分页标题#e#

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

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

使用Javascript的代码

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

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

 

    关键字:

天才代写-代写联系方式