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 change the root password in MySQL 5.7
Starting from MySQL 5.7, many security updates ha...
SQL query for users who have placed orders for at least seven consecutive days
Create a table create table order(id varchar(10),...
How to choose the format when using binlog in MySQL
Table of contents 1. Three modes of binlog 1.Stat...
How to add conditional expressions to aggregate functions in MySql
MySQL filtering timing of where conditions and ha...
What is web design
<br />Original article: http://www.alistapar...
The meaning of status code in HTTP protocol
A status code that indicates a provisional respon...
Comprehensive analysis of prototypes, prototype objects, and prototype chains in js
Table of contents Understanding Prototypes Unders...
js to realize web message board function
This article example shares the specific code of ...
A brief discussion on VUE uni-app template syntax
1.v-bind (abbreviation:) To use data variables de...
Detailed explanation of TypeScript 2.0 marked union types
Table of contents Constructing payment methods us...
How to test the maximum number of TCP connections in Linux
Preface There is a misunderstanding about the max...
JavaScript to achieve mouse drag effect
This article shares the specific code of JavaScri...
Detailed explanation of the process of building an image server with nginx (the difference between root and alias)
The installation process is omitted (I installed ...
CSS code to distinguish ie8/ie9/ie10/ie11 chrome firefox
Website compatibility debugging is really annoyin...
Detailed explanation of Vue's TodoList case
<template> <div id="root"> ...