Shulou(Shulou.com)06/02 Report--

This article focuses on "how to use CSS to create silver MacBook Air", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to use CSS to create silver MacBook Air.

First Note: if the picture is too large to be fully displayed, please F5 or Ctrl+F5.

Double Note: this article is edited by a small number of html for Markdown+.

Triple Note: I wish my friends a happy day.

This is actually a semi-finished product, other icons and text on the keyboard have not been added, icons can be used font-face, when I find the appropriate font icon URL link for you to complete, at the same time, friends are also welcome to tamper with.

Zero, zero step

Here the use of CSS before, after pseudo-elements, gradient gradient, shadow, nth-child selector and other related content, shadow and gradient effects may not be seen clearly from the picture, friends can go to the above Codepen to check, the article * I will give the entire source code, interested can modify and improve at will.

Ok, begin to enter unscrupulously.

First of all, introduce the structure of the drawing.

For the keyboard, you can create an unordered list ul, then write several li, and the rest can be wrapped in several div, first giving the HTML structure:

Four div plus two pseudo elements, a total of six parts make up the entire MacBook Air. Board is the base of MacBook Air, blackbar is the black axis of rotation of the screen, keyboard is the keyboard, and touch is the trackpad; board:before is the top lid, and border-bottom is the thin black strip under the lid. Ok, these six parts make up the whole MacBook Air.

There's no picture. I'll say something:

Next, I will introduce it step by step in the order in which I draw. Thirsty friends can make a cup of tea first.

1. * steps

Let's start with HTML. Here's a long, unordered list with little research value. Let the wheels fly:

! 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.

The keyboard keys are several li, of which I wrapped the keys with two symbols in two span, like this:

! 1

Because they have 69 positions above and below, they are wrapped in span so that they can be arranged separately.

First draw a 600x450 div, and center the board, give a silver color, here use rgb (210210210), use border-radius to draw four 20px fillets, use box-shadow to give a gray shadow, here the gray is rgb (160160160), friends can choose the appropriate color, * add a linear gradient linear-gradient with 60 degrees from the lower left corner of the div to the upper right corner It starts with white and transitions from 1/4 to gray. Because absolute positioning is used in later div, the parent element board is positioned as relative here.

The complete code and effect are as follows:

.board {margin: 0 auto; padding: 0 auto; width: 600px; height: 450px; margin-top: 50px; background: rgb (210210210); border-radius: 20px; position: relative; box-shadow: 0px 5px 6px rgb (160160160); background:-webkit-linear-gradient (60degdegrba) 25% cogba (210));}

In this way, a panel with shaded and linear gradient transitions is the first to complete.

Second, step two

Next I'm going to draw the notebook lid, using the pseudo element board:before.

Because the lid is turned over, it is a narrow edge from top to bottom. Fill board:before with the div of 780px*20px, and the background color is gray.

The realization and effect are as follows:

.board: before {content:'; display: block; width: 780px; height: 20px; background: rgb (210210210);}

Then adjust the position. Board:before is positioned as absolute positioning, board wide 600px, lid wide 780px, so left=- (780,600) / 2mm left=- 90px top is the high 20px of board:before, making a large arc effect by the way, with a larger horizontal radius and a smaller vertical radius, like this:

Border-top-left-radius: 390px 18px

Border-top-right-radius: 390px 18px

Friends who are not familiar with border-radius can check out the previous "CSS3 team-attacking border-radius".

The effect is as follows:

It makes sense that in order to create a three-dimensional effect, we add a gradual transition effect to the lid from top to bottom:

Background:-webkit-linear-gradient (top,rgb (210210210) 50% dint RGB (255255255))

By the way, add the little black bar under the screen, and the sentence is very simple:

Border-bottom: 2px solid rgb (0je 0je 0)

Let's see the effect first:

Do you feel that there is some discord in some places? Zoom in and look at this:

Let's have a more chrysanthemum:

Yes, it is at this small corner, give some effect:

Border-bottom: 2px solid rgb (0je 0je 0)

Take a look at the effect:

In this way, the black edge also has a small smooth Radian transition, which is more natural.

Attach the complete code and effect of this step:

.board: before {content:'; display: block; width: 780px; height: 20px; background: rgb (210210210); 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 Background:-webkit-linear-gradient (top,rgb (210210210) 50% dint RGB (255255255));}

Third, step 3

In this step, we will do the rotation axis of the screen, that is, the black rectangle blackbar at the bottom of the screen.

Similarly, first set width and height,absolute positioning, center display, the distance of movement can be calculated with reference to the above method, plus the fillet of 2px, in order to show the three-dimensional groove of the axis of rotation, we add the solid white line of 2px to the bottom border and right frame of blackbar class, and give blackbar a gradient from top to bottom, showing a narrow bright white in the middle. Color and transition position friends can cut off on their own, oops, is their own grasp.

Realization and effect:

.blackbar {width: 450px; height: 18px; position: absolute; left: 75px; border-radius: 2px; border-bottom: 2px solid # ffffff; / * Xiaobai Bian * / border-right: 2px solid # ffffff; background:-webkit-linear-gradient (top,rgb (30Magol 30p30), rgb (60pjor60) 35% Magical RGB (100100100) 50% majored RGB (30Let30p30) 65%) Background:-linear-gradient (top,rgb (30Power30), rgb (60recollect 60) 35% recordRGB (100100100) 50% LRGB (30pjin30) 65%);}

IV. Step 4

Then there is the most conspicuous part of the MacBook Air, that is, the keyboard part, why is it conspicuous, because it takes up a lot of space (laugh three times if it's not funny).

Before drawing the keyboard, the friends will first calculate the size of the entire keyboard area, the size and arrangement of the keys, otherwise they can only be re-adjusted little by little, which is troublesome. All right, let's draw the keyboard area first.

Traditional steps, set width and height, absolute positioning, and then set left, top center, outline the 1px solid color of rgb (180180180) border,8px fillet, white background color

The implementation and effects are as follows:

.keyboard {position: absolute; width:530px; height: 216px; left: 35px; top: 35px; border: 1px solid rgb (180180180); border-radius: 8px; background:rgba

In order to show a three-dimensional sense of grooves, the shadow should come out again. We use box-shadow to add four internal inset shadows to the four borders of keyboard. About box-shadow, we'll talk about it later. First, paste the implementation and effect:

Box-shadow:2px 0px 2px rgb (180180180) inset

0px 3px 3px rgb (180180180) inset

-5px-0px 1px rgb (255255255) inset

0px-3px 3px rgb (180180180) inset

The embryonic form has come out, and then there is a nth-child one by one. Let's go on swinging the oars violently.

Fifth, step five

As mentioned earlier, we calculate the size and position of each button in advance so that we don't get into chaos at that time, otherwise the whole keyboard will be like the end of the Eastern Han Dynasty.

First of all, there are some general settings, remove the list flag, margin, padding settings, the width and height of the list balabala, according to the previous calculation, set the distance between the button and the key, roughly arrange so many keys, and add a 4px fillet to the key, in order to display the stereoscopic effect, add a border:

Border: 1px solid rgb (70, 70, and 70)

And add shadows to the four edges:

Box-shadow: 1px 0px 0px rgb (0je 0je 0)

0px 1px 0px rgb (0d0j0pl 0)

-1px 0px 0px rgb (0re0j0pl 0)

0px-1px 0px rgb (0J. 0J. 0)

Attach the code and effect:

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 rgb 30); color: rgb (200200200); text-align: center; line-height: 28px; font-size: 12px; border-radius: 4px; border: 1px solid rgb Box-shadow: 1px 0px 0px rgb, 0px 1px 0px rgb,-1px 0px 0px rgb, 0px-1px 0px rgb;}

It still looks very messy, and even the text has overflowed, but my mother said that she can't eat hot tofu in a hurry. Take your time and make sure she will be obedient later.

Tips: please remember your parents' birthdays hard.

Careful friends will find a piece of code, which seems to be found even if they are not careful, this is it:

-webkit-user-select: none

-moz-user-select: none

-ms-user-select: none

User-select: none

What does this mean? Let's take a look at the effect of not adding this code:

Yes, it is this piece of blue. When you drag and select it on the keyboard with the mouse, the li will be selected one by one. By adding this code, you can give us a piece of chocolate keyboard and a white blue sky.

Pure white. Of. Blue sky. ^ o ^

Let's first tamper with the top row of function keys on the keyboard. Here we use nth-child to select the above row and I count the correct number of 14 function keys and simply set the style for them.

The implementation and effects are as follows:

Li:nth-child (1), li:nth-child (2), li:nth-child (3), li:nth-child (4), li:nth-child (5), li:nth-child (6), li:nth-child (7), li:nth-child (8), li:nth-child (9), li:nth-child (10), li:nth-child (11), li:nth-child (12), li:nth-child (13), li:nth-child (14) {width:30px Height:15px;}

Next, adjust the 69 positions above and below the numbers and symbols on the number keys in the second row, and also select them with nth-child and then set the style:

Li:nth-child (16) span,li:nth-child (17) span,li:nth-child (18) span,li:nth-child (19) span,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,li:nth-child (26) span,li:nth-child (27) span {display: block Margin-top: 5px; line-height: 0.5;}

Then set the size of the other keys except the four arrow keys. It's very simple. Just write it accurately. To be a man with a good idea, you can paste the code directly:

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 (68), li:nth-child (69), li:nth-child (70), li:nth-child (71), li:nth-child (72), li:nth-child (73), li:nth-child (74) {height:33px;} li:nth-child (72) {width:173px;} li:nth-child (71), li:nth-child (73) {width:37px;}

Find a post station to have a rest halfway, and take a look at the effect by the way:

Except for the four arrow keys, the other keys are fairly well placed. Keep going.

Four key settings are also very simple, set width and height, positioning can be, not wordy, directly on:

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

Effect:

Well, the aesthetic effect is still within my aesthetic range.

VI. Step 6

* one step is the drawing of the touchpad touch, ha, finally landing in Normandy, wait for me to have a sip of chrysanthemum tea.

Trackpad drawing and keyboard drawing is basically the same, set the size, positioning, fillet, border can. Go directly to:

Touch {position: absolute; width:200px; height:150px; border: 2px solid rgb (190190190); bottom: 23px; left: 200px; border-radius: 8px;}

At this point, I believe you have a deeper understanding of "how to use CSS to create silver MacBook Air". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.