纯CSS打造银色MacBook Air(一)
2015-07-04 09:30
627 查看
上一篇:《CSS3小分队——text分身text-shadow》
写在前面:
前段时间自己用CSS绘制了一个银色的MacBook Air,今天把它从电脑硬盘深处挖了出来,我把我的思路和想法写下来和小伙伴们分享分享。先把最后的效果给大家。![](http://images.cnblogs.com/cnblogs_com/myvin/710118/o_MacBook%20Air.png)
这其实是一个半成品,键盘上的其他图标和文字都还没有加,图标的话可以用font-face,有机会的话把它补全给大家。
小伙伴们也可以去codepen上查看高清无码大图,给出链接:
http://codepen.io/myvin/pen/yNezZR
这里使用了CSS的before、after伪元素、渐变gradient、阴影、nth-child选择器等相关内容,阴影和渐变效果从图片上可能看的不太清楚,小伙伴们可以去上面的codepen上查看,文章的最后我会给出整个源代码,有兴趣的可以自己随意修改完善。
Ok,开始进入。
对于键盘,就是建立了一个无序列表ul,然后写上若干个li即可,其他的用几个div包裹即可,先给出HTML结构:
<div class="board"> <div class="blackbar"> </div> <div class="keyboard"> <ul> ... </ul> </div> <div class="touch"> </div> </div>
4个div加上2个伪元素,总共六个部分构成整个MacBook Air。board是MacBook Air的底座,blackbar是屏幕的那个黑色旋转轴,keyboard是键盘,touch是触控板;board:before是上面的盖子,border-bottom是盖子下面的那个黑色细长条。Ok,这六部分构成了整个MacBook Air。
用图来说话:
![](http://images0.cnblogs.com/blog2015/779193/201507/032205112231019.png)
接下来,我按照我的绘制顺序一步步来说。小伙伴们赏个脸看下去啊啊啊~~~~~
一、第1步
先给出HTML,下面是一段很长很长但是却没什么可看的代码,让滚轮飞起来吧:<div class="board"> <div class="blackbar"> </div> <div class="keyboard"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li><span>!</span><span>1</span></li> <li><span>@</span><span>2</span></li> <li><span>#</span><span>3</span></li> <li><span>$</span><span>4</span></li> <li><span>%</span><span>5</span></li> <li><span>^</span><span>6</span></li> <li><span>&</span><span>7</span></li> <li><span>*</span><span>8</span></li> <li><span>(</span><span>9</span></li> <li><span>)</span><span>0</span></li> <li><span>—</span><span>-</span></li> <li><span>+</span><span>=</span></li> <li></li> <li></li> <li>Q</li> <li>W</li> <li>E</li> <li>R</li> <li>T</li> <li>Y</li> <li>U</li> <li>I</li> <li>O</li> <li>P</li> <li></li> <li></li> <li></li> <li></li> <li>A</li> <li>S</li> <li>D</li> <li>F</li> <li>G</li> <li>H</li> <li>J</li> <li>K</li> <li>L</li> <li></li> <li></li> <li></li> <li></li> <li>Z</li> <li>X</li> <li>C</li> <li>V</li> <li>B</li> <li>N</li> <li>M</li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li>By Pure CSS.To Be Continued.</li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <div class="touch"> </div> </div>
键盘按键为若干个li,其中按键上有两个符号的我用两个span包了起来,像这个:
<li><span>!</span><span>1</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。完整的代码及效果如下:
.board{ margin: 0 auto; padding: 0 auto; width: 600px; height: 450px; margin-top: 50px; background: rgb(210,210,210); border-radius: 20px; position: relative; box-shadow: 0px 5px 6px rgb(160,160,160); background:-webkit-linear-gradient(60deg,rgba(250,250,250,1) 25%,rgba(210,210,210,1)); }
![](http://images0.cnblogs.com/blog2015/779193/201507/032210098135895.png)
这样,一个有阴影和线性渐变过渡效果的面板就完成了。
二、第2步
接下来我要画笔记本盖子,就是伪元素board:before。因为盖子是翻起来的,所以从上往下看是一个窄边。把board:before填充为780px*20px的div,背景颜色为灰色。实现及效果如下:
.board:before{ content: ''; display: block; width: 780px; height: 20px; background: rgb(210,210,210); }
![](http://images0.cnblogs.com/blog2015/779193/201507/032210534617363.png)
然后调一下位置,board:before定位为绝对定位,board宽600px,盖子宽780px,所以left=-(780-600)/2=-90px,top为board:before的高20px,顺带做出一个大弧形的效果,水平半径取大一些,垂直半径取小一些:
border-top-left-radius: 390px 18px; border-top-right-radius: 390px 18px;
对border-radius不太熟悉的小伙伴可以查看之前的《CSS3小分队——进击的border-radius》。
此时的效果如下:
![](http://images0.cnblogs.com/blog2015/779193/201507/032211415553071.png)
有那么个意思了,为了做出立体的效果,我们给盖子从上到下加个渐变的过渡效果:
background:-webkit-linear-gradient(top,rgb(210,210,210) 50%,rgb(255,255,255));
再顺带把屏幕下的那条小黑条加上,一句话很简单:
border-bottom: 2px solid rgb(0,0,0);
看看效果先:
![](http://images0.cnblogs.com/blog2015/779193/201507/032212376569927.png)
有没有感觉某些地方有些违和?放大看一下这里:
![](http://images0.cnblogs.com/blog2015/779193/201507/032212566983414.png)
来个更加菊部的:
![](http://images0.cnblogs.com/blog2015/779193/201507/032213137232945.png)
对,就是这个小角处,给点效果:
border-bottom: 2px solid rgb(0,0,0);
再看看效果:
![](http://images0.cnblogs.com/blog2015/779193/201507/032213414994195.png)
这样黑边那也有了小的弧度过渡,显得更加自然。
附上这一步的完整代码和效果:
.board:before{ content: ''; display: block; width: 780px; height: 20px; background: rgb(210,210,210); border-radius: 0px 0px 3px 3px; border-top-left-radius: 390px 18px; border-top-right-radius: 390px 18px; position: absolute; top:-20px; left: -90px; border-bottom: 2px solid rgb(0,0,0); background:-webkit-linear-gradient(top,rgb(210,210,210) 50%,rgb(255,255,255)); }
![](http://images0.cnblogs.com/blog2015/779193/201507/032214364907725.png)
因为随笔较长,所以分了两部分,今天先谈第一部分,完整的html和css我会放在第二部分的最后提供下载,欢迎大家随意修改。
下一篇:《纯CSS打造银色MacBook Air(二)》
相关文章推荐
- 【经验】在CSS中定义a:link、a:visited、a:hover、a:active顺序
- 【经验】在CSS中定义a:link、a:visited、a:hover、a:active顺序
- 安卓学习之计算器样式
- CSS使用示例
- CSS3实战
- CSS透明属性详解代码
- CSS透明属性详解代码
- 利用CSS3实现气泡效果的教程
- CSS动画
- 禁止鼠标右键,图片延迟加载,css笔记
- 高自由度样式JQ图片滚动特效源码
- css3--网页横向四等分(display:box)
- Css控制网页变灰
- css盒子模型
- 【css3实践】position遇到一点小问题待解决
- 2. CSS 结构
- CSS clip:rect矩形剪裁功能及一些应用介绍
- CSS HACK技术
- css 字体 清晰
- CSS知识总结之设计模式(持续学习中)