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

前の記事: 「Pure CSS でシルバーの MacBook Air を構築する (1)」 以前に書きました

前回の記事で「Pure CSS でシルバーの MacBook Air を構築する (1)」についてお話しましたが、引き続き、それは今日です。

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

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

三重の注意: 最初のパートをまだ見ていない場合は、上をクリックして最初のパートをご覧ください。

3. ステップ 3

このステップでは、画面の回転軸を作成します。これは、画面の下部にある黒い長方形のブラックバーです。

同様に幅と高さを最初に設定し、絶対位置決め、中央表示、移動距離は上記の方法を参考にして計算でき、回転軸の立体的な溝を表示するために2pxの角丸を追加し、 give blackbar クラスの下と右の境界線に 2px の白い実線を追加し、ブラックバーに上から下へのグラデーションを与えます。中央に家の明るい白色が表示されます。色と遷移を友達が決定できます。いや、それはあなた次第です。

実装と効果:

.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. ステップ 4

次のステップは、MacBook Air の最も目立つ部分です。なぜなら、それが最も大きなスペースを占めるからです (笑)。

キーボードを描く前に、キーボード領域全体のサイズ、各ボタンのサイズと配置を計算するのが最善です。そうしないと、少しずつ調整する必要があります。さて、最初にキーボード領域を描画しましょう。

従来の手順では、幅と高さ、絶対位置を設定し、左と上を中央に設定し、rgb(180,180,180) カラー、8 ピクセルの丸い角、白の背景色で 1 ピクセルの実線の境界線を描きます

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

.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 を使用して、キーボードの 4 つの境界線に 4 つの内部インセット シャドウを追加します。box-shadow については、機会があれば後で説明します。まず、実装と効果を投稿します。 、次のステップは、 -child を 1 つずつ n 番目に追加することです。それではオールを激しく振りましょう。

5. ステップ 5

前述したように、各ボタンのサイズと位置を事前に計算して、それをよく理解し、いざというときに混乱を避けることが最善です。

まず、いくつかの一般的な設定、リストのフラグ、マージン、パディング設定、リストの幅と高さを削除し、前の計算に従ってキー間の距離を設定し、多くのキーを大まかに配置し、キーに 4px を追加します。角の立体感を出すために、枠線を​​追加します:

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

4 辺に影を追加します:

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;

コードと効果を添付します:

rree

まだとても汚いですが、母は、熱々の豆腐を急いで食べることはできないから、ゆっくり時間をかけて、きっとすぐに飼いならすだろうと言いました。

注意深い友達はコードの一部を見つけるでしょう、注意しない人でもそれを見つけることができます、これはこれです:

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

これはどういう意味ですか?まず、このコードを追加しない場合の効果を見てみましょう:

はい、この青い部分です。マウスを使用してキーボード上でドラッグすると、各 li が選択されます。このセクションを追加すると、次のような効果が得られます。私たちはチョコレートキーボードです。

まず、キーボードの一番上の行のファンクション キーを片付けましょう。ここでは、nth-child を使用して、上段の 14 個のファンクション キーを選択し、それらのスタイルを設定します。

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

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

次に、nth-child を使用して最初に選択し、次にスタイルを設定します。

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

次に設定します。最後の 4 つの方向キーを除いて、他のキーのサイズは非常に単純です。コードを直接ここに示します:

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

途中の効果を見てみましょう:

4 方向キーを除くその他のボタンの配置は非常に良いので、次に進みます。

4 方向キーの設定も非常に簡単で、幅、高さ、位置を設定するだけです。

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

効果:

効果は大丈夫です。

6. ステップ 6

最後のステップは、タッチパッドのタッチを描画することです。

タッチパッドの描画はキーボードの描画と同じで、サイズ、位置、角の丸み、境界線を設定するだけです。直接アクセスしてください:

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

7. 完成

この時点では、MacBook Air が完成しても、一部のアイコンはまだフォントフェイスを使用して完成させる必要があります。回転させて表示するなどの目的で追加することもできます。これは単なる出発点です。友人からの素晴らしいアイデアを楽しみにしています。

最初のパートをまだ見ていない場合は、下をクリックして最初のパートをご覧ください。

前の記事: 「ピュアCSSでシルバーのMacBook Airを作る(1)」