自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

純CSS打造銀色MacBook Air（完整版）

作者：myvin
開發(fā) 前端
前幾天講解了自己用純CSS繪制銀色MacBook Air的詳細(xì)過程，由于篇幅較長就分了兩部分介紹，今天我將其合二為一方便大家查看，該文章用Markdown+少量的html編輯。

寫在前面的前面

前幾天講解了自己用純CSS繪制銀色MacBook Air的詳細(xì)過程，由于篇幅較長就分了兩部分介紹，今天我將其合二為一方便大家查看，該文章用Markdown+少量的html編輯。

同時在用markdown的過程中發(fā)現(xiàn)，一些markdown語法在cnblog博文里面和直接在瀏覽器顯示是有區(qū)別的，比如網(wǎng)址鏈接和引用，但是完全不影響使用和查看。為了讓大家更好的查看，markdown中的所有鏈接我都用a標(biāo)簽進(jìn)行了修飾，并沒有使用markdown中的鏈接方式。

寫在前面

前段時間自己用CSS繪制了一個銀色的MacBook Air，今天把它從電腦硬盤深處挖了出來，我把我的思路和想法寫下來和小伙伴們分享分享。先把***的效果給大家。


First 注：如果圖片顯示過大沒有完全顯示，請F5或Ctrl+F5。

Double 注：本文為Markdown+少量html編輯。

Triple 注：祝愿小伙伴們每天都過得快樂。

這其實是一個半成品，鍵盤上的其他圖標(biāo)和文字都還沒有加，圖標(biāo)的話可以用font-face，待我找著合適的字體圖標(biāo)網(wǎng)址鏈接后給大家補全，同時也歡迎小伙伴們搗騰。

小伙伴們也可以猛戳這里去Codepen上查看高清無碼大圖，給出鏈接：

http://codepen.io/myvin/pen/yNezZR

零、第零步

這里使用了CSS的before、after偽元素、漸變gradient、陰影、nth-child選擇器等相關(guān)內(nèi)容，陰影和漸變效果從圖片上可能看的不太清楚，小伙伴們可以去上面的Codepen上查看，文章的***我會給出整個源代碼，有興趣的可以自己隨意修改完善。

Ok，開始肆無忌憚地進(jìn)入。

首先介紹一下繪制的結(jié)構(gòu)。

對于鍵盤，就是建立了一個無序列表ul，然后寫上若干個li即可，其他的用幾個div包裹即可，先給出HTML結(jié)構(gòu)：

  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個偽元素，總共六個部分構(gòu)成整個MacBook Air。board是MacBook Air的底座，blackbar是屏幕的那個黑色旋轉(zhuǎn)軸，keyboard是鍵盤，touch是觸控板；board:before是上面的蓋 子，border-bottom是蓋子下面的那個黑色細(xì)長條。Ok，這六部分構(gòu)成了整個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,1) 25%,rgba(210,210,210,1)); 
  12. } 

這樣，一個有陰影和線性漸變過渡效果的面板就率先完成了。

#p#

二、第二步

接下來我要畫筆記本蓋子，用的是偽元素board:before。

因為蓋子是翻起來的，所以從上往下看是一個窄邊。把board:before填充為780px*20px的div，背景顏色為灰色。

實現(xiàn)及效果如下：

  1. .board:before{ 
  2.     content: ''; 
  3.     display: block; 
  4.     width: 780px; 
  5.     height: 20px; 
  6.     background: rgb(210,210,210); 
  7. } 

然后調(diào)一下位置，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小分隊——進(jìn)擊的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,210) 50%,rgb(255,255,255)); 
  15. } 

#p#

三、第三步

這一步我們來做屏幕旋轉(zhuǎn)軸，也就是屏幕下方的那條黑色矩形blackbar。

同樣先設(shè)置width和height，absolute定位，居中顯示，移動的距離可以參考上面的方法小算一下就可以了，加上2px的圓角，為了顯 示出旋轉(zhuǎn)軸立體的溝槽，我們給blackbar類的下邊框和右邊框加上2px的白色實線，同時給blackbar一個從上到下的漸變，中間顯示出窄窄的亮 麗的白色即可，顏色和過渡的位置小伙伴們可以自行了斷，oops，是自行把握。

實現(xiàn)和效果：

  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,60) 35%,rgb(100,100,100) 50%,rgb(30,30,30) 65%); 
  10.     background: -linear-gradient(top,rgb(30,30,30) ,rgb(60,60,60) 35%,rgb(100,100,100) 50%,rgb(30,30,30) 65%); 
  11. } 

#p#

四、第四步

接下來就是MacBook Air最顯眼的部分了，那就是鍵盤部分，為什么顯眼呢，因為它占的地兒***吧哈哈哈（不好笑的事也要大笑三聲）。

在畫鍵盤之前呢，小伙伴們***先算好整個鍵盤區(qū)域的大小，各個按鍵的大小和排列，否則到時候只能一點點重新調(diào)，很麻煩。好了，咱先把鍵盤區(qū)域畫下來吧。

傳統(tǒng)步驟，設(shè)置寬高，絕對定位，然后設(shè)置left、top居中，勾勒出1px solid 顏色為rgb(180,180,180)的border，8px的圓角，白色的背景顏色；

實現(xiàn)和效果如下：

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

為了顯示出立體的溝槽感，陰影又該出來了。我們用box-shadow給keyboard的四條邊框添加四條內(nèi)部inset陰影，關(guān)于box-shadow以后有機會再講，先把實現(xiàn)和效果貼上：

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了。讓我們接著猛烈地蕩起雙槳吧。

五、第五步

就像前面提到的，我們***事先先計算好每個按鍵的大小和位置，做到心中有數(shù)，不至于到時候一片混亂，否則整個鍵盤就像東漢末年似的這一塊兒那一塊兒。

首先是一些常規(guī)的設(shè)置，去掉列表標(biāo)志，margin、padding設(shè)置，列表的寬和高balabala，按照之前的計算，設(shè)置按鍵與按鍵的間距，大致排列下這么多個按鍵，并給按鍵添加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.  
  13. ul{ 
  14.     width:530px; 
  15.     margin-top: 8px; 
  16.     padding-left: 8px; 
  17.     /* border:2px solid black; */ 
  18. } 
  19.  
  20. li{ 
  21.     width:29px; 
  22.     height:29px; 
  23.     float: left; 
  24.     /* padding-left: 0px; */ 
  25.     margin-right: 5px; 
  26.     margin-bottom: 5px; 
  27.     background-color: rgb(30,30,30); 
  28.     color: rgb(200,200,200); 
  29.     text-align: center; 
  30.     line-height: 28px; 
  31.     font-size: 12px; 
  32.     border-radius: 4px; 
  33.     border: 1px solid rgb(70,70,70); 
  34.     box-shadow: 1px 0px 0px rgb(0,0,0), 
  35.     0px 1px 0px rgb(0,0,0), 
  36.     -1px 0px 0px rgb(0,0,0), 
  37.     0px -1px 0px rgb(0,0,0); 
  38. } 

看上去還很亂，連文本都溢出了，但是媽媽說過，心急吃不了熱豆腐，慢慢來，保準(zhǔn)等會就馴服得她服服帖帖的。

Tips：請用力記住父母的生日哦。

細(xì)心的小伙伴們會發(fā)現(xiàn)有一段代碼，貌似不細(xì)心的也能發(fā)現(xiàn)，就是這段：

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

這是什么意思呢？先來看下不加這段代碼的效果：

對，就是這一片的藍(lán)色，當(dāng)用鼠標(biāo)去鍵盤上拖著選中的時候，那一個個的li就會被選中，添加這段代碼就能還我們一片巧克力鍵盤了，就能還我們一個潔白的藍(lán)天了。

潔白...的...藍(lán)天...^o^

我們先把鍵盤最上面的那一排功能鍵先搗騰好。這里我們用nth-child來選擇上面那一排我沒數(shù)錯數(shù)量應(yīng)該是14個的功能鍵，并給它們簡單設(shè)置樣式。

實現(xiàn)和效果如下：

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

接下來調(diào)整第二行的數(shù)字按鍵上的那些數(shù)字和符號的一上一下的69體位，同樣先用nth-child選中再設(shè)置樣式：

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

然后設(shè)置除了***的那四個方向鍵外的其他鍵的大小，很簡單，算準(zhǔn)寫就行，要做一個心中有數(shù)的男人，這塊直接貼代碼：

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

找個驛站半路休息下先，順帶看下效果：

除了四個方向鍵，其他的按鍵放置得還算可以，接著走。

四個方向鍵設(shè)置也很簡單，設(shè)置寬高，定位即可，不羅嗦了，直接上：

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

效果：

恩，美感效果還在我的審美范圍之內(nèi)。

#p#

六、第六步

***一步就是觸控板touch的繪制了，哈哈哈，終于要諾曼底登陸了，待我喝口菊花茶先。

觸控板的繪制和鍵盤的繪制基本上是一樣的，設(shè)置大小，定位，圓角，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; 
  9. } 

七、小了個結(jié)

到這里，MacBook Air就算完成了，還是那句話，是個半成品，一些字體圖標(biāo)還待用font-face來完成，當(dāng)然還可以添加些動畫，讓它像產(chǎn)品旋轉(zhuǎn)來展示等等，這只是拋磚引玉而已，期待小伙伴們更多奇思妙想。小伙伴們有好的想法歡迎分享~~~ 

責(zé)任編輯：王雪燕 來源： 博客園
CSSMacBook Air
相關(guān)推薦

2020-11-11 00:40:35

云計算混合云私有云

2010-04-26 01:07:07

雙線負(fù)載均衡

2020-11-01 17:01:00

Python字典開發(fā)

2022-09-06 14:57:27

物聯(lián)網(wǎng)物聯(lián)網(wǎng)安全

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

2017-07-20 10:35:51

2019-01-23 08:48:50

跨域協(xié)議端口

2009-06-04 07:47:54

Struts 2權(quán)威指源碼

2011-09-19 16:17:02

Java

2017-07-19 16:17:53

2020-07-15 15:48:04

MacBook Air蘋果產(chǎn)品線

2010-09-28 12:56:33

2010-09-16 13:57:53

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技術(shù)棧公眾號