CSS3 implementiert den Beispielcode der NES-Spielekonsole
Ergebnisse erzielen
Implementierungscodehtml
<Eingabetyp="Radio" Name="nes-size" id="Größe1">
<label für="Größe1" Klasse="Größe1" ></label>
<Eingabetyp="Radio" Name="nes-size" id="size2">
<label für="Größe2" Klasse="Größe2"></label>
<Eingabetyp="radio" Name="nes-size" ID="size3" aktiviert>
<label für="Größe3" Klasse="Größe3"></label>
<Eingabetyp="Radio" Name="nes-size" id="size4">
<label für="Größe4" Klasse="Größe4"></label>
<div id="nes">
<div Klasse="nes-top">
<div Klasse="Deckel">
<h1>Nintendo</h1>
<h2>UNTERHALTUNGSSYSTEM</h2>
</div>
<div Klasse="Kassettensteckplatz">
<div Klasse="Cartridge-Slot-Bord">
</div>
<div Klasse="Cartridge-Slot-Hole"></div>
</div>
</div>
<div Klasse="nes-bottom">
<div Klasse="Stromversorgungskasten">
<input Typ="Kontrollkästchen" id="Leistung" />
<div Klasse="Zurücksetzen"></div>
<label für="Leistung" Klasse="Leistung"></label>
<div Klasse="Licht"></div>
</div>
</div>
<div Klasse="Gamepads-Slots">
<div Klasse="Gamepad-Slot p1"></div>
<div Klasse="Gamepad-Slot p2"></div>
</div>
</div>CSS3
@import-URL (https://fonts.googleapis.com/css?family=Coda+Caption:800);
Körper {
Hintergrund: #DB5A48;
}
#Größe1, #Größe2, #Größe3, #Größe4 {
Position: absolut;
links: -9999px;
}
Eingabe: geprüft + .size1, Eingabe: geprüft + .size2, Eingabe: geprüft + .size3, Eingabe: geprüft + .size4 {
Box-Schatten: Einschub 2px 3px 0px rgba(0, 0, 0, 0,34), Einschub -1px -1px 0px rgba(255, 255, 255, 0,22);
Hintergrund: #7A7077;
}
.Größe1 {
Position: absolut;
Breite: 20px;
Höhe: 20px;
Hintergrund: #CDC8C5;
links: 60px;
oben: 60px;
Randradius: 50 %;
}
.Größe2 {
Position: absolut;
Breite: 40px;
Höhe: 40px;
Hintergrund: #CDC8C5;
links: 90px;
oben: 50px;
Randradius: 50 %;
}
.Größe3 {
Position: absolut;
Breite: 60px;
Höhe: 60px;
Hintergrund: #CDC8C5;
links: 140px;
oben: 40px;
Randradius: 50 %;
}
.Größe4 {
Position: absolut;
Breite: 80px;
Höhe: 80px;
Hintergrund: #CDC8C5;
links: 220px;
oben: 30px;
Randradius: 50 %;
}
#size1:überprüft ~ #nes{
Schriftgröße: 8px
}
#size2:überprüft ~ #nes{
Schriftgröße: 12px
}
#size3:überprüft ~ #nes{
Schriftgröße: 16px
}
#size4:überprüft ~ #nes{
Schriftgröße: 20px
}
#nes {
Breite: 45em;
Höhe: 15em;
Rand: 140px automatisch;
Position: relativ;
Farbe: #B62F28;
Schriftfamilie: „Coda Caption“, serifenlos;
-webkit-transition: alle 0,1 s;
-moz-Übergang: alle 0,1 s;
-o-Übergang: alle 0,1 s;
-ms-Übergang: alle 0,1 s;
Übergang: alle 0,1 s;
}
#nes:nach {
Inhalt: "";
Position: absolut;
Breite: 80%;
Höhe: 0;
-webkit-box-shadow: 0 0 5em 3em rgba(0, 0, 0, 0,22);
Kastenschatten: 0 0 5em 3em rgba (0, 0, 0, 0,22);
unten: -4%;
links: 10%;
z-Index: -1;
Randradius: 50 %;
}
#nes:vor {
Inhalt: "";
Position: absolut;
Breite: 99,4 %;
Höhe: 0;
oben: -3%;
links: 0,3%;
Rahmen unten: 0,5em durchgezogen #C9C4C1;
Rahmen links: 2em durchgezogen rgba(0, 0, 0, 0);
Rahmen rechts: 2em durchgezogen rgba(0, 0, 0, 0);
-webkit-box-sizing: Rahmenbox;
-moz-box-sizing: Rahmenbox;
-ms-box-sizing:Rahmenbox;
Box-Größe: Rahmenbox;
}
.nes-oben {
Position: absolut;
oben: 0;
links0;
Breite: 45em;
Höhe: 7,4em;
Hintergrund: #cdc8c5;
Rahmenradius: 0,3em 0,3em 0 0;
-webkit-box-shadow: 0 0,1em 0em #B8B4B2,0 0,5em 0em -0,2em #535353;
Kastenschatten: 0 0,1em 0em #B8B4B2,0 0,5em 0em -0,2em #535353;
Rahmen oben: 0,2em durchgezogen rgba(255, 255, 255, 0,32);
Rahmen links: 0,2em durchgezogen rgba(255, 255, 255, 0,32);
Rahmen rechts: 0,2em durchgezogen rgba (0, 0, 0, 0,05);
-webkit-box-sizing: Rahmenbox;
-moz-box-sizing: Rahmenbox;
-ms-box-sizing:Rahmenbox;
Box-Größe: Rahmenbox;
}
h1 {
Schriftgröße: 1,5em;
Position: absolut;
oben: 0,4em;
links: 0,85em;
}
.lid h2 {
Schriftgröße: 0,6em;
Position: absolut;
oben: 5,1em;
links: 2,2em;
}
.lid {
Z-Index: 1;
Breite: 25em;
Höhe: 6em;
Hintergrund: #CDC8C5;
Position: absolut;
links: 5em;
-webkit-transition: alles 1en;
-moz-Übergang: alles 1en;
-o-Übergang: alles 1en;
-ms-Übergang: alles 1 s;
Übergang: alles 1en;
-WebKit-Transform-Style: 3D bewahren;
-moz-transform-style: 3d bewahren;
-ms-transform-style: 3d bewahren;
Transformationsstil: 3D bewahren;
-WebKit-Perspektive: 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-Ursprung:0 0 -6em;
-webkit-box-sizing: Rahmenbox;
-moz-box-sizing: Rahmenbox;
-ms-box-sizing:Rahmenbox;
Box-Größe: Rahmenbox;
Rahmen oben: 0,2em durchgezogen rgba(255, 255, 255, 0,32);
oben: -0,2em;
-webkit-box-shadow: 0 0,1em 0,2em 0 rgba(0, 0, 0, 0,41);
Kastenschatten: 0 0,1em 0,2em 0 rgba (0, 0, 0, 0,41);
Rahmen rechts: 0,1em durchgezogen rgba(255, 255, 255, 0,26);
Rahmen unten: 0,1em durchgezogen rgba (255, 255, 255, 0,26);
Randradius: 0,15em;
}
.lid:vor {
Inhalt: "";
Position: absolut;
Breite: 20 %;
links: 40%;
Höhe: 0,2em;
unten: 0;
Hintergrund: #E7E7E7;
Hintergrund: #CDC8C5;
Hintergrund: -moz-linear-gradient(oben, rgba(205, 200, 197, 1) 0%, rgba(231, 231, 231, 1) 100%);
Hintergrund: -webkit-gradient(linear, links oben, links unten, Farbstopp(0%,rgba(205, 200, 197, 1)), Farbstopp(100%,rgba(231, 231, 231, 1)));
Hintergrund: -webkit-linear-gradient(oben, rgba(205, 200, 197, 1) 0%, rgba(231, 231, 231, 1) 100%);
Hintergrund: -o-linear-gradient(oben, rgba(205, 200, 197, 1) 0%, rgba(231, 231, 231, 1) 100%);
Hintergrund: -ms-linear-gradient(oben, rgba(205, 200, 197, 1) 0%, rgba(231, 231, 231, 1) 100%);
Hintergrund: linearer Farbverlauf (nach unten, rgba (205, 200, 197, 1) 0 %, rgba (231, 231, 231, 1) 100 %);
Filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdc8c5', endColorstr='#e7e7e7',GradientType=0 );
Kastenschatten: 0,2em 0,05em 0,3em -0,1em rgba (0, 0, 0, 0,3);
}
.nes-top:hover .lid {
-webkit-transform:rotateX(55 Grad);
-moz-transform:rotateX(55 Grad);
-o-transform: RotiereX(55 Grad);
-ms-transform:rotateX(55 Grad);
transformieren: rotierenX(55 Grad);
-webkit-box-shadow: 0 3,1em 5,2em -2em rgba(0, 0, 0, 0,32);
Kastenschatten: 0 3,1em 5,2em -2em rgba (0, 0, 0, 0,32);
}
.nes-top:vor {
Inhalt: "";
Position: absolut;
Rand rechts: 0,8em durchgezogen #B8B8B8;
oben: -0,22em;
links: 4,8em;
Rahmen oben: 0,3em durchgezogen rgba(0, 0, 0, 0);
Z-Index: 1;
}
.nes-top:nach {
Inhalt: "";
Position: absolut;
Rahmen links: 0,8em durchgezogen #B8B8B8;
oben: -0,22em;
links: 29,4em;
Rahmen oben: 0,3em durchgezogen rgba(0, 0, 0, 0);
}
.lid:nach {
Inhalt: "";
Breite: 23,9em;
Höhe: 6,1em;
Hintergrund: #CDC8C5;
Position: absolut;
links: 0,45em;
oben: -6em;
-webkit-transform: RotiereX(90 Grad) VerschiebeY(-3em) VerschiebeZ(-3em);
-moz-transform: RotiereX(90 Grad) VerschiebeY(-3em) VerschiebeZ(-3em);
-o-transform: RotiereX(90 Grad) VerschiebeY(-3em) VerschiebeZ(-3em);
-ms-transform: RotiereX(90 Grad) VerschiebeY(-3em) VerschiebeZ(-3em);
transformieren: X drehen (90 Grad) Y verschieben (-3em) Z verschieben (-3em);
}
.nes-bottom {
Breite: 39em;
Höhe: 7,5em;
Hintergrund: #7A7077;
Position: absolut;
unten: 0;
links: 3em;
Rahmen unten: 0,2em durchgezogen rgba (255, 255, 255, 0,1);
-webkit-box-sizing: Rahmenbox;
-moz-box-sizing: Rahmenbox;
-ms-box-sizing:Rahmenbox;
Box-Größe: Rahmenbox;
-webkit-box-shadow: 0 0,6em 1em -0,3em rgba(0, 0, 0, 0,45);
Kastenschatten: 0 0,6em 1em -0,3em rgba (0, 0, 0, 0,45);
}
.nes-bottom:nach {
Rahmen unten: 6em durchgehend transparent;
Rahmen links: 3em durchgezogen #7A7077;
Inhalt: "";
Höhe: 1,5em;
Position: absolut;
rechts: -3em;
oben: 0;
}
.nes-bottom:vor {
Rahmen unten: 6em durchgehend transparent;
Rand rechts: 3em durchgezogen #7A7077;
Inhalt: "";
Höhe: 1,5em;
Position: absolut;
links: -3em;
oben: 0;
}
.Powerbox {
Position: absolut;
links: 1,4em;
Breite: 11,5em;
oben: 0;
Höhe: 5,8em;
Rand: 0,1em durchgezogen rgba(0, 0, 0, 0,05);
Rahmen oben: 0;
Randradius: 0,3em;
Rahmen oben rechts-Radius: 0;
Rahmen rechts: 0,1em durchgezogen rgba(255, 255, 255, 0,05);
-webkit-box-shadow: 0 0,1em 0 0em rgba(0, 0, 0, 0,01);
Kastenschatten: 0 0,1em 0 0em rgba(0, 0, 0, 0,01);
Farbe: #AC2828;
}
.Licht {
Position: absolut;
Breite: 0,6em;
Höhe: 0,6em;
links: 0,6em;
unten: 1,3em;
Hintergrundfarbe: #504F4F;
Hintergrundbild: -webkit-linear-gradient(45 Grad, #3D3D3D 25 %, rgba(0, 0, 0, 0) 25 %, rgba(0, 0, 0, 0) 75 %, #3D3D3D 75 %, #3D3D3D ), -webkit-linear-gradient(-45 Grad, #3D3D3D 25 %, rgba(0, 0, 0, 0) 25 %, rgba(0, 0, 0, 0) 75 %, #3D3D3D 75 %, #3D3D3D );
Hintergrundbild: -moz-linear-gradient(45 Grad, #3D3D3D 25 %, rgba(0, 0, 0, 0) 25 %, rgba(0, 0, 0, 0) 75 %, #3D3D3D 75 %, #3D3D3D ), -moz-linear-gradient(-45 Grad, #3D3D3D 25 %, rgba(0, 0, 0, 0) 25 %, rgba(0, 0, 0, 0) 75 %, #3D3D3D 75 %, #3D3D3D );
Hintergrundbild: -o-linear-gradient(45 Grad, #3D3D3D 25 %, rgba(0, 0, 0, 0) 25 %, rgba(0, 0, 0, 0) 75 %, #3D3D3D 75 %, #3D3D3D ), -o-linear-gradient(-45 Grad, #3D3D3D 25 %, rgba(0, 0, 0, 0) 25 %, rgba(0, 0, 0, 0) 75 %, #3D3D3D 75 %, #3D3D3D );
Hintergrundbild: -ms-linear-gradient(45 Grad, #3D3D3D 25 %, rgba(0, 0, 0, 0) 25 %, rgba(0, 0, 0, 0) 75 %, #3D3D3D 75 %, #3D3D3D ), -ms-linear-gradient(-45 Grad, #3D3D3D 25 %, rgba(0, 0, 0, 0) 25 %, rgba(0, 0, 0, 0) 75 %, #3D3D3D 75 %, #3D3D3D );
Hintergrundbild: linearer Farbverlauf (45 Grad, #3D3D3D 25 %, rgba (0, 0, 0, 0) 25 %, rgba (0, 0, 0, 0) 75 %, #3D3D3D 75 %, #3D3D3D), linearer Farbverlauf (-45 Grad, #3D3D3D 25 %, rgba (0, 0, 0, 0) 25 %, rgba (0, 0, 0, 0) 75 %, #3D3D3D 75 %, #3D3D3D);
-webkit-Hintergrundgröße: 0,2em 0,2em;
-moz-Hintergrundgröße: 0,2em 0,2em;
Hintergrundgröße: 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);
Kastenschatten: -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-Übergang: alle 0,2 s;
-moz-Übergang: alle 0,2 s;
-o-Übergang: alle 0,2 s;
-ms-Übergang: alle 0,2 s;
Übergang: alle 0,2 s;
}
#power:geprüft ~ .light {
Hintergrundbild: -webkit-linear-gradient(45 Grad, #FFF 25 %, #FFF 25 %, #FFF 75 %, #FFF 75 %, #FFF ), -webkit-linear-gradient(-45 Grad, #FFF 25 %, rgba(0, 0, 0, 0) 25 %, rgba(0, 0, 0, 0) 75 %, #FFF 75 %, #FFF );
Hintergrundbild: -moz-linear-gradient(45 Grad, #FFF 25 %, #FFF 25 %, #FFF 75 %, #FFF 75 %, #FFF ), -moz-linear-gradient(-45 Grad, #FFF 25 %, rgba(0, 0, 0, 0) 25 %, rgba(0, 0, 0, 0) 75 %, #FFF 75 %, #FFF );
Hintergrundbild: -o-linear-gradient(45 Grad, #FFF 25 %, #FFF 25 %, #FFF 75 %, #FFF 75 %, #FFF ), -o-linear-gradient(-45 Grad, #FFF 25 %, rgba(0, 0, 0, 0) 25 %, rgba(0, 0, 0, 0) 75 %, #FFF 75 %, #FFF );
Hintergrundbild: -ms-linear-gradient(45 Grad, #FFF 25 %, #FFF 25 %, #FFF 75 %, #FFF 75 %, #FFF ), -ms-linear-gradient(-45 Grad, #FFF 25 %, rgba(0, 0, 0, 0) 25 %, rgba(0, 0, 0, 0) 75 %, #FFF 75 %, #FFF );
Hintergrundbild: linearer Farbverlauf (45 Grad, #FFF 25 %, #FFF 25 %, #FFF 75 %, #FFF 75 %, #FFF ), linearer Farbverlauf (-45 Grad, #FFF 25 %, rgba (0, 0, 0, 0) 25 %, rgba (0, 0, 0, 0) 75 %, #FFF 75 %, #FFF );
-webkit-box-shadow: Einschub 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-Schatten: Einschub 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:geprüft + .reset:aktiv ~ .Licht, #power:geprüft + .reset:Fokus ~ .Licht {
Hintergrundfarbe: rgba(255, 255, 255, 0,06);
Hintergrundbild: linearer Farbverlauf (45 Grad, #3D3D3D 25 %, rgba (0, 0, 0, 0) 25 %, rgba (0, 0, 0, 0) 75 %, #3D3D3D 75 %, #3D3D3D), linearer Farbverlauf (-45 Grad, #3D3D3D 25 %, rgba (0, 0, 0, 0) 25 %, rgba (0, 0, 0, 0) 75 %, #3D3D3D 75 %, #3D3D3D);
Kastenschatten: keiner;
}
#Leistung {
Position: absolut;
links: -9999px;
}
.Ein-/Ausschalten,.Zurücksetzen {
Position: absolut;
Cursor: Zeiger;
Breite: 6em;
Zeilenhöhe: 3,8em;
Höhe: 2,8em;
links: 3em;
oben: 5em;
Schriftgröße: 0,6em;
Rahmen oben: 0,5em durchgezogen rgba (0, 0, 0, 0,09);
Rahmen rechts: 0,5em durchgezogen rgba(0, 0, 0, 0,03);
Rahmen unten: 0,5em durchgezogen rgba (255, 255, 255, 0,1);
Rahmen links: 0,5em durchgezogen rgba(255, 255, 255, 0,04);
Randradius: 0,6em;
}
.zurücksetzen {
links: 11em;
oben: 5em;
}
.power:vorher,.reset:vorher {
Inhalt: "MACHT";
Position: absolut;
Breite: 94 %;
Höhe: 95%;
links: 3%;
oben: 10 %;
Textausrichtung: zentriert;
Randradius: 0,3em;
Rahmen oben: 0,3em durchgezogen rgba(255, 255, 255, 0,09);
Rahmen rechts: 1px durchgezogen rgba(255, 255, 255, 0,06);
Rahmen unten: 1px durchgezogen rgba(0, 0, 0, 0,04);
Hintergrund: #7A7077;
-webkit-box-shadow: 0 -0,4em 0 #665E64,0 0,2em 1em -0,3em rgba(0, 0, 0, 0,69);
Boxschatten: 0 -0,4em 0 #665E64,0 0,2em 1em -0,3em rgba (0, 0, 0, 0,69);
-webkit-transition: alle 0,1 s;
-moz-Übergang: alle 0,1 s;
-o-Übergang: alle 0,1 s;
-ms-Übergang: alle 0,1 s;
Übergang: alle 0,1 s;
}
.reset:vor {
Inhalt: "RESET";
}
.power:hover:before,.reset:hover:before,#power:geprüft + .power:before {
oben: 0;
-webkit-box-shadow: 0 -0,2em 0 #665E64,0 0,2em 0,6em -0,3em rgba(0, 0, 0, 0,69);
Boxschatten: 0 -0,2em 0 #665E64,0 0,2em 0,6em -0,3em rgba (0, 0, 0, 0,69);
}
.power:focus:vorher, .power:active:vorher, .reset:focus:vorher, .reset:active:vorher {
oben: -0,1em;
-webkit-box-shadow: 0 -0,1em 0 #665E64,0 0,1em 0,6em -0,3em rgba(0, 0, 0, 0,69), Einschub 0 0,2em 1em rgba(0, 0, 0, 0,07);
Boxschatten: 0 -0,1em 0 #665E64,0 0,1em 0,6em -0,3em rgba (0, 0, 0, 0,69), Einschub 0 0,2em 1em rgba (0, 0, 0, 0,07);
Rand: keiner;
}
.cartridge-slot {
Breite: 25em;
Höhe: 5,9em;
Position: absolut;
links: 4,8em;
Rahmen rechts: 0,2em durchgezogen rgba (0, 0, 0, 0,06);
Rahmen unten: 0,2em durchgezogen rgba (255, 255, 255, 0,28);
Rahmen links: 0,2em durchgezogen rgba (0, 0, 0, 0,12);
Rahmenradius: 0 0 0,5em 0,5em;
Überlauf: versteckt;
}
.cartridge-slot:vor {
Position: absolut;
Höhe: 88%;
Inhalt: "";
Breite: 95,5 %;
links: -6%;
oben: 0;
Rahmen unten: 3em durchgezogen rgba (0, 0, 0, 0,04);
Rahmen rechts: 2em durchgezogen rgba(0, 0, 0, 0,1);
Rahmen links: 2em durchgezogen rgba (0, 0, 0, 0,1);
}
.gamepads-slots {
Höhe: 100%;
Position: absolut;
Breite: 19%;
rechts: 13%;
Hintergrund: #333;
Rahmen oben: 0,2em durchgezogen rgba(255, 255, 255, 0,15);
Rahmen unten: 0,2em durchgezogen 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), Einschub 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,2), 0,25, 0, 0,25, 0, 255, 255, 255, 255, 255, 255, 0,20, 0,25, 0,25, 0,25, 0,25, 0,25, 255, 255, 255, 255, 255, 255, 0,25, 0,25, 0,25, 0,25, 0,25, 0,25, 0,25, 255, 255, 255, 255, 255, 0,25, 0,25, 0,25, 0,25) 5, 255, 255 0 RGBA (255, 255, 255, 0,05), Einschub 0 -7,35EM 0 #333, Einschub 0 -7,4EM 0 RGBA (255, 255, 255, 0,09), Einschub 0 -7.45EM 0 RGBA (0, 0, 0,16), Einschub 0 -8.7.7EM 0 #333, INSET 0, INSET 0, 75, 0 -8.7EM 0 #333. Einschub 0 -8,85EM 0 RGBA (255, 255, 255, 0,05), Einschub 0 1,3EM 0 #333, Einschub 0 1.35EM 0 RGBA (0, 0, 0, 0,4), Einschub 0 1,4EM 0 RGBA (255, 255, 255, 0,08);
-webkit-box-sizing: Rahmenbox;
-moz-box-sizing: Rahmenbox;
-ms-box-sizing:Rahmenbox;
Box-Größe: Rahmenbox;
}
.cartridge-slot:nach {
Position: absolut;
Breite: 97%;
links: 1,2 %;
Höhe: 0,5em;
Hintergrund: #CDC8C5;
unten: 8 %;
Inhalt: "";
}
.cartridge-slot-border {
Position: absolut;
Breite: 95,5 %;
links: 2%;
Höhe: 0,4em;
Hintergrund: #BEBABA;
unten: 15 %;
}
.cartridge-slot-border:before {
Inhalt: "";
Position: absolut;
Rand rechts: 0,2em durchgezogen #BEBABA;
oben: 0em;
links: -0,2em;
Rahmen oben: 0,4em durchgezogen rgba(0, 0, 0, 0);
Z-Index: 1;
}
.cartridge-slot-border:nach {
Inhalt: "";
Position: absolut;
Rahmen links: 0,2em durchgezogen #BEBABA;
oben: 0em;
rechts: -0,2em;
Rahmen oben: 0,4em durchgezogen rgba(0, 0, 0, 0);
Z-Index: 1;
}
.gamepads-slots:vor {
Inhalt: "";
Position: absolut;
Breite: 99,4 %;
Höhe: 2%;
oben: -3,2 %;
links: -3,7%;
Hintergrund: #333;
-webkit-box-sizing: Rahmenbox;
-moz-box-sizing: Rahmenbox;
-ms-box-sizing:Rahmenbox;
Box-Größe: Rahmenbox;
-webkit-transform: Schräglage (72 Grad);
-moz-transform:skew(72 Grad);
-o-transform: Schrägstellung (72 Grad);
-ms-transform:Skew(72 Grad);
Transformation: Schrägstellung (72 Grad);
}
.gamepad-slot {
Position: absolut;
unten: 2,15em;
Breite: 3em;
links: 0,8em;
Höhe: 4em;
Randradius: 0,6em;
Hintergrund: #303030;
Rahmen oben: 0,1em durchgezogen rgba(255, 255, 255, 0,09);
Rahmen unten: 0,1em durchgezogen #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);
Kastenschatten: 0 -0,1em 0 0,1em rgba(255, 255, 255, 0),0 -0,1em 0em 0,1em rgba(0, 0, 0, 0,19);
}
.p2 {
rechts: 0,8em;
links: erben;
}
.gamepad-slot:nach {
Inhalt: "";
Position: absolut;
Breite: 0,6em;
Höhe: 0,6em;
Randradius: 50 %;
Hintergrund: rgba(255, 255, 255, 0,22);
-webkit-box-sizing: Rahmenbox;
-moz-box-sizing: Rahmenbox;
-ms-box-sizing:Rahmenbox;
Box-Größe: Rahmenbox;
links: 0,8em;
oben: 0,7em;
-WebKit-Box-Schatten:
Einschub 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;
Kastenschatten:
Einschub 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:nach {
Inhalt: "1 2";
Position: absolut;
oben: 12em;
links: 3,6em;
Schriftgröße: 0,6em;
Wortabstand: 5,7em;
Farbe: #8B1A1A;
}
.cartridge-slot-hole {
Breite: 82%;
Höhe: 75%;
Hintergrund: #423F3F;
Position: absolut;
links: 8,6 %;
oben: 5%;
Randradius: 0,2em;
Rahmen links: 0,1em durchgezogen rgba(255, 255, 255, 0,88);
Rahmen rechts: 0,1em durchgezogen rgba(255, 255, 255, 0,88);
Box-Shadow: Einschub 0 2em 3em #000, Einschub 0 -0,4em 0 #424242, Einschub 0 -1,2em 0 #222;
}
.cartridge-slot-hole:vor {
Inhalt: "";
Position: absolut;
Breite: 92 %;
links: 4%;
Höhe: 2em;
unten: 1,15em;
Hintergrund: #141414;
Hintergrund: -moz-linear-gradient(links, rgba(20, 20, 20, 1) 0 %, rgba(5, 5, 5, 1) 100 %);
Hintergrund: -webkit-gradient(linear, links oben, rechts oben, Farbstopp(0%, rgba(20, 20, 20, 1)), Farbstopp(100%, rgba(5, 5, 5, 1)));
Hintergrund: -webkit-linear-gradient(links, rgba(20, 20, 20, 1) 0%, rgba(5, 5, 5, 1) 100%);
Hintergrund: -o-linear-gradient(links, rgba(20, 20, 20, 1) 0%, rgba(5, 5, 5, 1) 100%);
Hintergrund: -ms-linear-gradient(links, rgba(20, 20, 20, 1) 0%, rgba(5, 5, 5, 1) 100%);
Hintergrund: linearer Farbverlauf (nach rechts, 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:nach {
Inhalt: "";
Position: absolut;
Breite: 0,2em;
Höhe: 0,1em;
links: 1,8em;
oben: 33 %;
Hintergrund: #3C3C3C;
Farbe: #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 {
Inhalt: "";
Position: absolut;
Breite: 72%;
links: 14%;
Höhe: 86%;
oben: 7%;
Rand: 0,35em durchgezogen rgba(0, 0, 0, 0,53);
Box-Größe: Rahmenbox;
-moz-box-sizing: Rahmenbox;
Randradius: 1em 80 % 0,8em 0,8em / 1em 61 % 0,8em 0,8em;
Box-Schatten: -0,1em 0 0 rgba(255, 255, 255, 0,02), Einschub 0,1em 0 0 rgba(255, 255, 255, 0,03), Einschub -0,1em 0,1em 0 rgba(255, 255, 255, 0,11);
}Oben sind die Details des Beispielcodes zur Implementierung der NES-Spielkonsole mit CSS3. Weitere Informationen zur Implementierung der NES-Spielkonsole mit CSS3 finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM! |
<<: Detaillierte Erklärung der berechneten Eigenschaften in Vue
>>: Detaillierte Erklärung der drei Möglichkeiten zum Festlegen von Rahmen in HTML
Artikel empfehlen
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.18 winx64
Die Installation komprimierter Pakete hat sich se...
So führen Sie das React-Projekt auf dem offiziellen WeChat-Konto aus
Inhaltsverzeichnis 1. Verwenden Sie das „A“-Tag, ...
Grafisches Tutorial zur Installation und Aktivierung von VMware Workstation 14 Pro
In diesem Artikel erfahren Sie alles über die Ins...
Detaillierte Erklärung der Schlüsselwörter und reservierten Wörter in MySQL 5.7
Vorwort Die Schlüsselwörter von MySQL und Oracle ...
Detaillierte Erläuterung der Server- und Standortkonfiguration der einfachen Weiterleitungsanforderung von nginx
Lassen Sie uns kurz die Konfiguration von Server ...
12 Javascript-Tabellensteuerelemente (DataGrid) sind aussortiert
Wenn die DataSource-Eigenschaft eines DataGrid-Ste...
Ein Artikel, der Ihnen hilft, jQuery-Animationen zu verstehen
Inhaltsverzeichnis 1. Steuern Sie die Anzeige und...
Verwenden von CSS zum Implementieren einer Ladeanimation des Android-Systems
Im Web gibt es zwei gängige Ladesymbole: eines is...
Grafisches Tutorial zur Installation der MySQL 8.0.12 Winx64-Dekomprimierungsversion
Die Installation der Dekomprimierungsversion von ...
Interpretation der Vue-Komponentenregistrierungsmethode
Inhaltsverzeichnis Überblick 1. Globale Registrie...
Vier Möglichkeiten zum Erstellen von Objekten in JS
Inhaltsverzeichnis 1. Objekte durch Literalwert e...
CSS HACK für IE6/IE7/IE8/IE9/FF (Zusammenfassung)
Seit ich die offizielle Version von IE8.0 install...
Beispiel für die Einrichtung eines Third-Level-Domain-Namens in nginx
Problembeschreibung Durch die Konfiguration von n...
Beispielcode für CSS-Flex-Layout mit automatischem Zeilenumbruch
Um einen Flex-Container zu erstellen, fügen Sie e...
Der Prozess des Aufbaus einer Entwicklungsumgebung basierend auf Visual Studio Code + React
Entwicklungsumgebungsfenster Entwicklungstools Vi...