纯CSS打造银色MacBook Air(完整版)

开发 前端
前几天讲解了自己用纯CSS绘制银色MacBook Air的详细过程,由于篇幅较长就分了两部分介绍,今天我将其合二为一方便大家查看,该文章用Markdown+少量的html编辑。

写在前面的前面

前几天讲解了自己用纯CSS绘制银色MacBook Air的详细过程,由于篇幅较长就分了两部分介绍,今天我将其合二为一方便大家查看,该文章用Markdown+少量的html编辑。

同时在用markdown的过程中发现,一些markdown语法在cnblog博文里面和直接在浏览器显示是有区别的,比如网址链接和引用,但是完全不影响使用和查看。为了让大家更好的查看,markdown中的所有链接我都用a标签进行了修饰,并没有使用markdown中的链接方式。

写在前面

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


First 注:如果图片显示过大没有完全显示,请F5或Ctrl+F5。

Double 注:本文为Markdown+少量html编辑。

Triple 注:祝愿小伙伴们每天都过得快乐。

这其实是一个半成品,键盘上的其他图标和文字都还没有加,图标的话可以用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.              
  4.         </div> 
  5.         <div class="keyboard"> 
  6.             <ul> 
  7.                  
  8.             </ul> 
  9.         </div> 
  10.         <div class="touch"> 
  11.              
  12.         </div> 
  13. </div> 

4个div加上2个伪元素,总共六个部分构成整个MacBook Air。board是MacBook Air的底座,blackbar是屏幕的那个黑色旋转轴,keyboard是键盘,touch是触控板;board:before是上面的盖 子,border-bottom是盖子下面的那个黑色细长条。Ok,这六部分构成了整个MacBook Air。

我说个什么:


接下来,我按照我的绘制顺序一步步来介绍。口渴的小伙伴可以先去沏杯茶。

一、***步

先给出HTML,下面是一段很长很长但是却没什么研究价值的无序列表,让滚轮飞起来吧: 

  1. <div class="board"
  2.         <div class="blackbar"
  3.              
  4.         </div> 
  5.         <div class="keyboard"
  6.             <ul> 
  7.                 <li></li> 
  8.                 <li></li> 
  9.                 <li></li> 
  10.                 <li></li> 
  11.                 <li></li> 
  12.                 <li></li> 
  13.                 <li></li> 
  14.                 <li></li> 
  15.                 <li></li> 
  16.                 <li></li> 
  17.                 <li></li> 
  18.                 <li></li> 
  19.                 <li></li> 
  20.                 <li></li> 
  21.                 <li></li> 
  22.                 <li><span>!</span><span>1</span></li> 
  23.                 <li><span>@</span><span>2</span></li> 
  24.                 <li><span>#</span><span>3</span></li> 
  25.                 <li><span>$</span><span>4</span></li> 
  26.                 <li><span>%</span><span>5</span></li> 
  27.                 <li><span>^</span><span>6</span></li> 
  28.                 <li><span>&</span><span>7</span></li> 
  29.                 <li><span>*</span><span>8</span></li> 
  30.                 <li><span>(</span><span>9</span></li> 
  31.                 <li><span>)</span><span>0</span></li> 
  32.                 <li><span>—</span><span>-</span></li> 
  33.                 <li><span>+</span><span>=</span></li> 
  34.                 <li></li> 
  35.                 <li></li> 
  36.                 <li>Q</li> 
  37.                 <li>W</li> 
  38.                 <li>E</li> 
  39.                 <li>R</li> 
  40.                 <li>T</li> 
  41.                 <li>Y</li> 
  42.                 <li>U</li> 
  43.                 <li>I</li> 
  44.                 <li>O</li> 
  45.                 <li>P</li> 
  46.                 <li></li> 
  47.                 <li></li> 
  48.                 <li></li> 
  49.                 <li></li> 
  50.                 <li>A</li> 
  51.                 <li>S</li> 
  52.                 <li>D</li> 
  53.                 <li>F</li> 
  54.                 <li>G</li> 
  55.                 <li>H</li> 
  56.                 <li>J</li> 
  57.                 <li>K</li> 
  58.                 <li>L</li> 
  59.                 <li></li> 
  60.                 <li></li> 
  61.                 <li></li> 
  62.                 <li></li> 
  63.                 <li>Z</li> 
  64.                 <li>X</li> 
  65.                 <li>C</li> 
  66.                 <li>V</li> 
  67.                 <li>B</li> 
  68.                 <li>N</li> 
  69.                 <li>M</li> 
  70.                 <li></li> 
  71.                 <li></li> 
  72.                 <li></li> 
  73.                 <li></li> 
  74.                 <li></li> 
  75.                 <li></li> 
  76.                 <li></li> 
  77.                 <li></li> 
  78.                 <li>By Pure CSS.To Be Continued.</li> 
  79.                 <li></li> 
  80.                 <li></li> 
  81.                 <li></li> 
  82.                 <li></li> 
  83.                 <li></li> 
  84.                 <li></li> 
  85.             </ul> 
  86.         </div> 
  87.         <div class="touch"
  88.              
  89.         </div> 
  90.     </div> 

键盘按键为若干个li,其中按键上有两个符号的我用两个span包了起来,像这样:

  1. <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

完整的代码及效果如下:

  1. .board{ 
  2.     margin: 0 auto; 
  3.     padding: 0 auto; 
  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: 0px 5px 6px rgb(160,160,160); 
  11.     background:-webkit-linear-gradient(60deg,rgba(250,250,250,125%,rgba(210,210,210,1)); 

这样,一个有阴影和线性渐变过渡效果的面板就率先完成了。

#p#

二、第二步

接下来我要画笔记本盖子,用的是伪元素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); 

然后调一下位置,board:before定位为绝对定位,board宽600px,盖子宽780px,所以left=- (780-600)/2=-90px,top为board:before的高20px,顺带做出一个大弧形的效果,水平半径取大一些,垂直半径取小一 些,like this:

border-top-left-radius: 390px 18px;
border-top-right-radius: 390px 18px;

对border-radius不太熟悉的小伙伴可以查看之前的《CSS3小分队——进击的border-radius》

此时的效果如下:

有那么个意思了,为了做出立体的效果,我们给盖子从上到下加个渐变的过渡效果:

background:-webkit-linear-gradient(top,rgb(210,210,210) 50%,rgb(255,255,255));

再顺带把屏幕下的那条小黑条加上,一句话很简单:

border-bottom: 2px solid rgb(0,0,0);

看看效果先:

有没有感觉某些地方有些违和?放大看一下这里:

来个更加菊部的:

对,就是这个小角处,给点效果:

border-bottom: 2px solid rgb(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: 0px 0px 3px 3px; 
  8.     border-top-left-radius: 390px 18px; 
  9.     border-top-right-radius: 390px 18px; 
  10.     position: absolute; 
  11.     top:-20px;  
  12.     left: -90px; 
  13.     border-bottom: 2px solid rgb(0,0,0);  
  14.     background:-webkit-linear-gradient(top,rgb(210,210,21050%,rgb(255,255,255)); 

#p#

三、第三步

这一步我们来做屏幕旋转轴,也就是屏幕下方的那条黑色矩形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: 2px solid #ffffff; /* 小白边 */ 
  8.     border-right: 2px solid #ffffff; 
  9.     background: -webkit-linear-gradient(top,rgb(30,30,30) ,rgb(60,60,6035%,rgb(100,100,10050%,rgb(30,30,3065%); 
  10.     background: -linear-gradient(top,rgb(30,30,30) ,rgb(60,60,6035%,rgb(100,100,10050%,rgb(30,30,3065%); 

#p#

四、第四步

接下来就是MacBook Air最显眼的部分了,那就是键盘部分,为什么显眼呢,因为它占的地儿***吧哈哈哈(不好笑的事也要大笑三声)。

在画键盘之前呢,小伙伴们***先算好整个键盘区域的大小,各个按键的大小和排列,否则到时候只能一点点重新调,很麻烦。好了,咱先把键盘区域画下来吧。

传统步骤,设置宽高,绝对定位,然后设置left、top居中,勾勒出1px solid 颜色为rgb(180,180,180)的border,8px的圆角,白色的背景颜色;

实现和效果如下:

  1. .keyboard{ 
  2.     position: absolute; 
  3.     width:530px; 
  4.     height: 216px; 
  5.     left: 35px; 
  6.     top: 35px; 
  7.     border: 1px solid rgb(180,180,180); 
  8.     border-radius: 8px; 
  9.     background:rgba(250,250,250,1); 

为了显示出立体的沟槽感,阴影又该出来了。我们用box-shadow给keyboard的四条边框添加四条内部inset阴影,关于box-shadow以后有机会再讲,先把实现和效果贴上:

box-shadow:2px 0px 2px rgb(180,180,180) inset,
0px 3px 3px rgb(180,180,180) inset,
-5px -0px 1px rgb(255,255,255) inset,
0px -3px 3px rgb(180,180,180) inset
;

雏形出来了,接下来就是一个个的nth-child了。让我们接着猛烈地荡起双桨吧。

五、第五步

就像前面提到的,我们***事先先计算好每个按键的大小和位置,做到心中有数,不至于到时候一片混乱,否则整个键盘就像东汉末年似的这一块儿那一块儿。

首先是一些常规的设置,去掉列表标志,margin、padding设置,列表的宽和高balabala,按照之前的计算,设置按键与按键的间距,大致排列下这么多个按键,并给按键添加4px的圆角,为了显示立体效果,加上一个border:

border: 1px solid rgb(70,70,70);

并四个边添加阴影:

box-shadow: 1px 0px 0px rgb(0,0,0),
0px 1px 0px rgb(0,0,0),
-1px 0px 0px rgb(0,0,0),
0px -1px 0px rgb(0,0,0)
;

附上代码和效果:

  1. ul,li{ 
  2.     list-style: none; 
  3.     margin:0 auto; 
  4.     padding:0 auto; 
  5.     display: block; 
  6.     font-family: "Vrinda"
  7.     -webkit-user-select: none; 
  8.     -moz-user-select: none; 
  9.     -ms-user-select: none; 
  10.     user-select: none; 
  11.  
  12. ul{ 
  13.     width:530px; 
  14.     margin-top: 8px; 
  15.     padding-left: 8px; 
  16.     /* border:2px solid black; */ 
  17.  
  18. li{ 
  19.     width:29px; 
  20.     height:29px; 
  21.     float: left; 
  22.     /* padding-left: 0px; */ 
  23.     margin-right: 5px; 
  24.     margin-bottom: 5px; 
  25.     background-color: rgb(30,30,30); 
  26.     color: rgb(200,200,200); 
  27.     text-align: center; 
  28.     line-height: 28px; 
  29.     font-size: 12px; 
  30.     border-radius: 4px; 
  31.     border: 1px solid rgb(70,70,70); 
  32.     box-shadow: 1px 0px 0px rgb(0,0,0), 
  33.     0px 1px 0px rgb(0,0,0), 
  34.     -1px 0px 0px rgb(0,0,0), 
  35.     0px -1px 0px rgb(0,0,0); 

看上去还很乱,连文本都溢出了,但是妈妈说过,心急吃不了热豆腐,慢慢来,保准等会就驯服得她服服帖帖的。

Tips:请用力记住父母的生日哦。

细心的小伙伴们会发现有一段代码,貌似不细心的也能发现,就是这段:

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

这是什么意思呢?先来看下不加这段代码的效果:

对,就是这一片的蓝色,当用鼠标去键盘上拖着选中的时候,那一个个的li就会被选中,添加这段代码就能还我们一片巧克力键盘了,就能还我们一个洁白的蓝天了。

洁白...的...蓝天...^o^

我们先把键盘最上面的那一排功能键先捣腾好。这里我们用nth-child来选择上面那一排我没数错数量应该是14个的功能键,并给它们简单设置样式。

实现和效果如下:

  1. li:nth-child(1),li:nth-child(2),li:nth-child(3),li:nth-child(4), 
  2. li:nth-child(5),li:nth-child(6),li:nth-child(7),li:nth-child(8), 
  3. li:nth-child(9),li:nth-child(10),li:nth-child(11),li:nth-child(12), 
  4. li:nth-child(13),li:nth-child(14){ 
  5.     width:30px; 
  6.     height:15px; 

接下来调整第二行的数字按键上的那些数字和符号的一上一下的69体位,同样先用nth-child选中再设置样式:

  1. li:nth-child(16) span,li:nth-child(17) span,li:nth-child(18) span,li:nth-child(19) span,li:nth-child(20) span, 
  2. li:nth-child(21) span,li:nth-child(22) span,li:nth-child(23) span,li:nth-child(24) span,li:nth-child(25) span, 
  3. li:nth-child(26) span,li:nth-child(27) span{ 
  4.     display: block; 
  5.     margin-top: 5px; 
  6.     line-height: 0.5;  

然后设置除了***的那四个方向键外的其他键的大小,很简单,算准写就行,要做一个心中有数的男人,这块直接贴代码:

  1. li:nth-child(28),li:nth-child(29){ 
  2.     width:45px; 
  3. li:nth-child(43),li:nth-child(55){ 
  4.     width:55px; 
  5. li:nth-child(56),li:nth-child(67){ 
  6.     width:73px; 
  7.     li:nth-child(68),li:nth-child(69),li:nth-child(70),li:nth-child(71), 
  8.     li:nth-child(72),li:nth-child(73),li:nth-child(74){ 
  9.     height:33px; 
  10. li:nth-child(72){ 
  11.     width:173px; 
  12. li:nth-child(71),li:nth-child(73){ 
  13.     width:37px; 

找个驿站半路休息下先,顺带看下效果:

除了四个方向键,其他的按键放置得还算可以,接着走。

四个方向键设置也很简单,设置宽高,定位即可,不罗嗦了,直接上:

  1. li:nth-child(75),li:nth-child(77),li:nth-child(78){ 
  2.     margin-top: 18px; 
  3.     height: 14px; 
  4.  
  5. li:nth-child(76){ 
  6.     height: 13px; 
  7.     margin-top: 19px; 
  8.  
  9. li:nth-child(78){ 
  10.     position: absolute; 
  11.     bottom: 22px; 
  12.     right:38px; 

效果:

恩,美感效果还在我的审美范围之内。

#p#

六、第六步

***一步就是触控板touch的绘制了,哈哈哈,终于要诺曼底登陆了,待我喝口菊花茶先。

触控板的绘制和键盘的绘制基本上是一样的,设置大小,定位,圆角,border即可。直接上:

  1. .touch{ 
  2.     position: absolute; 
  3.     width:200px; 
  4.     height:150px; 
  5.     border: 2px solid rgb(190,190,190); 
  6.     bottom: 23px; 
  7.     left: 200px; 
  8.     border-radius: 8px; 

七、小了个结

到这里,MacBook Air就算完成了,还是那句话,是个半成品,一些字体图标还待用font-face来完成,当然还可以添加些动画,让它像产品旋转来展示等等,这只是抛砖引玉而已,期待小伙伴们更多奇思妙想。小伙伴们有好的想法欢迎分享~~~ 

责任编辑:王雪燕 来源: 博客园
相关推荐

2020-11-11 00:40:35

云计算混合云私有云

2010-04-26 01:07:07

双线负载均衡

2020-11-01 17:01:00

Python字典开发

2022-09-06 14:57:27

物联网物联网安全

2010-09-14 14:07:56

2009-03-11 08:46:46

Chrome浏览器更新

2011-07-01 10:23:41

Ubuntu Qt Creator

2010-09-17 17:24:44

2009-06-04 07:47:54

Struts 2权威指源码

2011-09-19 16:17:02

Java

2017-07-19 16:17:53

2019-01-23 08:48:50

跨域协议端口

2017-07-20 10:35:51

2020-07-15 15:48:04

MacBook Air苹果产品线

2010-09-16 13:57:53

2010-09-28 12:56:33

2019-05-15 08:00:00

vue组件间通信前端

2011-07-02 14:03:12

Linux Qt

2010-09-28 13:56:08

2010-09-27 12:28:14

Windows快捷键漏
点赞
收藏

51CTO技术栈公众号