CSS3 implements the sample code of NES game console
Achieve results
Implementation Codehtml
<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" checked>
<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>Nintendo</h1>
<h2>ENTERTAINMENT SYSTEM</h2>
</div>
<div class="cartridge-slot">
<div class="cartridge-slot-border">
</div>
<div class="cartridge-slot-hole"></div>
</div>
</div>
<div class="nes-bottom">
<div class="power-box">
<input type="checkbox" id="power" />
<div class="reset"></div>
<label for="power" class="power"></label>
<div class="light"></div>
</div>
</div>
<div class="gamepads-slots">
<div class="gamepad-slot p1"></div>
<div class="gamepad-slot p2"></div>
</div>
</div>CSS3
@import url(https://fonts.googleapis.com/css?family=Coda+Caption:800);
body {
background: #DB5A48;
}
#size1, #size2, #size3, #size4 {
position: absolute;
left: -9999px;
}
input:checked + .size1, input:checked + .size2, input:checked + .size3, input:checked + .size4 {
box-shadow: inset 2px 3px 0px rgba(0, 0, 0, 0.34), inset -1px -1px 0px rgba(255, 255, 255, 0.22);
background: #7A7077;
}
.size1 {
position: absolute;
width: 20px;
height: 20px;
background: #CDC8C5;
left: 60px;
top: 60px;
border-radius: 50%;
}
.size2 {
position: absolute;
width: 40px;
height: 40px;
background: #CDC8C5;
left: 90px;
top: 50px;
border-radius: 50%;
}
.size3 {
position: absolute;
width: 60px;
height: 60px;
background: #CDC8C5;
left: 140px;
top: 40px;
border-radius: 50%;
}
.size4 {
position: absolute;
width: 80px;
height: 80px;
background: #CDC8C5;
left: 220px;
top: 30px;
border-radius: 50%;
}
#size1:checked ~ #nes{
font-size:8px
}
#size2:checked ~ #nes{
font-size:12px
}
#size3:checked ~ #nes{
font-size:16px
}
#size4:checked ~ #nes{
font-size:20px
}
#nes {
width: 45em;
height: 15em;
margin: 140px auto;
position: relative;
color: #B62F28;
font-family: 'Coda Caption', sans-serif;
-webkit-transition: all 0.1s;
-moz-transition: all 0.1s;
-o-transition: all 0.1s;
-ms-transition: all 0.1s;
transition: all 0.1s;
}
#nes:after {
content: "";
position: absolute;
width: 80%;
height: 0;
-webkit-box-shadow: 0 0 5em 3em rgba(0, 0, 0, 0.22);
box-shadow: 0 0 5em 3em rgba(0, 0, 0, 0.22);
bottom: -4%;
left: 10%;
z-index: -1;
border-radius: 50%;
}
#nes:before {
content: "";
position: absolute;
width: 99.4%;
height: 0;
top: -3%;
left: 0.3%;
border-bottom: 0.5em solid #C9C4C1;
border-left: 2em solid rgba(0, 0, 0, 0);
border-right: 2em solid rgba(0, 0, 0, 0);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing:border-box;
box-sizing: border-box;
}
.nes-top {
position: absolute;
top: 0;
left0;
width: 45em;
height: 7.4em;
background: #cdc8c5;
border-radius: 0.3em 0.3em 0 0;
-webkit-box-shadow: 0 0.1em 0em #B8B4B2,0 0.5em 0em -0.2em #535353;
box-shadow: 0 0.1em 0em #B8B4B2,0 0.5em 0em -0.2em #535353;
border-top: 0.2em solid rgba(255, 255, 255, 0.32);
border-left: 0.2em solid rgba(255, 255, 255, 0.32);
border-right: 0.2em solid rgba(0, 0, 0, 0.05);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing:border-box;
box-sizing: border-box;
}
h1 {
font-size: 1.5em;
position: absolute;
top: 0.4em;
left: 0.85em;
}
.lid h2 {
font-size: 0.6em;
position: absolute;
top: 5.1em;
left: 2.2em;
}
.lid {
z-index: 1;
width: 25em;
height: 6em;
background: #CDC8C5;
position: absolute;
left: 5em;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
-ms-transition: all 1s;
transition: all 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 0;
-webkit-transform-origin:0 0 -6em;
-moz-transform-origin:0 0 -6em;
-o-transform-origin:0 0 -6em;
-ms-transform-origin:0 0 -6em;
transform-origin:0 0 -6em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing:border-box;
box-sizing: border-box;
border-top: 0.2em solid rgba(255, 255, 255, 0.32);
top: -0.2em;
-webkit-box-shadow: 0 0.1em 0.2em 0 rgba(0, 0, 0, 0.41);
box-shadow: 0 0.1em 0.2em 0 rgba(0, 0, 0, 0.41);
border-right: 0.1em solid rgba(255, 255, 255, 0.26);
border-bottom: 0.1em solid rgba(255, 255, 255, 0.26);
border-radius: 0.15em;
}
.lid:before {
content: "";
position: absolute;
width: 20%;
left: 40%;
height: 0.2em;
bottom: 0;
background: #E7E7E7;
background: #CDC8C5;
background: -moz-linear-gradient(top, rgba(205, 200, 197, 1) 0%, rgba(231, 231, 231, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(205, 200, 197, 1)), color-stop(100%,rgba(231, 231, 231, 1)));
background: -webkit-linear-gradient(top, rgba(205, 200, 197, 1) 0%,rgba(231, 231, 231, 1) 100%);
background: -o-linear-gradient(top, rgba(205, 200, 197, 1) 0%,rgba(231, 231, 231, 1) 100%);
background: -ms-linear-gradient(top, rgba(205, 200, 197, 1) 0%,rgba(231, 231, 231, 1) 100%);
background: linear-gradient(to bottom, rgba(205, 200, 197, 1) 0%,rgba(231, 231, 231, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdc8c5', endColorstr='#e7e7e7',GradientType=0 );
box-shadow: 0.2em 0.05em 0.3em -0.1em rgba(0, 0, 0, 0.3);
}
.nes-top:hover .lid {
-webkit-transform:rotateX(55deg);
-moz-transform:rotateX(55deg);
-o-transform: rotateX(55deg);
-ms-transform:rotateX(55deg);
transform: rotateX(55deg);
-webkit-box-shadow: 0 3.1em 5.2em -2em rgba(0, 0, 0, 0.32);
box-shadow: 0 3.1em 5.2em -2em rgba(0, 0, 0, 0.32);
}
.nes-top:before {
content: "";
position: absolute;
border-right: 0.8em solid #B8B8B8;
top: -0.22em;
left: 4.8em;
border-top: 0.3em solid rgba(0, 0, 0, 0);
z-index: 1;
}
.nes-top:after {
content: "";
position: absolute;
border-left: 0.8em solid #B8B8B8;
top: -0.22em;
left: 29.4em;
border-top: 0.3em solid rgba(0, 0, 0, 0);
}
.lid:after {
content: "";
width: 23.9em;
height: 6.1em;
background: #CDC8C5;
position: absolute;
left: 0.45em;
top: -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);
transform: rotateX(90deg) translateY(-3em) translateZ(-3em);
}
.nes-bottom {
width: 39em;
height: 7.5em;
background: #7A7077;
position: absolute;
bottom: 0;
left: 3em;
border-bottom: 0.2em solid rgba(255, 255, 255, 0.1);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing:border-box;
box-sizing: border-box;
-webkit-box-shadow: 0 0.6em 1em -0.3em rgba(0, 0, 0, 0.45);
box-shadow: 0 0.6em 1em -0.3em rgba(0, 0, 0, 0.45);
}
.nes-bottom:after {
border-bottom: 6em solid transparent;
border-left: 3em solid #7A7077;
content: "";
height: 1.5em;
position: absolute;
right: -3em;
top: 0;
}
.nes-bottom:before {
border-bottom: 6em solid transparent;
border-right: 3em solid #7A7077;
content: "";
height: 1.5em;
position: absolute;
left: -3em;
top: 0;
}
.power-box {
position: absolute;
left: 1.4em;
width: 11.5em;
top: 0;
height: 5.8em;
border: 0.1em solid rgba(0, 0, 0, 0.05);
border-top: 0;
border-radius: 0.3em;
border-top-right-radius: 0;
border-right: 0.1em solid rgba(255, 255, 255, 0.05);
-webkit-box-shadow: 0 0.1em 0 0em rgba(0, 0, 0, 0.01);
box-shadow: 0 0.1em 0 0em rgba(0, 0, 0, 0.01);
color: #AC2828;
}
.light {
position: absolute;
width: 0.6em;
height: 0.6em;
left: 0.6em;
bottom: 1.3em;
background-color: #504F4F;
background-image: -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 );
background-image: -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 );
background-image: -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 );
background-image: -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 );
background-image: 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-background-size: 0.2em 0.2em;
-moz-background-size: 0.2em 0.2em;
background-size: 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);
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);
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s;
transition: all 0.2s;
}
#power:checked ~ .light {
background-image: -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 );
background-image: -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 );
background-image: -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 );
background-image: -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 );
background-image: 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: inset 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);
box-shadow: inset 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 {
background-color: rgba(255, 255, 255, 0.06);
background-image: 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 );
box-shadow: none;
}
#power {
position: absolute;
left: -9999px;
}
.power,.reset {
position: absolute;
cursor: pointer;
width: 6em;
line-height: 3.8em;
height: 2.8em;
left: 3em;
top: 5em;
font-size: 0.6em;
border-top: 0.5em solid rgba(0, 0, 0, 0.09);
border-right: 0.5em solid rgba(0, 0, 0, 0.03);
border-bottom: 0.5em solid rgba(255, 255, 255, 0.1);
border-left: 0.5em solid rgba(255, 255, 255, 0.04);
border-radius: 0.6em;
}
.reset {
left: 11em;
top: 5em;
}
.power:before,.reset:before {
content: "POWER";
position: absolute;
width: 94%;
height: 95%;
left: 3%;
top: 10%;
text-align: center;
border-radius: 0.3em;
border-top: 0.3em solid rgba(255, 255, 255, 0.09);
border-right: 1px solid rgba(255, 255, 255, 0.06);
border-bottom: 1px solid rgba(0, 0, 0, 0.04);
background: #7A7077;
-webkit-box-shadow: 0 -0.4em 0 #665E64,0 0.2em 1em -0.3em rgba(0, 0, 0, 0.69);
box-shadow: 0 -0.4em 0 #665E64,0 0.2em 1em -0.3em rgba(0, 0, 0, 0.69);
-webkit-transition: all 0.1s;
-moz-transition: all 0.1s;
-o-transition: all 0.1s;
-ms-transition: all 0.1s;
transition: all 0.1s;
}
.reset:before {
content: "RESET";
}
.power:hover:before,.reset:hover:before,#power:checked + .power:before {
top: 0;
-webkit-box-shadow: 0 -0.2em 0 #665E64,0 0.2em 0.6em -0.3em rgba(0, 0, 0, 0.69);
box-shadow: 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 {
top: -0.1em;
-webkit-box-shadow: 0 -0.1em 0 #665E64,0 0.1em 0.6em -0.3em rgba(0, 0, 0, 0.69), inset 0 0.2em 1em rgba(0, 0, 0, 0.07);
box-shadow: 0 -0.1em 0 #665E64,0 0.1em 0.6em -0.3em rgba(0, 0, 0, 0.69), inset 0 0.2em 1em rgba(0, 0, 0, 0.07);
border: none;
}
.cartridge-slot {
width: 25em;
height: 5.9em;
position: absolute;
left: 4.8em;
border-right: 0.2em solid rgba(0, 0, 0, 0.06);
border-bottom: 0.2em solid rgba(255, 255, 255, 0.28);
border-left: 0.2em solid rgba(0, 0, 0, 0.12);
border-radius: 0 0 0.5em 0.5em;
overflow: hidden;
}
.cartridge-slot:before {
position: absolute;
height: 88%;
content: "";
width: 95.5%;
left: -6%;
top: 0;
border-bottom: 3em solid rgba(0, 0, 0, 0.04);
border-right: 2em solid rgba(0, 0, 0, 0.1);
border-left: 2em solid rgba(0, 0, 0, 0.1);
}
.gamepads-slots {
height: 100%;
position: absolute;
width: 19%;
right: 13%;
background: #333;
border-top: 0.2em solid rgba(255, 255, 255, 0.15);
border-bottom: 0.2em solid rgba(255, 255, 255, 0.1);
-webkit-box-shadow: inset -0.2em 0 0 rgba(0, 0, 0, 0.1),inset 0.2em 0 0 rgba(0, 0, 0, 0.1),-0.2em 0 0 rgba(0, 0, 0, 0.2), 0.2em 0 0 rgba(0, 0, 0, 0.2), -0.25em 0 0 rgba(255, 255, 255, 0.10), 0.25em 0 0 rgba(255, 255, 255, 0.1), inset 0 -1.90em 0 #333, inset 0 -1.95em 0 rgba(255, 255, 255, 0.09), inset 0 -2em 0 rgba(0, 0, 0, 0.16), inset 0 -6.45em 0 #333, inset 0 -6.55em 0 rgba(0, 0, 0, 0.4), inset 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.16), inset 0 -8.7em 0 #333, inset 0 -8.75em 0 rgba(0, 0, 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.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.1),-0.2em 0 0 rgba(0, 0, 0, 0.2), 0.2em 0 0 rgba(0, 0, 0, 0.2), -0.25em 0 0 rgba(255, 255, 255, 0.10), 0.25em 0 0 rgba(255, 255, 255, 0.1), inset 0 -1.90em 0 #333, inset 0 -1.95em 0 rgba(255, 255, 255, 0.09), inset 0 -2em 0 rgba(0, 0, 0, 0.16), inset 0 -6.45em 0 #333, inset 0 -6.55em 0 rgba(0, 0, 0, 0.4), inset 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.16), inset 0 -8.7em 0 #333, inset 0 -8.75em 0 rgba(0, 0, 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.4), inset 0 1.4em 0 rgba(255, 255, 255, 0.08);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing:border-box;
box-sizing: border-box;
}
.cartridge-slot:after {
position: absolute;
width: 97%;
left: 1.2%;
height: 0.5em;
background: #CDC8C5;
bottom: 8%;
content: "";
}
.cartridge-slot-border {
position: absolute;
width: 95.5%;
left: 2%;
height: 0.4em;
background: #BEBABA;
bottom: 15%;
}
.cartridge-slot-border:before {
content: "";
position: absolute;
border-right: 0.2em solid #BEBABA;
top: 0em;
left: -0.2em;
border-top: 0.4em solid rgba(0, 0, 0, 0);
z-index: 1;
}
.cartridge-slot-border:after {
content: "";
position: absolute;
border-left: 0.2em solid #BEBABA;
top: 0em;
right: -0.2em;
border-top: 0.4em solid rgba(0, 0, 0, 0);
z-index: 1;
}
.gamepads-slots:before {
content: "";
position: absolute;
width: 99.4%;
height: 2%;
top: -3.2%;
left: -3.7%;
background: #333;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing:border-box;
box-sizing: border-box;
-webkit-transform: skew(72deg);
-moz-transform:skew(72deg);
-o-transform: skew(72deg);
-ms-transform:skew(72deg);
transform: skew(72deg);
}
.gamepad-slot {
position: absolute;
bottom: 2.15em;
width: 3em;
left: 0.8em;
height: 4em;
border-radius: 0.6em;
background: #303030;
border-top: 0.1em solid rgba(255, 255, 255, 0.09);
border-bottom: 0.1em solid #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);
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);
}
.p2 {
right: 0.8em;
left: inherit;
}
.gamepad-slot:after {
content: "";
position: absolute;
width: 0.6em;
height: 0.6em;
border-radius: 50%;
background: rgba(255, 255, 255, 0.22);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing:border-box;
box-sizing: border-box;
left: 0.8em;
top: 0.7em;
-webkit-box-shadow:
inset 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;
box-shadow:
inset 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 {
content: "1 2";
position: absolute;
top: 12em;
left: 3.6em;
font-size: 0.6em;
word-spacing: 5.7em;
color: #8B1A1A;
}
.cartridge-slot-hole {
width: 82%;
height: 75%;
background: #423F3F;
position: absolute;
left: 8.6%;
top: 5%;
border-radius: 0.2em;
border-left: 0.1em solid rgba(255, 255, 255, 0.88);
border-right: 0.1em solid rgba(255, 255, 255, 0.88);
box-shadow: inset 0 2em 3em #000, inset 0 -0.4em 0 #424242, inset 0 -1.2em 0 #222;
}
.cartridge-slot-hole:before {
content: "";
position: absolute;
width: 92%;
left: 4%;
height: 2em;
bottom: 1.15em;
background: #141414;
background: -moz-linear-gradient(left, rgba(20, 20, 20, 1) 0%, rgba(5, 5, 5, 1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(20, 20, 20, 1)), color-stop(100%,rgba(5, 5, 5, 1)));
background: -webkit-linear-gradient(left, rgba(20, 20, 20, 1) 0%,rgba(5, 5, 5, 1) 100%);
background: -o-linear-gradient(left, rgba(20, 20, 20, 1) 0%,rgba(5, 5, 5, 1) 100%);
background: -ms-linear-gradient(left, rgba(20, 20, 20, 1) 0%,rgba(5, 5, 5, 1) 100%);
background: linear-gradient(to right, rgba(20, 20, 20, 1) 0%,rgba(5, 5, 5, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#141414', endColorstr='#050505',GradientType=1 );
}
.cartridge-slot-hole:after {
content: "";
position: absolute;
width: 0.2em;
height: 0.1em;
left: 1.8em;
top: 33%;
background: #3C3C3C;
color: #3C3C3C;
box-shadow: 0.4em 0 0, 0.8em 0 0, 1.2em 0 0, 1.6em 0 0, 2em 0 0, 2.4em 0 0, 2.8em 0 0, 3.2em 0 0, 3.6em 0 0, 4em 0 0, 4.4em 0 0, 4.8em 0 0, 5.2em 0 0, 5.6em 0 0, 6em 0 0, 6.4em 0 0, 6.8em 0 0, 7.2em 0 0, 7.6em 0 0, 8em 0 0, 8.4em 0 0, 8.8em 0 0, 9.2em 0 0, 9.6em 0 0, 10em 0 0, 10.4em 0 0, 10.8em 0 0, 11.2em 0 0, 11.6em 0 0, 12em 0 0, 12.4em 0 0, 12.8em 0 0, 13.2em 0 0, 13.6em 0 0, 14em 0 0, 14.4em 0 0, 14.8em 0 0, 15.2em 0 0, 15.6em 0 0, 16em 0 0, 16.4em 0 0;
}
.gamepad-slot:before {
content: "";
position: absolute;
width: 72%;
left: 14%;
height: 86%;
top: 7%;
border: 0.35em solid rgba(0, 0, 0, 0.53);
box-sizing: border-box;
-moz-box-sizing: border-box;
border-radius: 1em 80% 0.8em 0.8em / 1em 61% 0.8em 0.8em;
box-shadow: -0.1em 0 0 rgba(255, 255, 255, 0.02),inset 0.1em 0 0 rgba(255, 255, 255, 0.03),inset -0.1em 0.1em 0 rgba(255, 255, 255, 0.11);
}The above is the details of the sample code for implementing the NES game console with CSS3. For more information about implementing the NES game console with CSS3, please pay attention to other related articles on 123WORDPRESS.COM! |
<<: Complete steps to enable gzip compression in nginx
>>: Detailed explanation of three ways to set borders in HTML
Recommend
How to query whether the mysql table is locked
Specific method: (Recommended tutorial: MySQL dat...
Nginx configuration 80 port access 8080 and project name address method analysis
Tomcat accesses the project, usually ip + port + ...
Detailed explanation of the use of DockerHub image repository
Previously, the images we used were all pulled fr...
Solve the problem of multiple listeners reported when starting tomcat in Idea
Error screenshot Can't find where the excepti...
Vue implements the product tab of the product details page function
This article example shares the specific code of ...
JS+AJAX realizes the linkage of province, city and district drop-down lists
This article shares the specific code of JS+AJAX ...
When installing a virtual machine on Thinkpad VMware, the message "This host supports Intel VT-x, but Intel VT-x is disabled" appears (problem solution)
Today, when I was using VMware to install a new v...
Summary of the differences between get and post requests in Vue
The operating environment of this tutorial: Windo...
How complicated is the priority of CSS styles?
Last night, I was looking at an interview question...
Two implementation solutions for vuex data persistence
Table of contents Business requirements: Solution...
Windows Server 2019 IIS10.0+PHP(FastCGI)+MySQL Environment Construction Tutorial
Preparation 1. Environmental Description: Operati...
Solving problems encountered when importing and exporting Mysql
background Since I converted all my tasks to Dock...
How to configure MySQL on Ubuntu 16.04 server and enable remote connection
background I am learning nodejs recently, and I r...
The use and difference between JavaScript pseudo-array and array
Pseudo-arrays and arrays In JavaScript, except fo...
Implementing WeChat tap animation effect based on CSS3 animation attribute
Seeing the recent popular WeChat tap function, I ...