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

Previous article: "Selection Pseudo Elements Brief Introduction" written in front

A few days ago, I explained the detailed process of drawing a silver MacBook Air with pure CSS. Because of the length, it was divided into two parts. Part of the introduction, today I will combine it into one for everyone to view. The article is edited with Markdown and a small amount of html.

At the same time, in the process of using markdown, I found that there is a difference between some markdown syntax in cnblog blog posts and directly displayed in the browser, such as URL links and references, but it does not affect use and viewing at all. In order to allow everyone to view it better, I have modified all the links in markdown with a tags, and did not use the link method in markdown.

Written in front

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

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: I wish you all a happy life every day.

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. I will complete it for everyone after I find a suitable font icon URL link. , and friends are also welcome to play.

Friends can also click here to view the high definition uncensored large picture on Codepen, and give the link:

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

Zero, step zero

Here we use CSS before, after pseudo-elements, gradient, shadow, nth-child selector and other related content. The shadow and gradient effects may not be clear from the pictures. Friends can check it out on the Codepen above. I will give the entire source code at the end of the article. Those who are interested can modify and improve it at will. .

Ok, start to enter without restraint.

First, let’s introduce the structure of drawing.

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:

<div class="board">		<div class="blackbar">					</div>		<div class="keyboard">			<ul>							</ul>		</div>		<div class="touch">					</div></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.

There is no pictureWhat can I say:

Next, I will introduce it step by step according to my drawing order. Thirsty friends can make a cup of tea first.

1. The first step

First give the HTML. The following is a very long unordered list but of little research value. Let the scroll wheel fly:

<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></li>				<li></li>				<li></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></li>				<li></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></li>				<li></li>				<li></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>

Keyboard keys For several li, among which there are two symbols on the keys, I wrapped them with two spans, like this:

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

Because they ended up in a 69 position one up and one down, so it was convenient to wrap them with spans. Arrange their positions separately.

First draw a 600*450 div, center the board, give it a silver color, here we use rgb(210,210,210), and use border-radius to draw four 20px Rounded corners, use box-shadow to give a gray shadow. The gray used here is rgb(160,160,160). You can choose the appropriate color yourself. Finally, add a linear line at 60 degrees from the lower left corner to the upper right corner of the div. The gradient is linear-gradient, starting from white and transitioning from one quarter 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:

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

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

2. Step 2

Next I want to draw the notebook cover, using 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:

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

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. Make the horizontal radius larger and the vertical radius smaller, 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 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. :

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

Then add the small black bar under the screen. It’s very simple:

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

Let’s see the effect first:

Do you feel like something is a bit inconsistent? Zoom in and take a look here:

Let’s get a more asshole:

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

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

Look at the effect again:

这样黑边那也有了小的光滑弧度过渡，显得更加自然。

附上这一步的完整代码和效果：

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

三、第三步

这一步我们来做屏幕旋转轴，也就是屏幕下方的那条黑色矩形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%);}

四、第四步

接下来就是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了。让我们接着猛烈地荡起双桨吧。

五、第五步

就像前面提到的，我们最好事先先计算好每个按键的大小和位置，做到心中有数，不至于到时候一片混乱，否则整个键盘就像东汉末年似的这一块儿那一块儿。

首先是一些常规的设置，去掉列表标志，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(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;}

接下来调整第二行的数字按键上的那些数字和符号的一上一下的69体位，同样先用nth-child选中再设置样式：

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

然后设置除了最后的那四个方向键外的其他键的大小，很简单，算准写就行，要做一个心中有数的男人，这块直接贴代码：

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

找个驿站半路休息下先，顺带看下效果：

除了四个方向键，其他的按键放置得还算可以，接着走。

四个方向键设置也很简单，设置宽高，定位即可，不罗嗦了，直接上：

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

效果：

恩，美感效果还在我的审美范围之内。

六、第六步

最后一步就是触控板touch的绘制了，哈哈哈，终于要诺曼底登陆了，待我喝口菊花茶先。

触控板的绘制和键盘的绘制基本上是一样的，设置大小，定位，圆角，border即可。直接上：

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

七、小了个结

到这里，MacBook Air就算完成了，还是那句话，是个半成品，一些字体图标还待用font-face来完成，当然还可以添加些动画，让它像产品旋转来展示等等，这只是抛砖引玉而已，期待小伙伴们更多奇思妙想。小伙伴们有好的想法欢迎分享~~~

转载请说明作者和出处。

上一篇：《selection伪元素小解》