I also have a MacBook Air - creating a silver MacBook Air with pure CSS (1)_html/css_WEB-ITnose

Previous article: "CSS3 Team??text clone text-shadow" Written before:

I used CSS to draw a silver MacBook Air some time ago, and today I drew it It was dug out from the depths of the computer hard drive, and I wrote down my thoughts and ideas to share with my friends. Let me show you the final effect first.

This is actually a semi-finished product. Other icons and text on the keyboard have not been added yet. For icons, you can use font-face. If you have the opportunity, I will complete it for everyone.

Friends can also go to codepen to view large high-definition uncensored pictures, here is the link:

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

Here CSS before, after pseudo-elements, gradient, shadow, nth-child selector and other related content are used. The shadow and gradient effects may not be clear from the picture. You can go to the codepen above to view the article. At the end, I will provide the entire source code, and those who are interested can modify and improve it at will.

Ok, let’s start entering.

For the keyboard, just create an unordered list ul, and then write a few li's, and wrap the others with a few divs. First give the HTML structure:

 1 <div class="board"> 2                    <div class="blackbar">                            3                    </div> 4                    <div class="keyboard"> 5  6                             <ul> 7                               ...        8                             </ul> 9 10                    </div>11                    <div class="touch">                      12                    </div>13 </div>    

4 divs plus 2 pseudo elements, a total of six parts make up the entire MacBook Air. board is the base of the MacBook Air, blackbar is the black rotation axis of the screen, keyboard is the keyboard, and touch is the trackpad; board:before is the cover above, and border-bottom is the black slender strip under the cover. Ok, these six parts make up the entire MacBook Air.

Let pictures speak for themselves:

Next, I will explain step by step in the order of my drawing. Friends, please keep watching~~~~~

1. Step 1

First give the HTML, and below is a very long code with nothing to see, let the scroll wheel fly Get up:

 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>

The keyboard keys are composed of several li's, and I wrapped the two symbols on the keys with two spans, like this:

1 <li><span>!</span><span>1</span></li>

Because their final positions are up and down and up and down (is it 69...), wrap them with span to arrange their positions.

First draw a 600*450 div, center the board, give it a silver color, here is rgb(210,210,210), use border-radius to draw four 20px rounded corners, and use box -shadow gives a gray shadow. The gray used here is rgb(160,160,160). You can choose the color according to what suits you. Finally, add a linear gradient at 60 degrees from the lower left corner to the upper right corner of the div. linear-gradient , starting from white and transitioning from a quarter out to gray. Because the subsequent div will use absolute positioning, its parent element board is positioned relative first. The complete code and effect are as follows:

 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 }

In this way, a panel with shadow and linear gradient transition effects is completed.

2. Step 2

Next I want to draw the notebook cover, which is the pseudo element board:before.

Because the lid is flipped up, it has a narrow edge when viewed from top to bottom. Fill board:before with a div of 780px*20px, and the background color is gray. The implementation and effect are as follows:

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

Then adjust the position. The board:before positioning is absolute positioning. The board is 600px wide and the lid is 780px wide, so left= -(780-600)/2=-90px, top is 20px higher than board:before, and by the way, it creates a large arc effect. The horizontal radius is larger and the vertical radius is smaller:

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

Friends who are not familiar with border-radius can check out the previous "CSS3 Squad?? Attack of border-radius".

The effect at this time is as follows:

It makes sense. In order to create a three-dimensional effect, we add a gradient transition effect from top to bottom to the lid. :

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

Then add the small black bar under the screen. One sentence is very simple:

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

Let’s take a look at the effect first:

Do you feel that something is inconsistent in some places? Zoom in and take a look here:

Let’s get a more asshole:

Yes, it’s this little corner, give it some effect:

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

Look at the effect again:

In this way, the black border also has a small arc transition, which looks more natural.

Attached is the complete code and effect of this step:

 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 }

Because the essay is long, it is divided into two parts. Today I will start with Talking about the first part, I will put the complete html and css at the end of the second part for download. You are welcome to modify it as you like.

Previous article: "CSS3 Team??text clone text-shadow"