上一篇:《CSS3小分队——text分身text-shadow》写在前面:前段时间自己用CSS绘制了一个银色的MacBook Air,今天把它从电脑硬盘深处挖了出来,我把我的思路和想法写下来和小伙伴们分享分享。先把最后的效果给大家。 这 ...
上一篇:《CSS3小分队——text分身text-shadow》
写在前面:
前段时间自己用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
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。