CSS3はNESゲームコンソールのサンプルコードを実装します
成果を達成する
実装コードhtml
<input type="radio" name="nes-size" id="size1">
<label for="size1" class="size1" ></label>
<input type="radio" name="nes-size" id="size2">
<label for="size2" class="size2"></label>
<input type="radio" name="nes-size" id="size3" チェック済み>
<label for="size3" class="size3"></label>
<input type="radio" name="nes-size" id="size4">
<label for="size4" class="size4"></label>
<div id="nes">
<div class="nes-top">
<div class="lid">
<h1>任天堂</h1>
<h2>エンターテイメント システム</h2>
</div>
<div class="カートリッジスロット">
<div class="カートリッジスロットの境界線">
</div>
<div class="カートリッジスロットホール"></div>
</div>
</div>
<div class="nes-bottom">
<div class="パワーボックス">
<input type="checkbox" id="power" />
<div class="reset"></div>
<label for="パワー" class="パワー"></label>
<div class="light"></div>
</div>
</div>
<div class="ゲームパッドスロット">
<div class="ゲームパッドスロット p1"></div>
<div class="ゲームパッドスロット p2"></div>
</div>
</div>CSS3
url をインポートします(https://fonts.googleapis.com/css?family=Coda+Caption:800);
体 {
背景: #DB5A48;
}
#サイズ1、#サイズ2、#サイズ3、#サイズ4 {
位置: 絶対;
左: -9999px;
}
入力:チェック済み + .size1、入力:チェック済み + .size2、入力:チェック済み + .size3、入力:チェック済み + .size4 {
ボックスシャドウ: インセット 2px 3px 0px rgba(0, 0, 0, 0.34)、 インセット -1px -1px 0px rgba(255, 255, 255, 0.22);
背景: #7A7077;
}
.size1 {
位置: 絶対;
幅: 20px;
高さ: 20px;
背景: #CDC8C5;
左: 60px;
上: 60px;
境界線の半径: 50%;
}
.size2 {
位置: 絶対;
幅: 40px;
高さ: 40px;
背景: #CDC8C5;
左: 90px;
上: 50px;
境界線の半径: 50%;
}
.size3 {
位置: 絶対;
幅: 60ピクセル;
高さ: 60px;
背景: #CDC8C5;
左: 140px;
上: 40px;
境界線の半径: 50%;
}
.size4 {
位置: 絶対;
幅: 80ピクセル;
高さ: 80px;
背景: #CDC8C5;
左: 220px;
上: 30px;
境界線の半径: 50%;
}
#size1:チェック済み ~ #nes{
フォントサイズ:8px
}
#size2:チェック済み ~ #nes{
フォントサイズ:12px
}
#size3:チェック済み ~ #nes{
フォントサイズ:16px
}
#size4:チェック済み ~ #nes{
フォントサイズ:20px
}
#nes {
幅: 45em;
高さ: 15em;
マージン: 140px 自動;
位置: 相対的;
色: #B62F28;
フォントファミリー: 'Coda Caption'、サンセリフ;
-webkit-transition: すべて 0.1 秒;
-moz-transition: すべて 0.1 秒;
-o-transition: すべて 0.1 秒;
-ms-transition: すべて 0.1 秒;
遷移: すべて 0.1 秒;
}
#nes:後{
コンテンツ： "";
位置: 絶対;
幅: 80%;
高さ: 0;
-webkit-box-shadow: 0 0 5em 3em rgba(0, 0, 0, 0.22);
ボックスシャドウ: 0 0 5em 3em rgba(0, 0, 0, 0.22);
下限: -4%;
左: 10%;
Zインデックス: -1;
境界線の半径: 50%;
}
#nes:前{
コンテンツ： "";
位置: 絶対;
幅: 99.4%;
高さ: 0;
上位: -3%;
左: 0.3%;
ボーダー下部: 0.5em 実線 #C9C4C1;
左境界線: 2em 実線 rgba(0, 0, 0, 0);
右境界線: 2em 実線 rgba(0, 0, 0, 0);
-webkit-box-sizing: 境界線ボックス;
-moz-box-sizing: 境界線ボックス;
-ms-box-sizing:境界線ボックス;
ボックスのサイズ: 境界線ボックス;
}
.nes-トップ{
位置: 絶対;
上: 0;
左0;
幅: 45em;
高さ: 7.4em;
背景: #cdc8c5;
境界線の半径: 0.3em 0.3em 0 0;
-webkit-box-shadow: 0 0.1em 0em #B8B4B2,0 0.5em 0em -0.2em #535353;
ボックスの影: 0 0.1em 0em #B8B4B2,0 0.5em 0em -0.2em #535353;
上境界線: 0.2em 実線 rgba(255, 255, 255, 0.32);
左境界線: 0.2em 実線 rgba(255, 255, 255, 0.32);
右境界線: 0.2em 実線 rgba(0, 0, 0, 0.05);
-webkit-box-sizing: 境界線ボックス;
-moz-box-sizing: 境界線ボックス;
-ms-box-sizing:境界線ボックス;
ボックスのサイズ: 境界線ボックス;
}
h1 {
フォントサイズ: 1.5em;
位置: 絶対;
上: 0.4em;
左: 0.85em;
}
.lid h2 {
フォントサイズ: 0.6em;
位置: 絶対;
上: 5.1em;
左: 2.2em;
}
.ふた{
zインデックス: 1;
幅: 25em;
高さ: 6em;
背景: #CDC8C5;
位置: 絶対;
左: 5em;
-webkit-transition: すべて 1;
-moz-transition: すべて 1;
-o-遷移: すべて 1;
-ms-transition: すべて 1;
遷移: すべて 1;
-webkit-transform-style: 3d を保存します。
-moz-transform-style: 3d を保存します。
-ms-transform-style: 3d を保持します。
変換スタイル: 3D を保持します。
-webkit-パースペクティブ: 0;
-webkit-transform-origin:0 0 -6em;
-moz-transform-origin:0 0 -6em;
-o-変換の原点:0 0 -6em;
-ms-transform-origin:0 0 -6em;
変換の原点:0 0 -6em;
-webkit-box-sizing: 境界線ボックス;
-moz-box-sizing: 境界線ボックス;
-ms-box-sizing:境界線ボックス;
ボックスのサイズ: 境界線ボックス;
上境界線: 0.2em 実線 rgba(255, 255, 255, 0.32);
上: -0.2em;
-webkit-box-shadow: 0 0.1em 0.2em 0 rgba(0, 0, 0, 0.41);
ボックスシャドウ: 0 0.1em 0.2em 0 rgba(0, 0, 0, 0.41);
右境界線: 0.1em 実線 rgba(255, 255, 255, 0.26);
ボーダー下部: 0.1em 実線 rgba(255, 255, 255, 0.26);
境界線の半径: 0.15em;
}
.lid:前{
コンテンツ： "";
位置: 絶対;
幅: 20%;
左: 40%;
高さ: 0.2em;
下部: 0;
背景: #E7E7E7;
背景: #CDC8C5;
背景: -moz-linear-gradient(top, rgba(205, 200, 197, 1) 0%, rgba(231, 231, 231, 1) 100%);
背景: -webkit-gradient(linear, 左上, 左下, color-stop(0%,rgba(205, 200, 197, 1)), color-stop(100%,rgba(231, 231, 231, 1)));
背景: -webkit-linear-gradient(top, rgba(205, 200, 197, 1) 0%,rgba(231, 231, 231, 1) 100%);
背景: -o-linear-gradient(top, rgba(205, 200, 197, 1) 0%,rgba(231, 231, 231, 1) 100%);
背景: -ms-linear-gradient(top, rgba(205, 200, 197, 1) 0%,rgba(231, 231, 231, 1) 100%);
背景: linear-gradient(下へ、rgba(205, 200, 197, 1) 0%、rgba(231, 231, 231, 1) 100%);
フィルター: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdc8c5', endColorstr='#e7e7e7',GradientType=0 );
ボックスの影: 0.2em 0.05em 0.3em -0.1em rgba(0, 0, 0, 0.3);
}
.nes-top:hover .lid {
-webkit-transform:rotateX(55度);
-moz-transform:rotateX(55度);
-o-transform: rotateX(55deg);
-ms-transform:rotateX(55度);
変換: rotateX(55deg);
-webkit-box-shadow: 0 3.1em 5.2em -2em rgba(0, 0, 0, 0.32);
ボックスの影: 0 3.1em 5.2em -2em rgba(0, 0, 0, 0.32);
}
.nes-top:before {
コンテンツ： "";
位置: 絶対;
右ボーダー: 0.8em 実線 #B8B8B8;
上: -0.22em;
左: 4.8em;
上境界線: 0.3em 実線 rgba(0, 0, 0, 0);
zインデックス: 1;
}
.nes-top:after {
コンテンツ： "";
位置: 絶対;
左ボーダー: 0.8em 実線 #B8B8B8;
上: -0.22em;
左: 29.4em;
上境界線: 0.3em 実線 rgba(0, 0, 0, 0);
}
.lid:後{
コンテンツ： "";
幅: 23.9em;
高さ: 6.1em;
背景: #CDC8C5;
位置: 絶対;
左: 0.45em;
上: -6em;
-webkit-transform: rotateX(90deg) translateY(-3em) translateZ(-3em);
-moz-transform: rotateX(90deg) translateY(-3em) translateZ(-3em);
-o-transform: rotateX(90deg) translateY(-3em) translateZ(-3em);
-ms-transform: rotateX(90deg) translateY(-3em) translateZ(-3em);
変換: rotateX(90deg) translateY(-3em) translateZ(-3em);
}
.nes-ボトム{
幅: 39em;
高さ: 7.5em;
背景: #7A7077;
位置: 絶対;
下部: 0;
左: 3em;
ボーダー下部: 0.2em 実線 rgba(255, 255, 255, 0.1);
-webkit-box-sizing: 境界線ボックス;
-moz-box-sizing: 境界線ボックス;
-ms-box-sizing:境界線ボックス;
ボックスのサイズ: 境界線ボックス;
-webkit-box-shadow: 0 0.6em 1em -0.3em rgba(0, 0, 0, 0.45);
ボックスの影: 0 0.6em 1em -0.3em rgba(0, 0, 0, 0.45);
}
.nes-bottom:後{
border-bottom: 6em 透明実線;
左ボーダー: 3em 実線 #7A7077;
コンテンツ： "";
高さ: 1.5em;
位置: 絶対;
右: -3em;
上: 0;
}
.nes-bottom:before {
border-bottom: 6em 透明実線;
右ボーダー: 3em 実線 #7A7077;
コンテンツ： "";
高さ: 1.5em;
位置: 絶対;
左: -3em;
上: 0;
}
.パワーボックス{
位置: 絶対;
左: 1.4em;
幅: 11.5em;
上: 0;
高さ: 5.8em;
境界線: 0.1em 実線 rgba(0, 0, 0, 0.05);
上境界線: 0;
境界線の半径: 0.3em;
境界線の右上の半径: 0;
右境界線: 0.1em 実線 rgba(255, 255, 255, 0.05);
-webkit-box-shadow: 0 0.1em 0 0em rgba(0, 0, 0, 0.01);
ボックスシャドウ: 0 0.1em 0 0em rgba(0, 0, 0, 0.01);
色: #AC2828;
}
。ライト {
位置: 絶対;
幅: 0.6em;
高さ: 0.6em;
左: 0.6em;
下: 1.3em;
背景色: #504F4F;
背景画像: -webkit-linear-gradient(45deg, #3D3D3D 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #3D3D3D 75%, #3D3D3D ), -webkit-linear-gradient(-45deg, #3D3D3D 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #3D3D3D 75%, #3D3D3D );
背景画像: -moz-linear-gradient(45deg, #3D3D3D 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #3D3D3D 75%, #3D3D3D ), -moz-linear-gradient(-45deg, #3D3D3D 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #3D3D3D 75%, #3D3D3D );
背景画像: -o-linear-gradient(45deg, #3D3D3D 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #3D3D3D 75%, #3D3D3D ), -o-linear-gradient(-45deg, #3D3D3D 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #3D3D3D 75%, #3D3D3D );
背景画像: -ms-linear-gradient(45deg, #3D3D3D 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #3D3D3D 75%, #3D3D3D ), -ms-linear-gradient(-45deg, #3D3D3D 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #3D3D3D 75%, #3D3D3D );
背景画像: linear-gradient(45deg, #3D3D3D 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #3D3D3D 75%, #3D3D3D ), linear-gradient(-45deg, #3D3D3D 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #3D3D3D 75%, #3D3D3D );
-webkit-背景サイズ: 0.2em 0.2em;
背景サイズ: 0.2em 0.2em;
背景サイズ: 0.2em 0.2em;
-webkit-box-shadow: -0.1em -0.1em 0.1em rgba(0, 0, 0, 0.3),0.1em 0.1em 0.1em rgba(255, 255, 255, 0.1);
ボックスの影: -0.1em -0.1em 0.1em rgba(0, 0, 0, 0.3),0.1em 0.1em 0.1em rgba(255, 255, 255, 0.1);
-webkit-transition: すべて 0.2 秒;
-moz-transition: すべて 0.2 秒;
-o-transition: すべて 0.2 秒;
-ms-transition: すべて 0.2 秒;
遷移: すべて 0.2 秒;
}
#power:checked ~ .light {
背景画像: -webkit-linear-gradient(45deg, #FFF 25%, #FFF 25%, #FFF 75%, #FFF 75%, #FFF ), -webkit-linear-gradient(-45deg, #FFF 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #FFF 75%, #FFF );
背景画像: -moz-linear-gradient(45deg, #FFF 25%, #FFF 25%, #FFF 75%, #FFF 75%, #FFF ), -moz-linear-gradient(-45deg, #FFF 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #FFF 75%, #FFF );
背景画像: -o-linear-gradient(45deg, #FFF 25%, #FFF 25%, #FFF 75%, #FFF 75%, #FFF ), -o-linear-gradient(-45deg, #FFF 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #FFF 75%, #FFF );
背景画像: -ms-linear-gradient(45deg, #FFF 25%, #FFF 25%, #FFF 75%, #FFF 75%, #FFF ), -ms-linear-gradient(-45deg, #FFF 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #FFF 75%, #FFF );
背景画像: linear-gradient(45deg, #FFF 25%, #FFF 25%, #FFF 75%, #FFF 75%, #FFF ), linear-gradient(-45deg, #FFF 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #FFF 75%, #FFF );
-webkit-box-shadow: インセット 0 0 0.5em 0.2em #F1270B,0 0 0.5em #F1550B,-0.1em -0.1em 0.1em rgba(0, 0, 0, 0.3),0.1em 0.1em 0.1em rgba(255, 255, 255, 0.1);
ボックスの影: インセット 0 0 0.5em 0.2em #F1270B,0 0 0.5em #F1550B,-0.1em -0.1em 0.1em rgba(0, 0, 0, 0.3),0.1em 0.1em 0.1em rgba(255, 255, 255, 0.1);
}
#power:checked + .reset:active ~ .light、#power:checked + .reset:focus ~ .light {
背景色: rgba(255, 255, 255, 0.06);
背景画像: linear-gradient(45deg, #3D3D3D 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #3D3D3D 75%, #3D3D3D ), linear-gradient(-45deg, #3D3D3D 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #3D3D3D 75%, #3D3D3D );
ボックスシャドウ: なし;
}
＃力 {
位置: 絶対;
左: -9999px;
}
.電源、.リセット{
位置: 絶対;
カーソル: ポインタ;
幅: 6em;
行の高さ: 3.8em;
高さ: 2.8em;
左: 3em;
上: 5em;
フォントサイズ: 0.6em;
上境界線: 0.5em 実線 rgba(0, 0, 0, 0.09);
右境界線: 0.5em 実線 rgba(0, 0, 0, 0.03);
ボーダー下部: 0.5em 実線 rgba(255, 255, 255, 0.1);
左境界線: 0.5em 実線 rgba(255, 255, 255, 0.04);
境界線の半径: 0.6em;
}
.リセット{
左: 11em;
上: 5em;
}
.power:before、.reset:before {
内容: "POWER";
位置: 絶対;
幅: 94%;
高さ: 95%;
左: 3%;
上位: 10%
テキスト配置: 中央;
境界線の半径: 0.3em;
上境界線: 0.3em 実線 rgba(255, 255, 255, 0.09);
右境界線: 1px実線 rgba(255, 255, 255, 0.06);
下境界線: 1px実線 rgba(0, 0, 0, 0.04);
背景: #7A7077;
-webkit-box-shadow: 0 -0.4em 0 #665E64,0 0.2em 1em -0.3em rgba(0, 0, 0, 0.69);
ボックスの影: 0 -0.4em 0 #665E64,0 0.2em 1em -0.3em rgba(0, 0, 0, 0.69);
-webkit-transition: すべて 0.1 秒;
-moz-transition: すべて 0.1 秒;
-o-transition: すべて 0.1 秒;
-ms-transition: すべて 0.1 秒;
遷移: すべて 0.1 秒;
}
.reset:before {
内容: "RESET";
}
.power:hover:before、.reset:hover:before、#power:checked + .power:before {
上: 0;
-webkit-box-shadow: 0 -0.2em 0 #665E64,0 0.2em 0.6em -0.3em rgba(0, 0, 0, 0.69);
ボックスの影: 0 -0.2em 0 #665E64,0 0.2em 0.6em -0.3em rgba(0, 0, 0, 0.69);
}
.power:focus:before、.power:active:before、.reset:focus:before、.reset:active:before {
上: -0.1em;
-webkit-box-shadow: 0 -0.1em 0 #665E64,0 0.1em 0.6em -0.3em rgba(0, 0, 0, 0.69), インセット 0 0.2em 1em rgba(0, 0, 0, 0.07);
ボックスシャドウ: 0 -0.1em 0 #665E64,0 0.1em 0.6em -0.3em rgba(0, 0, 0, 0.69), インセット 0 0.2em 1em rgba(0, 0, 0, 0.07);
境界線: なし;
}
.カートリッジスロット{
幅: 25em;
高さ: 5.9em;
位置: 絶対;
左: 4.8em;
右境界線: 0.2em 実線 rgba(0, 0, 0, 0.06);
下境界線: 0.2em 実線 rgba(255, 255, 255, 0.28);
左境界線: 0.2em 実線 rgba(0, 0, 0, 0.12);
境界線の半径: 0 0 0.5em 0.5em;
オーバーフロー: 非表示;
}
.カートリッジスロット:before {
位置: 絶対;
高さ: 88%;
コンテンツ： "";
幅: 95.5%;
左: -6%;
上: 0;
下境界線: 3em 実線 rgba(0, 0, 0, 0.04);
右境界線: 2em 実線 rgba(0, 0, 0, 0.1);
左境界線: 2em 実線 rgba(0, 0, 0, 0.1);
}
.ゲームパッドスロット{
高さ: 100%;
位置: 絶対;
幅: 19%;
右：13%
背景: #333;
上境界線: 0.2em 実線 rgba(255, 255, 255, 0.15);
ボーダー下部: 0.2em 実線 rgba(255, 255, 255, 0.1);
-webkit-box-shadow：inset -0.2em 0 0 rgba（0、0、0、0.1）、0.2em 0 0 rgba（0、0、0、0.1）、-0.2em 0 0 0、0.2）、0.2em 0 0 rgba（0、0、0、0.25、0.25、0.25、0.25、 0 RGBA（255、255、255、0.1）、INSET 0 -1.90EM 0＃333、INSET 0 -1.95EM 0 RGBA（255、255、0.09）、Inset 0 -2EM 0 RGBA（0、0、0、0.16）、Inset 0 -6.45em 0＃333、0.55 0 -6.6em 0 RGBA（255、255、255、0.05）、Inset 0 -7.35em 0＃333、Inset 0 -7.4em 0 RGBA（255、255、255、0.09）、Inset 0 -7.45em 0 RGBA（0、0、0、0、0.16） 0、0.4）、Inset 0 -8.85em 0 RGBA（255、255、255、0.05）、Inset 0 1.3em 0＃333、Inset 0 1.35em 0 RGBA（0、0、0、0、0.4）、Inset 0 1.4em 0 RGBA（255、255、255、0.08）;
Box -shadow：Inset -0.2em 0 0 RGBA（0、0、0、0.1）、Inset 0.2em 0 0 rgba（0、0、0、0、0.2）、0.2em 0 0 0 0 0 0 0 0 0 0 0.25em 0 rgba 5、255、255、0.1）、INSET 0 -1.90EM 0＃333、INSET 0 -1.95EM 0 RGBA（255、255、255、0.09）、0 -2EM 0 RGBA（0、0、0、0.16）、Inset 0 -6.45em 0 0 RGBA（255、255、255、0.05）、INSET 0 -7.35EM 0＃333、INSET 0 -7.4EM 0 RGBA（255、255、0.09）、Inset 0 -7.45EM 0 RGBA（ INSET 0 -8.85EM 0 RGBA（255、255、255、0.05）、Inset 0 1.3em 0＃333、INSET 0 1.35EM 0 RGBA（0、0、0、0.4）、Inset 0 1.4EM 0 RGBA（255、255、255、0.08）;
-webkit-box-sizing: 境界線ボックス;
-moz-box-sizing: 境界線ボックス;
-ms-box-sizing:境界線ボックス;
ボックスのサイズ: 境界線ボックス;
}
.カートリッジスロット:after {
位置: 絶対;
幅: 97%;
左：1.2%
高さ: 0.5em;
背景: #CDC8C5;
下位：8%
コンテンツ： "";
}
.カートリッジスロット境界 {
位置: 絶対;
幅: 95.5%;
左: 2%;
高さ: 0.4em;
背景: #BEBABA;
下位：15%
}
.カートリッジスロットの境界:前{
コンテンツ： "";
位置: 絶対;
右ボーダー: 0.2em 実線 #BEBABA;
上: 0em;
左: -0.2em;
上境界線: 0.4em 実線 rgba(0, 0, 0, 0);
zインデックス: 1;
}
.カートリッジスロット境界:後{
コンテンツ： "";
位置: 絶対;
左ボーダー: 0.2em 実線 #BEBABA;
上: 0em;
右: -0.2em;
上境界線: 0.4em 実線 rgba(0, 0, 0, 0);
zインデックス: 1;
}
.gamepads-slots:before {
コンテンツ： "";
位置: 絶対;
幅: 99.4%;
高さ: 2%;
最高: -3.2%;
左: -3.7%;
背景: #333;
-webkit-box-sizing: 境界線ボックス;
-moz-box-sizing: 境界線ボックス;
-ms-box-sizing:境界線ボックス;
ボックスのサイズ: 境界線ボックス;
-webkit-transform: skew(72度);
-moz-transform:skew(72度);
-o-transform: skew(72deg);
-ms-transform:skew(72度);
変換: skew(72deg);
}
.ゲームパッドスロット{
位置: 絶対;
下部: 2.15em;
幅: 3em;
左: 0.8em;
高さ: 4em;
境界線の半径: 0.6em;
背景: #303030;
上境界線: 0.1em 実線 rgba(255, 255, 255, 0.09);
ボーダー下部: 0.1em 実線 #000;
-webkit-box-shadow: 0 -0.1em 0 0.1em rgba(255, 255, 255, 0),0 -0.1em 0em 0.1em rgba(0, 0, 0, 0.19);
ボックスの影: 0 -0.1em 0 0.1em rgba(255, 255, 255, 0),0 -0.1em 0em 0.1em rgba(0, 0, 0, 0.19);
}
.p2 {
右: 0.8em;
左: 継承;
}
.gamepad-slot:after {
コンテンツ： "";
位置: 絶対;
幅: 0.6em;
高さ: 0.6em;
境界線の半径: 50%;
背景: rgba(255, 255, 255, 0.22);
-webkit-box-sizing: 境界線ボックス;
-moz-box-sizing: 境界線ボックス;
-ms-box-sizing:境界線ボックス;
ボックスのサイズ: 境界線ボックス;
左: 0.8em;
上: 0.7em;
-webkit-ボックスシャドウ:
インセット 0 0 0 0.2em #1A1A1A,
0 0 0 0em #000,
0 0.70em 0 -0.2em rgba(255, 255, 255, 0.22),
0 0.73em 0 #1A1A1A,
0 0.73em 0 #000,
0.70em 0.70em 0 -0.2em rgba(255, 255, 255, 0.22),
0.70em 0.73em 0 #1A1A1A,
0.70em 0.73em 0 #000,
0 1.40em 0 -0.2em rgba(255, 255, 255, 0.22),
0 1.43em 0 #1A1A1A,
0 1.43em 0 #000,
0.70em 1.40em 0 -0.2em rgba(255, 255, 255, 0.22),
0.70em 1.43em 0 #1A1A1A,
0.70em 1.43em 0 #000,
0 2.10em 0 -0.2em rgba(255, 255, 255, 0.22),
0 2.10em 0 #1A1A1A,
0 2.10em 0 #000,
0.70em 2.10em 0 -0.2em rgba(255, 255, 255, 0.22),
0.70em 2.10em 0 #1A1A1A,
0.70em 2.10em 0 #000;
ボックスシャドウ:
インセット 0 0 0 0.2em #1A1A1A,
0 0 0 0em #000,
0 0.70em 0 -0.2em rgba(255, 255, 255, 0.22),
0 0.73em 0 #1A1A1A,
0 0.73em 0 #000,
0.70em 0.70em 0 -0.2em rgba(255, 255, 255, 0.22),
0.70em 0.73em 0 #1A1A1A,
0.70em 0.73em 0 #000,
0 1.40em 0 -0.2em rgba(255, 255, 255, 0.22),
0 1.43em 0 #1A1A1A,
0 1.43em 0 #000,
0.70em 1.40em 0 -0.2em rgba(255, 255, 255, 0.22),
0.70em 1.43em 0 #1A1A1A,
0.70em 1.43em 0 #000,
0 2.10em 0 -0.2em rgba(255, 255, 255, 0.22),
0 2.10em 0 #1A1A1A,
0 2.10em 0 #000,
0.70em 2.10em 0 -0.2em rgba(255, 255, 255, 0.22),
0.70em 2.10em 0 #1A1A1A,
0.70em 2.10em 0 #000;
}
.gamepads-slots:after {
内容: "1 2";
位置: 絶対;
上: 12em;
左: 3.6em;
フォントサイズ: 0.6em;
単語間隔: 5.7em;
色: #8B1A1A;
}
.カートリッジスロットホール {
幅: 82%;
高さ: 75%;
背景: #423F3F;
位置: 絶対;
左：8.6%
上位: 5%
境界線の半径: 0.2em;
左境界線: 0.1em 実線 rgba(255, 255, 255, 0.88);
右境界線: 0.1em 実線 rgba(255, 255, 255, 0.88);
ボックスシャドウ: インセット 0 2em 3em #000、インセット 0 -0.4em 0 #424242、インセット 0 -1.2em 0 #222;
}
.カートリッジスロットホール:before {
コンテンツ： "";
位置: 絶対;
幅: 92%;
左: 4%;
高さ: 2em;
下部: 1.15em;
背景: #141414;
背景: -moz-linear-gradient(left, rgba(20, 20, 20, 1) 0%, rgba(5, 5, 5, 1) 100%);
背景: -webkit-gradient(linear, 左上, 右上, color-stop(0%,rgba(20, 20, 20, 1)), color-stop(100%,rgba(5, 5, 5, 1)));
背景: -webkit-linear-gradient(左、rgba(20, 20, 20, 1) 0%、rgba(5, 5, 5, 1) 100%);
背景: -o-linear-gradient(left, rgba(20, 20, 20, 1) 0%,rgba(5, 5, 5, 1) 100%);
背景: -ms-linear-gradient(左、rgba(20, 20, 20, 1) 0%、rgba(5, 5, 5, 1) 100%);
背景: linear-gradient(右へ、rgba(20, 20, 20, 1) 0%、rgba(5, 5, 5, 1) 100%);
フィルター: progid:DXImageTransform.Microsoft.gradient( startColorstr='#141414', endColorstr='#050505',GradientType=1 );
}
.カートリッジスロットホール:after {
コンテンツ： "";
位置: 絶対;
幅: 0.2em;
高さ: 0.1em;
左: 1.8em;
トップ: 33%
背景: #3C3C3C;
色: #3C3C3C;
Box-Shadow：0.4em 0 0、0.8em 0、1.2em 0 0、1.6em 0 0、2em 0、2.4em 0、2.8em 0、3.2em 0、3.6em 0 0、4em 0 0、4.4em 0、 0、8.8em 0 0、9.2em 0、9.6em 0、10em 0 0、10.4em 0、10.8em 0、11.2em 0 0、11.6em 0、12em 0、12.4em 0、 、16.4em 0 0;
}
.gamepad-slot:before {
コンテンツ： "";
位置: 絶対;
幅: 72%;
左：14%
高さ: 86%;
上位：7%
境界線: 0.35em 実線 rgba(0, 0, 0, 0.53);
ボックスのサイズ: 境界線ボックス;
-moz-box-sizing: 境界線ボックス;
境界線の半径: 1em 80% 0.8em 0.8em / 1em 61% 0.8em 0.8em;
ボックスシャドウ: -0.1em 0 0 rgba(255, 255, 255, 0.02),インセット 0.1em 0 0 rgba(255, 255, 255, 0.03),インセット -0.1em 0.1em 0 rgba(255, 255, 255, 0.11);
}以上が、CSS3でNESゲームコンソールを実装するためのサンプルコードの詳細です。CSS3でNESゲームコンソールを実装する方法の詳細については、123WORDPRESS.COMの他の関連記事に注目してください。 |
推薦する
JavaScript 配列の詳細な概要
目次1. 配列誘導1. 文字列を配列に分割する2. コレクションとマップを新しい配列に変換する3. ...
Centos7 に Nginx 統合 Lua サンプル コードをインストール
序文私が使用しているパソコンはMacで、OSはmacOS Mojaveです。コンピュータに仮想マシン...
XHTML Web ページ チュートリアル
この記事は主に、初心者に XHTML の基本的な知識と、XHTML と HTML の違いを理解しても...
Windows での MySQL インストール チュートリアル (画像とテキスト付き)
MySQL インストール手順 MySQL は、スウェーデンの MySQL AB によって開発された...
React を使って小さなプログラムを書くための Remax フレームワークのコンパイル プロセス分析 (推奨)
Remax は、実行時に構文制限のないソリューションを採用した React を使用して小規模なプロ...
MySQL MHA の高可用性構成とフェイルオーバーの詳細な導入手順
目次1. MHAの紹介1. MHAとは何ですか? 2. MHAの構成3. MHAの特徴2. MySQ...
大きな MySQL テーブルに列を追加する方法
質問は https://www.zhihu.com/question/440231149 から参照さ...
Linux で at および cron スケジュールタスクをカスタマイズする方法
Linux システムには 2 種類のスケジュールされたタスクがあります。1 つは 1 回だけ実行され...
Windows での MySQL の使用: 自動スケジュールバックアップの実装
1. バックアップスクリプトを書く 著者：www.yumi-info.com 日付:20171222...
Vue+Spring Bootで検証コード機能を実現
この記事では、検証コード機能を実装するためのvue+spring bootの具体的なコードを例として...
Vue+Element UI でサマリーポップアップウィンドウを実装するプロセス全体
シナリオ: 検査文書には n 個の検査詳細があり、検査詳細には n 個の検査項目があります。実装効果...
CSS の clip-path プロパティの使用方法の詳細な説明
クリップパスの使用ポリゴン値は複数の座標点で構成されます。最初の値は x 方向、2 番目の値は y ...
Reactでのイベントバインディングの実装は3つの方法を指しています
1. 矢印関数1. 矢印関数自体はこれをバインドしないという事実を利用します。 2. render(...
Vmware + Ubuntu18.04 に Hbase 2.3.5 をインストールするための詳細なチュートリアル
序文前回の記事では Hadoop をインストールしましたが、今回は Hbase をインストールします...
docker で golang イメージに基づいて ssh サービスを構築する方法
以下は、docker の golang イメージに基づいて ssh サービスを構築するためのコードで...