纯CSS打造银色MacBook Air

纯CSS打造银色MacBookAir（完整版）写在前面的前面前几天讲解了自己用纯CSS绘制银色MacBookAir的详细过程，由于篇幅较长就分了两部分介绍，今天我将其合二为一方便大家查看，该文章用Markdown+少量的html编辑。同时在用markdown的过程中发现，一些markdown语法在cnblog博文里面和直接在浏览器显示是有区别的，比如网址链接和引用，但是完全不影响使用和查看。为了让大家更好的查看，markdown中的所有链接我都用a标签进行了修饰，并没有使用markdown中的链接方式。写在前面前段时间自己用CSS绘制了一个银色的MacBookAir，今天把它从电脑硬盘深处挖了出来，我把我的思路和想法写下来和小伙伴们分享分享。先把最后的效果给大家。First注：如果图片显示过大没有完全显示，请F5或Ctrl+F5。Double注：本文为Markdown+少量html编辑。Triple注：祝愿小伙伴们每天都过得快乐。这其实是一个半成品，键盘上的其他图标和文字都还没有加，图标的话可以用font-face，待我找着合适的字体图标网址链接后给大家补全，同时也欢迎小伙伴们捣腾。小伙伴们也可以猛戳这里去Codepen上查看高清无码大图，给出链接：零、第零步这里使用了CSS的before、after伪元素、渐变gradient、阴影、nth-child选择器等相关内容，阴影和渐变效果从图片上可能看的不太清楚，小伙伴们可以去上面的Codepen上查看，文章的最后我会给出整个源代码，有兴趣的可以自己随意修改完善。Ok，开始肆无忌惮地进入。首先介绍一下绘制的结构。对于键盘，就是建立了一个无序列表ul，然后写上若干个li即可，其他的用几个div包裹即可，先给出HTML结构：1.divclass=board2.divclass=blackbar3.4./div5.divclass=keyboard6.ul7.8./ul9./div10.divclass=touch11.12./div13./div4个div加上2个伪元素，总共六个部分构成整个MacBookAir。board是MacBookAir的底座，blackbar是屏幕的那个黑色旋转轴，keyboard是键盘，touch是触控板；board:before是上面的盖子，border-bottom是盖子下面的那个黑色细长条。Ok，这六部分构成了整个MacBookAir。没图我说个什么：接下来，我按照我的绘制顺序一步步来介绍。口渴的小伙伴可以先去沏杯茶。一、第一步先给出HTML，下面是一段很长很长但是却没什么研究价值的无序列表，让滚轮飞起来吧：1.divclass=board2.divclass=blackbar3.4./div5.divclass=keyboard6.ul7.li/li8.li/li9.li/li10.li/li11.li/li12.li/li13.li/li14.li/li15.li/li16.li/li17.li/li18.li/li19.li/li20.li/li21.li/li22.lispan!/spanspan1/span/li23.lispan@/spanspan2/span/li24.lispan#/spanspan3/span/li25.lispan$/spanspan4/span/li26.lispan%/spanspan5/span/li27.lispan^/spanspan6/span/li28.lispan&/spanspan7/span/li29.lispan*/spanspan8/span/li30.lispan(/spanspan9/span/li31.lispan)/spanspan0/span/li32.lispan—/spanspan-/span/li33.lispan+/spanspan=/span/li34.li/li35.li/li36.liQ/li37.liW/li38.liE/li39.liR/li40.liT/li41.liY/li42.liU/li43.liI/li44.liO/li45.liP/li46.li/li47.li/li48.li/li49.li/li50.liA/li51.liS/li52.liD/li53.liF/li54.liG/li55.liH/li56.liJ/li57.liK/li58.liL/li59.li/li60.li/li61.li/li62.li/li63.liZ/li64.liX/li65.liC/li66.liV/li67.liB/li68.liN/li69.liM/li70.li/li71.li/li72.li/li73.li/li74.li/li75.li/li76.li/li77.li/li78.liByPureCSS.ToBeContinued./li79.li/li80.li/li81.li/li82.li/li83.li/li84.li/li85./ul86./div87.divclass=touch88.89./div90./div键盘按键为若干个li，其中按键上有两个符号的我用两个span包了起来，像这样：1.lispan!/spanspan1/span/li因为它们最后式一上一下的69体位，用span包裹住便于分别布置它们的位置。先绘制一个600*450的div，并将board居中，给一个银色的color，这里用的是rgb(210,210,210)，用border-radius绘制出四个20px的圆角，用box-shadow给出一个灰色的阴影，这里用的灰色是rgb(160,160,160)，小伙伴们可以自己选择合适的颜色，最后从div的左下角到右上角以60度添加一个线性渐变linear-gradient，是从白色开始从四分之一出过渡到灰色。因为之后的div会用到绝对定位，所以在此先把其父元素board定位为relative。完整的代码及效果如下：1..board{2.margin:0auto;3.padding:0auto;4.width:600px;5.height:450px;6.margin-top:50px;7.background:rgb(210,210,210);8.border-radius:20px;9.position:relative;10.box-shadow:0px5px6pxrgb(160,160,160);11.background:-webkit-linear-gradient(60deg,rgba(250,250,250,1)25%,rgba(210,210,210,1));12.}这样，一个有阴影和线性渐变过渡效果的面板就率先完成了。二、第二步接下来我要画笔记本盖子，用的是伪元素board:before。因为盖子是翻起来的，所以从上往下看是一个窄边。把board:before填充为780px*20px的div，背景颜色为灰色。实现及效果如下：1..board:before{2.content:'';3.display:block;4.width:780px;5.height:20px;6.background:rgb(210,210,210);7.}然后调一下位置，board:before定位为绝对定位，board宽600px，盖子宽780px，所以left=-(780-600)/2=-90px，top为board:before的高20px，顺带做出一个大弧形的效果，水平半径取大一些，垂直半径取小一些，likethis：border-top-left-radius:390px18px;border-top-right-radius:390px18px;对border-radius不太熟悉的小伙伴可以查看之前的《CSS3小分队——进击的border-radius》。此时的效果如下：有那么个意思了，为了做出立体的效果，我们给盖子从上到下加个渐变的过渡效果：background:-webkit-linear-gradient(top,rgb(210,210,210)50%,rgb(255,255,255));再顺带把屏幕下的那条小黑条加上，一句话很简单：border-bottom:2pxsolidrgb(0,0,0);看看效果先：有没有感觉某些地方有些违和？放大看一下这里：来个更加菊部的：对，就是这个小角处，给点效果：border-bottom:2pxsolidrgb(0,0,0);再看看效果：这样黑边那也有了小的光滑弧度过渡，显得更加自然。附上这一步的完整代码和效果：1..board:before{2.content:'';3.display:block;4.width:780px;5.height:20px;6.background:rgb(210,210,210);7.border-radius:0px0px3px3px;8.border-top-left-radius:390px18px;9.border-top-right-radius:390px18px;10.position:absolute;11.top:-20px;12.left:-90px;13.border-bottom:2pxsolidrgb(0,0,0);14.background:-webkit-linear-gradient(top,rgb(210,210,210)50%,rgb(255,255,255));15.}三、第三步这一步我们来做屏幕旋转轴，也就是屏幕下方的那条黑色矩形blackbar。同样先设置width和height，absolute定位，居中显示，移动的距离可以参考上面的方法小算一下就可以了，加上2px的圆角，为了显示出旋转轴立体的沟槽，我们给blackbar类的下边框和右边框加上2px的白色实线，同时给blackbar一个从上到下的渐变，中间显示出窄窄的亮丽的白色即可，颜色和过渡的位置小伙伴们可以自行了断，oops，是自行把握。实现和效果：1..blackbar{2.width:450px;3.height:18px;4.position:absolute;5.left:75px;6.border-radius:2px;7.border-bottom:2pxsolid#ffffff;/*小白边*/8.border-right:2pxsolid#ffffff;9.background:-webkit-linear-gradient(top,rgb(30,30,30),rgb(60,60,60)35%,rgb(100,100,100)50%,rgb(30,30,30)65%);10.background:-linear-gradient(top,rgb(