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
Das Homepage-Design spiegelt am besten das Niveau des Webdesigners wider
Bei den vielen Projekten, an denen ich mitgearbei...
So setzen Sie das Root-Passwort in mysql8.0.12 zurück
Wenn Sie nach der Installation der Datenbank das ...
CSS3-Animation zum Erzielen des Streamer-Button-Effekts
Beim Erlernen von CSS3 habe ich festgestellt, das...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.10 WinX64 (Win10)
MySQL ist eine relativ einfach zu verwendende rel...
Ein vollständiges Beispiel für die mehrstufige Sprungfunktion (Seiten-Drilldown) von Vue für verwandte Seiten
Hintergrund Während des Projektentwicklungsprozes...
Schritte für Docker zum Erstellen eines eigenen lokalen Image-Repositorys
1. Umgebung und Vorbereitung 1. Ubuntu 14.04 2.Do...
Analyse des Parameterübertragungsprozesses des Treibermoduls in Linux
Deklarieren Sie den Parameternamen, den Typ und d...
Docker-Batch starten und alle Container schließen
Im Docker Starten Sie alle Containerbefehle Docke...
Unterschiede zwischen ES6-Vererbung und ES5-Vererbung in js
Inhaltsverzeichnis Nachlass ES5-Prototypvererbung...
Analyse des Prozesses der einfachen Bereitstellung von Nginx im Docker-Container
1. Stellen Sie den Nginx-Dienst im Container bere...
So lässt man in CSS die Höhe eines untergeordneten Divs den verbleibenden Platz des übergeordneten Containers ausfüllen
1. Verwenden Sie die Floating-Methode Effektbild:...
Automatisches Laden des Kernelmodul-Overlayfs-Vorgangs beim CentOS-Start
Um Kernelmodule in CentOS automatisch zu laden, k...
MySQL 8.0.12 Installations- und Nutzungs-Tutorial
Das Installations- und Verwendungstutorial für My...
Installieren Sie OpenSSH unter Windows und melden Sie sich beim Linux-Server an, indem Sie einen SSH-Schlüssel generieren.
Der vollständige Name von SSH ist Secure SHell. D...
Vue verwendet Echart, um Beschriftungen und Farben anzupassen
In diesem Artikelbeispiel wird der spezifische Co...