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の他の関連記事に注目してください。 |
推薦する
HTML テーブル マークアップ チュートリアル (48): CSS で変更されたテーブル
<br />では、CSS 構文を巧みに使用してテーブルを美しくする方法を見てみましょう。...
JS での filter() 配列フィルターの使用
目次1. はじめに2. 方法の紹介3. 使用例要約する1. はじめに配列フィルターは、フロントエンド...
コマンドラインを使用してUbuntuのバージョンを検出する方法
方法1: lsb_releaseユーティリティを使用するlsb_release ユーティリティは、L...
Nginx 最適化サービスで Web ページ圧縮を実装する方法
リソースを節約するためにWebページの圧縮を設定する1.まず、設定を変更しましょう vim /usr...
MySQL alter ignore構文の詳細な説明
今日仕事中に、ビジネス側から次のような質問をされました。テーブルがあり、一意のフィールドを追加する必...
Weibo の一括フォロー解除機能を実装する JavaScript コード
Weibo ユーザーのフォローを一括で解除するクールな JavaScript コードWeibo には...
ウェブデザイナーは適した人材
<br />この世に道はない。より多くの人が歩くようになると、それは道になります。最初は...
Tomcat は、Springboot プロジェクトの WAR パッケージの起動時にエラーを報告します: 子の起動時にエラーが発生しました
今日、会社の Springboot プロジェクトは、テストのためにテスト サーバーにデプロイする準備...
Dockerリンクはコンテナの相互接続を実現します
目次1.1. IP経由のコンテナ間のネットワークアクセス1.2. コンテナ名またはコンテナIDによる...
CSS ボーダーは四隅の実装コードを追加します
1.html <div class="ログインボディ"> <...
IDEA は MySQL への接続時にエラーを報告します。サーバーが無効なタイムゾーンを返します。タブに移動して serverTimezone プロパティを設定してください。
これからの道は常に困難で、棘だらけです。歯を食いしばって、乗り越えられると信じてください。さあ、さあ...
CSSをiPhoneのフルスクリーンに適応させる方法
1. メディアクエリ方式 /*iPhone X への適応*/ @media 画面のみ、(デバイス幅:...
Linux システムでの CPU 使用率が高い場合のトラブルシューティングのアイデアと解決策
序文Linux 運用保守エンジニアとして、日々の業務の中で Linux サーバーの CPU 負荷が ...
MySQL 操作: JSON データ型の操作
前回の記事では、MySQL データ保存手順パラメータの詳細な例を紹介しました。今日は、JSON デー...
Amap を使用した React 実装例 (react-amap)
React の PC 版は Amap を使用するようにリファクタリングされました。情報を検索したと...