你的位置:首页 > 软件开发 > 网页设计 > 哥也有个MacBook Air——纯CSS打造银色MacBook Air(一)

哥也有个MacBook Air——纯CSS打造银色MacBook Air(一)

发布时间:2015-07-04 10:00:13
上一篇:《CSS3小分队——text分身text-shadow》写在前面:前段时间自己用CSS绘制了一个银色的MacBook Air,今天把它从电脑硬盘深处挖了出来,我把我的思路和想法写下来和小伙伴们分享分享。先把最后的效果给大家。 这 ...

上一篇:《CSS3小分队——text分身text-shadow》

写在前面:

前段时间自己用CSS绘制了一个银色的MacBook Air,今天把它从电脑硬盘深处挖了出来,我把我的思路和想法写下来和小伙伴们分享分享。先把最后的效果给大家。

 哥也有个MacBook Air——纯CSS打造银色MacBook Air(一)

这其实是一个半成品,键盘上的其他图标和文字都还没有加,图标的话可以用font-face,有机会的话把它补全给大家。

小伙伴们也可以去codepen上查看高清**大图,给出链接:

http://codepen.io/myvin/pen/yNezZR

这里使用了CSS的before、after伪元素、渐变gradient、阴影、nth-child选择器等相关内容,阴影和渐变效果从图片上可能看的不太清楚,小伙伴们可以去上面的codepen上查看,文章的最后我会给出整个源代码,有兴趣的可以自己随意修改完善。

Ok,开始进入。

对于键盘,就是建立了一个无序列表ul,然后写上若干个li即可,其他的用几个div包裹即可,先给出HTML结构:

 1 <div class="board"> 2          <div class="blackbar">               3          </div> 4          <div class="keyboard"> 5  6               <ul> 7                ...     8               </ul> 9 10          </div>11          <div class="touch">           12          </div>13 </div>  

原标题:哥也有个MacBook Air——纯CSS打造银色MacBook Air(一)

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。