Brother also has a MacBook Air-creating silver MacBook Air with pure CSS (I) and cssmacbook

Brother also has a MacBook Air-creating silver MacBook Air with pure CSS (I) and cssmacbook
Previous Article: CSS3 team -- text separation text-shadowPreface:

Some time ago I used CSS to draw a silver MacBook Air. Today I dug it out of the hard drive of my computer. I wrote down my ideas and shared them with my friends. First, give the final effect to everyone.

 

This is actually a semi-finished product. Other icons and text on the keyboard have not yet been added. You can use font-face to complete the icons if you have the opportunity.

Friends can also go to codepen to view the big picture without high definition code and give the link:

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

Here we use the before, after pseudo elements of CSS, gradient, shadow, nth-child selector, and other related content. The shadow and gradient effects are not clear in the image, friends can go to the above codepen to view it. At the end of the article, I will provide the entire source code. If you are interested, you can modify and improve it at will.

OK.

For the keyboard, an unordered list ul is created, and then several li characters are written. For others, use a few div packages. The HTML structure is given first:

 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>    

Add two pseudo elements to the four Divs. A total of six parts constitute the entire MacBook Air. The board is the base of the MacBook Air, the blackbar is the black rotation axis of the screen, the keyboard is the keyboard, the touch is the touchpad, and the board: before is the lid on the screen, border-bottom is the black strip below the lid. OK. These six parts constitute the entire MacBook Air.

Use graphs to speak:

 

Next, I will draw them step by step. Let's take a look ~~~~~

Step 1.

Let's give the HTML first. Below is a long and long piece of code with nothing to see. Let's fly the scroll wheel:

 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 key is a number of li, and I use two span packages with two symbols on the key, like this:

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

Because their final positions are one to one (69 .....), Wrap them in a span.

First draw a div of 600*450 and center the board to a silver color. Here we use rgb (210,210,210) and use border-radius to draw four 20 PX rounded corners, use box-shadow to give a gray shadow. Here, the gray color is rgb (160,160,160). You can choose the color based on your needs, finally, add a linear gradient linear-gradient at 60 degrees from the lower left corner of the div to the upper right corner, which is the transition from the white to the gray from the 1/4. Because the subsequent div will use absolute positioning, the parent element board is located as relative first. The complete code and effects 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 effect is completed.

Step 2

Next I want to draw a notebook lid, that is, the pseudo-element board: before.

Because the lid is raised, it is a narrow side from the top down. Fill the 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 }

 

Next, adjust the position. The board: before is positioned as absolute positioning, the board Width is 600px, and the lid width is 780px. Therefore, left =-(780-600)/2 =-90px, and top is board: before is 20 PX high, and a large arc shape is created along the belt. 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;

If you are not familiar with border-radius, you can view the previous "CSS3 team-attacking border-radius".

The effect is as follows:

 

So interesting, in order to make a three-dimensional effect, we add a gradient transition effect to the cover from top to bottom:

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

Add the black one on the screen along the belt. A sentence is very simple:

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

Look at the effect first:

 

Is there any sense of violation in some places? Zoom in to see here:

 

To make it more chrysanthemum:

 

Yes, this is the small angle, to give the effect:

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

Let's look at the effect:

 

In this way, the Black edge also has a small radian transition, which is more natural.

The complete code and effects of this step are attached:

 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 of the long essays, I have divided them into two parts. Let's talk about the first part today. The complete html and css will be placed at the end of the second part for download. You are welcome to modify them at will.

Previous Article: CSS3 team -- text separation text-shadow