純CSS打造銀色MacBook Air（完整版）
上一篇：《selection僞元素小解》
做者主頁：myvin
博主QQ：851399101（點擊QQ和博主發起臨時會話）html
寫在前面的前面
前幾天講解了本身用純CSS繪製銀色MacBook Air的詳細過程，因爲篇幅較長就分了兩部分介紹，今天我將其合二爲一方便你們查看，該文章用Markdown+少許的html編輯。web
同時在用markdown的過程當中發現，一些markdown語法在cnblog博文裏面和直接在瀏覽器顯示是有區別的，好比網址連接和引用，可是徹底不影響使用和查看。爲了讓你們更好的查看，markdown中的全部連接我都用a標籤進行了修飾，並無使用markdown中的連接方式。瀏覽器
寫在前面
前段時間本身用CSS繪製了一個銀色的MacBook Air，今天把它從電腦硬盤深處挖了出來，我把個人思路和想法寫下來和小夥伴們分享分享。先把最後的效果給你們。
markdown
First 注：若是圖片顯示過大沒有徹底顯示，請Command+R(Ctrl+F5)。函數
Double 注：本文爲Markdown+少許html編輯。oop
Triple 注：祝願小夥伴們天天都過得快樂。字體
這實際上是一個半成品，鍵盤上的其餘圖標和文字都尚未加，圖標的話能夠用font-face，待我找着合適的字體圖標網址連接後給你們補全，同時也歡迎小夥伴們搗騰。動畫
小夥伴們也能夠猛戳這裏去Codepen上查看高清無碼大圖，給出連接：ui
http://codepen.io/myvin/pen/yNezZRthis
零、第零步
這裏使用了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。
沒圖我說個什麼：
接下來，我按照個人繪製順序一步步來介紹。口渴的小夥伴能夠先去沏杯茶。
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><span>{</span><span>[</span></li>
<li><span>}</span><span>]</span></li>
<li><span>|</span><span>\</span></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><span>:</span><span>;</span></li>
<li><span>"</span><span>'</span></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><span><</span><span>,</span></li>
<li><span>></span><span>.</span></li>
<li><span>?</span><span>/</span></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));
}
這樣，一個有陰影和線性漸變過渡效果的面板就率先完成了。
2、第二步
接下來我要畫筆記本蓋子，用的是僞元素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;
對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);
再看看效果：
這樣黑邊那也有了小的光滑弧度過渡，顯得更加天然。
附上這一步的完整代碼和效果：
.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));
}
3、第三步
這一步咱們來作屏幕旋轉軸，也就是屏幕下方的那條黑色矩形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%);
}
4、第四步
接下來就是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了。讓咱們接着猛烈地蕩起雙槳吧。
5、第五步
就像前面提到的，咱們最好事先先計算好每一個按鍵的大小和位置，作到心中有數，不至於到時候一片混亂，不然整個鍵盤就像東漢末年似的這一起那一起。
首先是一些常規的設置，去掉列表標誌，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);
附上代碼和效果:
ul,li{
list-style: none;
margin:0 auto;
padding:0 auto;
display: block;
font-family: "Vrinda";
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
ul{
width:530px;
margin-top: 8px;
padding-left: 8px;
/* border:2px solid black; */
}
li{
width:29px;
height:29px;
float: left;
/* padding-left: 0px; */
margin-right: 5px;
margin-bottom: 5px;
background-color: rgb(30,30,30);
color: rgb(200,200,200);
text-align: center;
line-height: 28px;
font-size: 12px;
border-radius: 4px;
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);
}
看上去還很亂，連文本都溢出了，可是媽媽說過，心急吃不了熱豆腐，慢慢來，保準等會就馴服得她服服帖帖的。
Tips：請用力記住父母的生日哦。
細心的小夥伴們會發現有一段代碼，貌似不細心的也能發現，就是這段：
-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
這是什麼意思呢？先來看下不加這段代碼的效果：
對，就是這一片的藍色，當用鼠標去鍵盤上拖着選中的時候，那一個個的li就會被選中，添加這段代碼就能還咱們一片巧克力鍵盤了，就能還咱們一個潔白的藍天了。
潔白...的...藍天...^o^
咱們先把鍵盤最上面的那一排功能鍵先搗騰好。這裏咱們用nth-child來選擇上面那一排我沒數錯數量應該是14個的功能鍵，並給它們簡單設置樣式。
這裏使用鏈式寫法，實現和效果以下：
li:nth-child(-n+14):nth-child(n+1){
width:30px;
height:15px;
}
接下來調整第二行的數字按鍵上的那些數字和符號的一上一下的69體位，一樣先用nth-child選中再設置樣式：
li:nth-child(-n+27):nth-child(n+16) span,li:nth-child(40) span,li:nth-child(41) span,li:nth-child(42) span,
li:nth-child(53) span,li:nth-child(54) span,li:nth-child(-n+66):nth-child(n+64) span{
display: block;
margin-top: 5px;
line-height: 0.5;
}
而後設置除了最後的那四個方向鍵外的其餘鍵的大小，很簡單，算準寫就行，要作一個心中有數的男人，這塊直接貼代碼：
li:nth-child(28),li:nth-child(29){
width:45px;
}
li:nth-child(43),li:nth-child(55){
width:55px;
}
li:nth-child(56),li:nth-child(67){
width:73px;
}
li:nth-child(-n+74):nth-child(n+68){
height:33px;
}
li:nth-child(72){
width:173px;
}
li:nth-child(71),li:nth-child(73){
width:37px;
}
找個驛站半路休息下先，順帶看下效果：
除了四個方向鍵，其餘的按鍵放置得還算能夠，接着走。
四個方向鍵設置也很簡單，設置寬高，定位便可，不羅嗦了，直接上：
li:nth-child(75),li:nth-child(77),li:nth-child(78){
margin-top: 18px;
height: 14px;
}
li:nth-child(76){
height: 13px;
margin-top: 19px;
}
li:nth-child(78){
position: absolute;
bottom: 22px;
right:38px;
}
效果：
恩，美感效果還在個人審美範圍以內。
6、第六步
最後一步就是觸控板touch的繪製了，哈哈哈，終於要諾曼底登錄了，待我喝口菊花茶先。
觸控板的繪製和鍵盤的繪製基本上是同樣的，設置大小，定位，圓角，border便可。直接上：
.touch{
position: absolute;
width:200px;
height:150px;
border: 2px solid rgb(190,190,190);
bottom: 23px;
left: 200px;
border-radius: 8px;
}
7、小了個結
到這裏，MacBook Air就算完成了，仍是那句話，是個半成品，一些字體圖標還待用font-face來完成，固然還能夠添加些動畫，讓它像產品旋轉來展現等等，這只是拋磚引玉而已，期待小夥伴們更多奇思妙想。小夥伴們有好的想法歡迎分享~~~
做者：myvin
原文出處：http://www.cnblogs.com/myvin/p/4621231.html
CodePen源碼地址：http://codepen.io/myvin/pen/yNezZR
轉載請記得說明做者和出處哦-.-
下一篇：《函數聲明和函數表達式——函數聲明的聲明提早》
- 1. 純CSS打造銀色MacBook Air（完整版）
- 2. 純CSS打造Chrome瀏覽器
- 3. 純 `css` 打造一個小提示 `tooltip`
- 4. Macbook air 上打開cocoscreator出錯
- 5. 純HTML+CSS打造輪播圖
- 6. 銀色 MacBook Pro 13.3筆記本
- 7. html&css筆記完整版
- 8. CSS居中完整版
- 9. css3 製做簡易MacBook Air
- 10. MacBook Air網絡問題
- 更多相關文章...
- • PHP 完整表單實例 - PHP教程
- • CSS 指南 - 網站建設指南
- • YAML 入門教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
-
每一个你不满意的现在，都有一个你没有努力的曾经。