专栏名称: 程序员大咖
为程序员提供最优质的博文、最精彩的讨论、最实用的开发资源;提供最新最全的编程学习资料:PHP、Objective-C、Java、Swift、C/C++函数库、.NET Framework类库、J2SE API等等。并不定期奉送各种福利。
目录
相关文章推荐
程序员小灰  ·  深夜王炸,微信搜索:接入 DeepSeek ... ·  2 天前  
程序猿  ·  微信+DeepSeek来了! ·  2 天前  
程序员小灰  ·  DeepSeek 被放弃了,阿里牛逼!!! ·  4 天前  
程序猿  ·  DeepSeek ... ·  3 天前  
51好读  ›  专栏  ›  程序员大咖

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

程序员大咖  · 公众号  · 程序员  · 2017-01-30 20:02

正文

作者:Myvim

www.cnblogs.com/myvin/p/4621231.html


写在前面


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




这其实是一个半成品,键盘上的其他图标和文字都还没有加,图标的话可以用font-face,待我找着合适的字体图标网址链接后给大家补全,同时也欢迎小伙伴们捣腾。


零、第零步


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


Ok,开始肆无忌惮地进入。


首先介绍一下绘制的结构。


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


class = "board" >

class = "blackbar" >

class = "keyboard" >

class = "touch" >


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


没图我说个什么:



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


一、第一步


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


class = "board" >

class = "blackbar" >

class = "keyboard" >

  • ! 1
  • @ 2
  • # 3
  • $ 4
  • % 5
  • ^ 6
  • & 7
  • * 8
  • ( 9
  • ) 0
  • -
  • + =
  • Q

  • W

  • E

  • R

  • T

  • Y

  • U

  • I

  • O

  • P

  • A

  • S

  • D

  • F

  • G

  • H

  • J

  • K

  • L

  • Z

  • X

  • C

  • V

  • B

  • N

  • M

  • By Pure CSS.To Be Continued.

class = "touch" >


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


  • ! 1

  • 因为它们最后式一上一下的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));

    }



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


    二、第二步


    接下来我要画笔记本盖子,用的是伪元素board:before。


    因为盖子是翻起来的,所以从上往下看是一个窄边。把board:before填充为780px*20px的div,背景颜色为灰色。


    实现及效果如下:


    .board:before{

    content: '';

    display: block;

    width: 780px;

    height: 20px;

    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 ;


    此时的效果如下:



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


    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);


    再看看效果:



    这样黑边那也有了小的光滑弧度过渡,显得更加自然。


    附上这一步的完整代码和效果:


    .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));

    }



    三、第三步


    这一步我们来做屏幕旋转轴,也就是屏幕下方的那条黑色矩形blackbar。


    同样先设置width和height,absolute定位,居中显示,移动的距离可以参考上面的方法小算一下就可以了,加上2px的圆角,为了显示出旋转轴立体的沟槽,我们给blackbar类的下边框和右边框加上2px的白色实线,同时给blackbar一个从上到下的渐变,中间显示出窄窄的亮丽的白色即可,颜色和过渡的位置小伙伴们可以自行了断,oops,是自行把握。


    实现和效果:


    .blackbar{

    width: 450px;

    height: 18px;

    position: absolute;

    left: 75px;

    border-radius: 2px;

    border-bottom: 2px solid #ffffff; /* 小白边 */

    border-right: 2px solid #ffffff;

    background: -webkit-linear-gradient(top,rgb(30,30,30) ,rgb(60,60,60) 35%,rgb(100,100,100) 50%,rgb(30,30,30) 65%);

    background: -linear-gradient(top,rgb(30,30,30) ,rgb(60,60,60) 35%,rgb(100,100,100) 50%,rgb(30,30,30) 65%);

    }



    四、第四步


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


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


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


    实现和效果如下:


    .keyboard{

    position: absolute;

    width:530px;

    height: 216px;

    left: 35px;

    top: 35px;

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

    border-radius: 8px;

    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







    请到「今天看啥」查看全文