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の他の関連記事に注目してください。 |
推薦する
ウェブページのコメントにより IE でテキストがオーバーフローする
実験コードは次のとおりです。 </head> <body> <div ...
負荷分散と動的・静的分離を実現するNginx+Tomcatの原理の分析
1. Nginx ロードバランシングの実装原理1. Nginxはリバースプロキシを通じて負荷分散を実...
テーブルの追加と削除の操作を実装する js
この記事の例では、テーブルを追加および削除するためのjsの具体的なコードを参考までに共有しています。...
HTML CSS JS はタブページのサンプルコードを実装します
コードをコピーコードは次のとおりです。 <html xmlns="">...
Vueはログイン時に画像認証コードを実装します
この記事では、Vueログイン用画像認証コードの具体的なコードを例として紹介します。具体的な内容は以下...
Vue はボタンをクリックしてファイルをダウンロードする操作コードを実装します (バックエンド Java)
前回の記事では、ボタンをクリックしてファイルをダウンロードするVueの機能を紹介しました。今日は、ボ...
エコー後に要素編集フォームel-radioが選択できない問題を解決します
目次序文質問オンラインソリューション序文この記事の内容は私がこの業界に入ったときのメモを元にしている...
絵文字と問題解決のためのMySQL/Javaサーバーサポートの詳細な説明
この記事では、絵文字用の MySQL Java サーバーのサポートと問題解決方法について説明します。...
安全な構成のためにDockerでTLSを有効にする手順
序文以前、Docker の 2375 Remote API を有効にしていました。会社のセキュリティ...
Dockerコマンドの自動補完の実装
序文この友人がどれくらいDockerを使っていなかったのかは分かりませんが、突然Dockerコマンド...
指定フィールドによるMySQLカスタムリストのソートの実装
問題の説明ご存知のとおり、MySQL でフィールドを昇順に並べ替える SQL は次のとおりです (i...
メンテナンス可能なJSコードの書き方を教えます
目次保守可能なコードとは何ですか?コード規約1. 読みやすさ2. 変数と関数の命名3. 透過的な変数...
MySQL ストアド プロシージャで case ステートメントを使用する詳細な例
この記事では、例を使用して、MySQL ストアド プロシージャでの case ステートメントの使用方...
DockerにELKをインストールしてJSON形式のログ分析を実装する方法
ELKとは何ですか? ELK は、Elastic が提供するログ収集およびフロントエンド表示ソリュー...
ZabbixはPSK共有キーを使用してサーバーとエージェント間の通信を暗号化します。
Zabbix バージョン 3.0 以降、Zabbix サーバー、Zabbix プロキシ、Zabbi...