シルバーの MacBook Air を作成するための純粋な CSS (フルバージョン)_html/css_WEB-ITnose

前回の記事: 前に書いた「選択疑似要素の解説」

先日、シルバーのMacBook Airを純粋なCSSで描画する詳しい手順を説明しましたが、長くなってしまったので、今日は2回に分けました。 2 つの部分に分けて紹介します。記事は Markdown + 少量の HTML で編集されています。

同時に、マークダウンを使用する過程で、cnblog ブログ投稿の一部のマークダウン構文と、URL リンクや参照などブラウザに直接表示されるマークダウン構文に違いがあることがわかりましたが、使用には影響しませんそしてまったく見ていません。誰でも見やすくするために、マークダウン内のすべてのリンクをタグで変更し、マークダウン内のリンク メソッドを使用しませんでした。

前に書いたもの

私は少し前に CSS を使って銀色の MacBook Air を描きました。今日、それをコンピューターのハードドライブの奥から掘り出し、友達と共有するために自分の考えやアイデアを書き留めました。まずは最終的な効果をお見せしましょう。

最初の注意: 画像が大きすぎて完全に表示されない場合は、F5 または Ctrl+F5 を押してください。

二重注意: この記事は Markdown + 少量の HTML で編集されています。

トリプルノート: 皆さんの毎日が幸せであることを祈っています。

これは実際には半完成品です。キーボード上の他のアイコンとテキストはまだ追加されていません。適切なフォントアイコンのURLリンクを見つけたら完成させます。トラブルを起こす人も大歓迎です。

お友達は、ここをクリックして、Codepenで高解像度の無修正の大きな画像を表示し、リンクを提供することもできます:

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

ゼロ、ステップゼロ

ここでは、擬似要素、グラデーション、シャドウ、n 番目の子セレクターなどの CSS が使用されています。この画像では、シャドウとグラデーションの効果が明確ではないかもしれません。上の Codepen ビューにアクセスしてください。記事の最後にソースコード全体を掲載しますので、興味のある方は自由に修正して改良してください。

OK、不謹慎に入り始めます。

まず、描画構造を紹介します。

キーボードの場合は、順序なしリスト ul を作成し、いくつかの li を記述し、他のものをいくつかの div でラップします。 まず HTML 構造を与えます:

<div class="board">		<div class="blackbar">					</div>		<div class="keyboard">			<ul>							</ul>		</div>		<div class="touch">					</div></div>

4 div と 2 つの疑似要素、合計 6 つの部分。 MacBook Air全体を構成します。ボードは MacBook Air のベース、ブラックバーは画面の黒い回転軸、キーボードはキーボード、タッチはトラックパッドです。ボード:before は上のカバー、border-bottom はカバーの下の黒い細い帯です。 。さて、これら 6 つの部分で MacBook Air 全体が構成されています。

いいえ絵何を言えばいいですか:

次は、私の描いた順番に沿って、段階的に紹介していきます。のどが渇いた友達は、最初にお茶を入れることができます。

1. 最初のステップ

まず HTML を指定します。以下は非常に長い順序付けされていないリストですが、研究の価値はほとんどありません。 2 つのスパンを持つ 2 つのシンボル、次のようになります。

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

上下 69 の姿勢なので、別々に配置できるようにスパンで包みました。

まず 600*450 div を描画し、ボードを中央に配置し、銀色を付けます。ここでは rgb(210,210,210) です。

border-radius

を使用して 20 ピクセルの丸い角を 4 つ描画し、box-shadow を使用します。灰色の影を付けます。ここで使用されるグレーは rgb(160,160,160) です。最後に、div の左下隅から右上隅まで 60 度の線形グラデーションを追加します。トランジションを開始します。クォーターアウトからグレーまで。後続の div は絶対配置を使用するため、親要素ボードが相対的に最初に配置されます。 完全なコードとエフェクトは次のとおりです:

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

このようにして、まずシャドウとリニア グラデーション トランジション エフェクトを備えたパネルが完成します。

2. ステップ 2

次に、疑似要素 Board:before を使用して、ノートの表紙を描画したいと思います。

蓋がめくれているため、上から下に見ると縁が狭くなります。 「board:before」に 780px*20px の div を入力し、背景色をグレーにします。

実装と効果は次のとおりです:

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

次に位置を調整します。board:before 位置決めは絶対位置決めで、ボードの幅は 600px、蓋の幅は 780px なので、 left=-(780-600)/ 2=-90px、上はboard:beforeの高さは20pxで、横の半径が大きく、縦​​の半径が小さくなります。 border-radius に詳しい場合は、以前の「 CSS3 Squad - Attack of Border-Radius」を参照してください。

このときの効果は次のとおりです:

立体感を出すために、カバーに上から下へのグラデーショントランジション効果を追加します:

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

ちなみに。 、画面の下にストリップを追加します 小さな黒いバーを追加します。一文は非常に簡単です:

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

最初に効果を見てください:

いくつかの場所で何かが矛盾していると感じますか?ズームインしてここを見てみましょう:

肛門を詳しく見てみましょう:

はい、この小さな角です。エフェクトを加えます:

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

エフェクトをもう一度見てください:

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

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

.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伪元素小解》