Pure CSS to create a silver MacBook Air (2)_html/css_WEB-ITnose

Previous article: "Building a Silver MacBook Air with Pure CSS (1)" Written before

In the previous article, we talked about "Building a Silver MacBook Air with Pure CSS (1)", and we will continue to talk about it today.

First note: If the image is too large and not fully displayed, please F5 or Ctrl F5.

Double Note: This article is Markdown with a small amount of html editing.

Triple Note: If you haven’t viewed the first part, you can click above to view the first part.

3. Step 3

This step is to make the screen rotation axis, which is the black rectangular blackbar at the bottom of the screen.

Similarly set the width and height first, absolute positioning, centered display, the moving distance can be calculated by referring to the above method, add a 2px rounded corner, in order to display the three-dimensional groove of the rotation axis , we add a 2px solid white line to the lower and right borders of the blackbar class, and at the same time give the blackbar a gradient from top to bottom, with the bright white color of the house showing in the middle. The color and transition position, friends. You can end it on your own, oh no, you can take control of it on your own.

Implementation and effect:

.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. Step 4

Next is the most conspicuous part of MacBook Air, that is the keyboard part. Why is it so conspicuous? Because it occupies the largest area, haha.

Before drawing the keyboard, friends, it is best to calculate the size of the entire keyboard area, the size and arrangement of each button, otherwise you will have to adjust it bit by bit. Okay, let's draw the keyboard area first.

Traditional steps, set width and height, absolute positioning, then set left and top to center, outline a 1px solid border with color rgb(180,180,180), 8px rounded corners, and white background color;

The implementation and effect are as follows:

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

In order to show the three-dimensional groove feeling, the shadow should come out again. We use box-shadow to add four internal inset shadows to the four borders of the keyboard. We will talk about box-shadow later when we have the opportunity. First, paste the implementation and effects:

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;

Prototype After it comes out, the next step is the nth-child one by one. Let us then swing the oars violently.

5. Step 5

As mentioned before, it is best for us to calculate the size and position of each button in advance so that we know it well and avoid chaos when the time comes.

First of all, some general settings, remove the list flag, margin, padding settings, list width and height, set the distance between keys according to the previous calculation, roughly arrange so many keys, and give Click the button to add 4px rounded corners. In order to show the three-dimensional effect, add a border:

border: 1px solid rgb(70,70,70);

and add shadows on four sides:

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

Attached are the codes and effects:

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

It still looks very messy, but my mother said that I can’t eat hot tofu in a hurry, so take your time to make sure it’s done right. It will take a while to tame her until she is submissive.

Careful friends will find a piece of code, even those who are not careful can find it, this is this piece:

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

What does this mean? Let’s first look at the effect of not adding this code:

Yes, it’s this piece of blue. When you use the mouse to drag on the keyboard to select, each of the li It will be selected. Adding this code will give us a chocolate keyboard.

Let’s first clear up the top row of function keys on the keyboard. Here we use nth-child to select the 14 function keys in the upper row and set styles for them.

The implementation and effect 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 upward and downward positions of the numbers and symbols on the number keys on the second row. Also first Use nth-child to select and 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(20) 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 last four direction keys. It is very simple. Just write it accurately. 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;}

Let’s take a look at the effect halfway through:

Except for the four direction keys, the other buttons are placed fairly well, so continue on.

The setting of the four direction keys is also very simple. Just set the width, height, and positioning. Without further ado, just go ahead:

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:

The effect is okay.

6. Step 6

The last step is to draw the touchpad touch.

The drawing of the touchpad is the same as the drawing of the keyboard. Just set the size, positioning, rounded corners, and border. Go directly to:

.touch{	position: absolute;	width:200px;	height:150px;	border: 2px solid rgb(190,190,190);	bottom: 23px;	left: 200px;	border-radius: 8px;}

7. Finished

At this point, even if the MacBook Air is completed, it is still a semi-finished product, and some icons still need to be font-faced. When it's done, of course you can add some animations, let it rotate for display, etc. This is just an introduction, and I look forward to more wonderful ideas from my friends.

If you haven’t viewed the first part, you can click below to view the first part.

Previous article: "Build a silver MacBook Air with pure CSS (1)"