Zeichnen Sie ein iPhone basierend auf CSS3
Ergebnis:
Implementierungscodehtml
<div Klasse='iphone'>
<div Klasse='Stahlband'>
<div Klasse='mute_rocker'></div>
<div class='Lautstärke erhöhen'></div>
<div class='Lautstärke verringern'></div>
<div Klasse='Schlaf_Wach'></div>
<div Klasse='Kunststoffband'>
<div Klasse='Glass_Face'>
<div Klasse = "Kamera"></div>
<div Klasse='Sprecher'></div>
<div Klasse = "Home-Button"></div>
<div Klasse = "Glanz"></div>
<div Klasse='Bildschirm'>
<div Klasse='Bühne'></div>
</div>
</div>
</div>
</div>
</div>CSS3
html, Text {
Höhe: 100%;
}
Körper {
Textausrichtung: zentriert;
Polsterung: 50px;
Hintergrund: #ccc;
}
.iphone {
Anzeige: Inline-Block;
vertikale Ausrichtung: Mitte;
*vertikale Ausrichtung: automatisch;
*Zoom: 1;
*Anzeige: inline;
}
.iphone {
Position: relativ;
}
.iphone .steel_band {
Position: relativ;
Breite: 372px;
Höhe: 734px;
Polsterung: 3px;
Hintergrund: URL ('Daten: Bild/SVG+XML; Base64, Pd94bwwgdmvyc2lvbj0ims4wiiblbmnvzgluzz0Idxrmltgipz4gphn2zyb2zxjzaIniGiNCSBG5ZPSJODRPSJODRPSJODRPSJODRPSJODRPSJODRPSJODRPSJODRPSJODRPSJODRPSJODRPSJODRPSJODRPSJODRPSWOGHT3D3D3D3D3D3D3D3D3D3D3D3D3D3D3d3d3nczzczzs Zyi+PGRLZNM+PGXPBMVHCKDYYWRPZW50IGLKPSJNCMFKIIBNCMFKAWVUDFVUAXRZPSJVYMPLYRCB3 Psiwjsigc3rvcc1jb2xvcj0ii2rjzgjkySivpjxzdg9Wig9Mznlddd0imtawjSIGC3rvcc1jb2xvcj0ii2vizwflosivpjwvbyr AiihdpzhropsixmdaliibozwlaNahq9ijewmcuiigzpbgw9Invybcgjz3jhzckiic8+pc9zdmc+ia == ');
Hintergrund: -webkit-gradient(linear, 0 % 50 %, 100 % 50 %, Farbstopp(0 %, #dcdbda), Farbstopp(100 %, #ebeae9));
Hintergrund: -moz-linear-gradient (links, #dcdbda, #ebeae9);
Hintergrund: -webkit-linear-gradient(links, #dcdbda, #ebeae9);
Hintergrund: linearer Farbverlauf (nach rechts, #dcdbda, #ebeae9);
-moz-Randradius: 60px;
-Webkit-Randradius: 60px;
Rahmenradius: 60px;
-moz-box-shadow: Einschub 1px 0 0 #7e7c7a, Einschub -1px 0 1px #7e7c7a;
-webkit-box-shadow: Einschub 1px 0 0 #7e7c7a, Einschub -1px 0 1px #7e7c7a;
Box-Shadow: Einschub 1px 0 0 #7e7c7a, Einschub -1px 0 1px #7e7c7a;
}
.iphone .plastic_band {
Breite: 364px;
Höhe: 726px;
Polsterung: 4px;
-moz-Randradius: 57px;
-Webkit-Randradius: 57px;
Rahmenradius: 57px;
Hintergrund: #2b2b2b;
-moz-box-shadow: Einschub 0 0 1px rgba(0, 0, 0, 0,5), 0 0 1px rgba(0, 0, 0, 0,5);
-webkit-box-shadow: Einschub 0 0 1px rgba(0, 0, 0, 0,5), 0 0 1px rgba(0, 0, 0, 0,5);
Box-Schatten: Einschub 0 0 1px rgba(0, 0, 0, 0,5), 0 0 1px rgba(0, 0, 0, 0,5);
}
.iphone .glass_face {
Position: relativ;
Breite: 364px;
Höhe: 726px;
Überlauf: versteckt;
Hintergrund: URL ('Daten: Bild/SVG+XML; Base64, Pd94bwwgdmvyc2lvbj0ims4wiiblbmnvzgluzz0Idxrmltgipz4gphn2zyb2zxjzaIniGiNCSBG5ZPSJODRPSJODRPSJODRPSJODRPSJODRPSJODRPSJODRPSJODRPSJODRPSJODRPSJODRPSJODRPSJODRPSJODRPSWOGHT3D3D3D3D3D3D3D3D3D3D3D3D3D3D3d3d3nczzczzs Zyi+PGRLZNM+PGXPBMVHCKDYYWRPZW50IGLKPSJNCMFKIIBNCMFKAWVUDFVUAXRZPSJVYMPLYRCB3 Psiwjsigc3rvcc1jb2xvcj0iizawmdawmcivpjxzdg9wig9Mznlddd0imtawjSIGC3RVCC1JB2XVCJ0iIZA5MDKWOSIVPJWGGLUZWYJJHZGLBLBNQULBNQULBNQULBNQ+ jaiihdpzhropsixmdaliibozwlnahq9ijewmcuiigzpbgw9invybcgjz3jhzckiic8+pc9zdmc+ia == ');
Hintergrund: -webkit-gradient(linear, 50 % 0 %, 50 % 100 %, Farbstopp(0 %, Nr. 000000), Farbstopp(100 %, Nr. 090909));
Hintergrund: -moz-linear-gradient(#000000, #090909);
Hintergrund: -webkit-linear-gradient(#000000, #090909);
Hintergrund: linearer Farbverlauf (#000000, #090909);
-moz-Randradius: 53px;
-Webkit-Randradius: 53px;
Rahmenradius: 53px;
-moz-box-shadow: -1px -1px 2px rgba(255, 255, 255, 0,15), -1px -1px 0 rgba(0, 0, 0, 0,5);
-webkit-box-shadow: -1px -1px 2px rgba(255, 255, 255, 0,15), -1px -1px 0 rgba(0, 0, 0, 0,5);
Kastenschatten: -1px -1px 2px rgba(255, 255, 255, 0,15), -1px -1px 0 rgba(0, 0, 0, 0,5);
}
.iphone .gloss {
Position: relativ;
Z-Index: 1;
Höhe: 100%;
Breite: 100 %;
-webkit-mask-image: linearer Farbverlauf (-105 Grad, #000000 32 %, rgba (0, 0, 0, 0) 32 %);
-moz-Randradius: 53px;
-Webkit-Randradius: 53px;
Rahmenradius: 53px;
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMDcwNDI4IiB5MT0iMC42MDA1ODIiIHgyPSItMC4wNzA0MjgiIHkyPSIwLjM5OTQxOCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjYiLz48c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=') no-repeat;
Hintergrund: -moz-linear-gradient(170 Grad, rgba(255, 255, 255, 0,6), rgba(255, 255, 255, 0) 70 %) keine Wiederholung;
Hintergrund: -webkit-linear-gradient(170 Grad, rgba(255, 255, 255, 0,6), rgba(255, 255, 255, 0) 70 %) keine Wiederholung;
Hintergrund: linearer Farbverlauf (280 Grad, RGBA (255, 255, 255, 0,6), RGBA (255, 255, 255, 0) 70 %), keine Wiederholung;
-moz-Hintergrundgröße: 60 % 100 %;
-o-Hintergrundgröße: 60 % 100 %;
-webkit-Hintergrundgröße: 60 % 100 %;
Hintergrundgröße: 60 % 100 %;
Hintergrundposition: oben rechts;
}
.iphone .kamera {
Position: absolut;
Z-Index: 2;
oben: 50px;
links: 50%;
Rand links: -75px;
Höhe: 8px;
Breite: 8px;
Polsterung: 4px;
Rand: 1px durchgezogener RGBA (255, 255, 255, 0,05);
-moz-Randradius: 9px;
-Webkit-Randradius: 9px;
Rahmenradius: 9px;
-moz-box-shadow: Einschub 0 3px 6px rgba(0, 0, 0, 0,25);
-webkit-box-shadow: Einschub 0 3px 6px rgba(0, 0, 0, 0,25);
Box-Shadow: Einschub 0 3px 6px rgba(0, 0, 0, 0,25);
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjVweCIgY3k9IjVweCIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFiMWIxYiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzM0MzQzNCIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
Hintergrund: -moz-radial-gradient(5px 5px, #1b1b1b, #343434);
Hintergrund: -webkit-radial-gradient(5px 5px, #1b1b1b, #343434);
Hintergrund: radialer Farbverlauf (5px 5px, #1b1b1b, #343434);
Hintergrundposition: oben links;
}
.iphone .camera:nach {
Anzeige: Block;
Höhe: 8px;
Breite: 8px;
-moz-Randradius: 4px;
-Webkit-Randradius: 4px;
Rahmenradius: 4px;
-moz-box-shadow: 1px 1px 1px rgba(255, 255, 255, 0,1);
-webkit-box-shadow: 1px 1px 1px rgba(255, 255, 255, 0,1);
Kastenschatten: 1px 1px 1px rgba (255, 255, 255, 0,1);
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjFweCIgY3k9IjFweCIgcj0iNTAlIj48c3RvcCBvZmZzZXQ9IjI1JSIgc3RvcC1jb2xvcj0iIzNjMmI5MCIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjM2MyYjkwIiBzdG9wLW9wYWNpdHk9IjAuNzUiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjFweCIgY3k9IjFweCIgcj0iNTAlIj48c3RvcCBvZmZzZXQ9IjI1JSIgc3RvcC1jb2xvcj0iIzJiNWQ5MCIgc3RvcC1vcGFjaXR5PSIwLjc1Ii8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiMyYjVkOTAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjFweCIgY3k9IjFweCIgcj0iNTAlIj48c3RvcCBvZmZzZXQ9IjI1JSIgc3RvcC1jb2xvcj0iIzJiNWQ5MCIgc3RvcC1vcGFjaXR5PSIwLjc1Ii8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiMyYjVkOTAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNjAlIj48c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iIzA3MTMxYiIvPjxzdG9wIG9mZnNldD0iNjAlIiBzdG9wLWNvbG9yPSIjMWIzZDcwIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
Hintergrund: -moz-radial-gradient(1px 1px, rgba(43, 93, 144, 0,75) 25 %, rgba(43, 93, 144, 0) 50 %), -moz-radial-gradient(1px 1px, rgba(43, 93, 144, 0,75) 25 %, rgba(43, 93, 144, 0) 50 %), -moz-radial-gradient(1px 1px, rgba(43, 93, 144, 0,75) 25 %, rgba(43, 93, 144, 0) 50 %), -moz-radial-gradient(#07131b 40 %, #1b3d70 60 %);
Hintergrund: -webkit-radial-gradient(1px 1px, rgba(43, 93, 144, 0,75) 25 %, rgba(43, 93, 144, 0) 50 %), -webkit-radial-gradient(1px 1px, rgba(43, 93, 144, 0,75) 25 %, rgba(43, 93, 144, 0) 50 %), -webkit-radial-gradient(1px 1px, rgba(43, 93, 144, 0,75) 25 %, rgba(43, 93, 144, 0) 50 %), -webkit-radial-gradient(#07131b 40 %, #1b3d70 60 %);
Hintergrund: radialer Farbverlauf (1px 1px, rgba (43, 93, 144, 0,75) 25 %, rgba (43, 93, 144, 0) 50 %), radialer Farbverlauf (1px 1px, rgba (43, 93, 144, 0,75) 25 %, rgba (43, 93, 144, 0) 50 %), radialer Farbverlauf (1px 1px, rgba (43, 93, 144, 0,75) 25 %, rgba (43, 93, 144, 0) 50 %), radialer Farbverlauf (#07131b 40 %, #1b3d70 60 %);
Hintergrundposition: oben links, Mitte links, Mitte, rechts Mitte;
Inhalt: "";
}
.iphone .Lautsprecher {
Position: absolut;
Z-Index: 2;
oben: 50px;
links: 50%;
Rand links: -37px;
Breite: 62px;
Höhe: 8px;
Polsterung: 5px;
-moz-Randradius: 9px;
-Webkit-Randradius: 9px;
Rahmenradius: 9px;
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjM1Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==') no-repeat, url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSI0NC40NDQ0NCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0NDQ0NDQiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
Hintergrund: radialer Farbverlauf (rgba (255, 255, 255, 0,35), rgba (255, 255, 255, 0)) keine Wiederholung, -webkit-Farbverlauf (linear, 50 % 0 %, 50 % 18, Farbstopp (44,44444 %, #000000), Farbstopp (100 %, #444444));
Hintergrund: -moz-radial-gradient(rgba(255, 255, 255, 0,35), rgba(255, 255, 255, 0)) keine Wiederholung, -moz-linear-gradient(#000000 8px, #444444 18px);
Hintergrund: -webkit-radial-gradient(rgba(255, 255, 255, 0,35), rgba(255, 255, 255, 0)) keine Wiederholung, -webkit-linear-gradient(#000000 8px, #444444 18px);
Hintergrund: radialer Farbverlauf (rgba (255, 255, 255, 0,35), rgba (255, 255, 255, 0)) keine Wiederholung, linearer Farbverlauf (#000000 8px, #444444 18px);
-moz-Hintergrundgröße: 10px 10px, 100 % 100 %;
-o-Hintergrundgröße: 10px 10px, 100 % 100 %;
-webkit-Hintergrundgröße: 10px 10px, 100 % 100 %;
Hintergrundgröße: 10px 10px, 100 % 100 %;
Hintergrundposition: unten rechts, Mitte;
}
.iphone .speaker:nach {
Anzeige: Block;
Breite: 62px;
Höhe: 8px;
-moz-Randradius: 6px;
-Webkit-Randradius: 6px;
Rahmenradius: 6px;
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIyNSUiIHN0b3AtY29sb3I9IiMwMDAwMDAiLz48c3RvcCBvZmZzZXQ9IjI1JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='), #888;
Hintergrund: -moz-linear-gradient(45 Grad, #000000 25 %, rgba(0, 0, 0, 0) 25 %, rgba(0, 0, 0, 0) 75 %, #000000 75 %, #000000), #888;
Hintergrund: -webkit-linear-gradient(45 Grad, #000000 25 %, rgba(0, 0, 0, 0) 25 %, rgba(0, 0, 0, 0) 75 %, #000000 75 %, #000000), #888;
Hintergrund: linearer Farbverlauf (45 Grad, Nr. 000000 25 %, RGBA (0, 0, 0, 0) 25 %, RGBA (0, 0, 0, 0) 75 %, Nr. 000000 75 %, Nr. 000000), Nr. 888;
-moz-Hintergrundgröße: 2px 2px;
-o-Hintergrundgröße: 2px 2px;
-webkit-Hintergrundgröße: 2px 2px;
Hintergrundgröße: 2px 2px;
-moz-box-shadow: Einschub 0 2px 3px rgba(0, 0, 0, 0,75), Einschub 0 0 2px rgba(0, 0, 0, 0,5);
-webkit-box-shadow: Einschub 0 2px 3px rgba(0, 0, 0, 0,75), Einschub 0 0 2px rgba(0, 0, 0, 0,5);
Box-Schatten: Einschub 0 2px 3px rgba(0, 0, 0, 0,75), Einschub 0 0 2px rgba(0, 0, 0, 0,5);
Inhalt: "";
}
.iphone .home_button {
Position: absolut;
unten: 20px;
links: 50%;
Rand links: -35px;
Höhe: 70px;
Breite: 70px;
-moz-Randradius: 35px;
-Webkit-Randradius: 35px;
Rahmenradius: 35px;
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ0NDQ0NCIvPjxzdG9wIG9mZnNldD0iNjAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
Hintergrund: -webkit-gradient(linear, 0 % 50 %, 100 % 50 %, Farbstopp(0 %, Nr. 444444), Farbstopp(60 %, Nr. 000000));
Hintergrund: -moz-linear-gradient (links, #444444, #000000 60 %);
Hintergrund: -webkit-linear-gradient (links, #444444, #000000 60 %);
Hintergrund: linearer Farbverlauf (nach rechts, #444444, #000000 60 %);
Rand: 1px durchgezogen #000;
-moz-box-shadow: 1px 1px 1px #222, Einschub 0 10px 30px rgba(0, 0, 0, 0,5);
-webkit-box-shadow: 1px 1px 1px #222, Einschub 0 10px 30px rgba(0, 0, 0, 0,5);
Box-Schatten: 1px 1px 1px #222, Einschub 0 10px 30px rgba(0, 0, 0, 0,5);
}
.iphone .home_button:nach {
Position: absolut;
oben: 23px;
links: 23px;
rechts: 23px;
unten: 23px;
Rand: 2px durchgezogen #888;
-moz-box-shadow: Einschub 0 0 1px #000, 0 0 1px #000;
-webkit-box-shadow: Einschub 0 0 1px #000, 0 0 1px #000;
Box-Schatten: Einschub 0 0 1px #000, 0 0 1px #000;
-moz-Randradius: 6px;
-Webkit-Randradius: 6px;
Rahmenradius: 6px;
Inhalt: "";
}
.iphone .Bildschirm {
Position: absolut;
oben: 120px;
links: 50%;
Rand links: -166px;
Breite: 320px;
Höhe: 480px;
Polsterung: 5px;
-moz-Randradius: 5px;
-Webkit-Randradius: 5px;
Rahmenradius: 5px;
Hintergrund: #0a0a0a;
}
.iphone .stage {
Breite: 320px;
Höhe: 480px;
Hintergrund: URL ('Daten: Bild/SVG+XML; Base64, Pd94bwwgdmvyc2lvbj0ims4wiiblbmnvzgluzz0Idxrmltgipz4gphn2zyb2zxjzaIniGiNCSBG5ZPSJODRPSJODRPSJODRPSJODRPSJODRPSJODRPSJODRPSJODRPSJODRPSJODRPSJODRPSJODRPSJODRPSJODRPSWOGHT3D3D3D3D3D3D3D3D3D3D3D3D3D3D3d3d3nczzczzs Zyi+PGRLZNM+PGXPBMVHCKDYYWRPZW50IGLKPSJNCMFKIIBNCMFKAWVUDFVUAXRZPSJVYMPLYRCB3 Psiwjsigc3rvcc1jb2xvcj0iiziymjiymiiVpjxzdg9Wig9Mznlddd0imtawjSIGC3RVCC1JB2XVCJ0IIZEXMTEXMTEXMSIVPJWVBGLUZWR3JHZGlBNQ+PC9K9IGJHZGLBGLBNQ+ IHdpzhropSixmdaliibozwlnahq9ijewmcuiigzpbgw9Invybcgjz3jhzckiic8+pc9zdmc+ia == ');
Hintergrund: -webkit-gradient(linear, 50 % 0 %, 50 % 100 %, Farbstopp(0 %, Nr. 22222), Farbstopp(100 %, Nr. 111111));
Hintergrund: -moz-linear-gradient(#222222, #111111);
Hintergrund: -webkit-linear-gradient(#222222, #111111);
Hintergrund: linearer Farbverlauf (#222222, #111111);
}
.iphone .mute_rocker {
Position: absolut;
oben: 90px;
rechts: 100%;
Breite: 2px;
Höhe: 32px;
Rand: 1px durchgezogen #888;
Rand rechts: keiner;
-moz-border-radius-topleft: 2px;
-webkit-border-oben-links-radius: 2px;
Rahmen oben links – Radius: 2px;
-moz-border-radius-bottomleft: 2px;
-Webkit-Rand unten links-Radius: 2px;
Rahmen unten links – Radius: 2px;
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSI1JSIgc3RvcC1jb2xvcj0iI2ZiZmJmYiIvPjxzdG9wIG9mZnNldD0iNSUiIHN0b3AtY29sb3I9IiNkYmRiZGIiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2RiZGJkYiIvPjxzdG9wIG9mZnNldD0iNzUlIiBzdG9wLWNvbG9yPSIjYWVhZWFlIi8+PHN0b3Agb2Zmc2V0PSI5MCUiIHN0b3AtY29sb3I9IiNmYmZiZmIiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
Hintergrund: -webkit-gradient(linear, 50 % 0 %, 50 % 100 %, Farbstopp(5 %, #fbfbfb), Farbstopp(5 %, #dbdbdb), Farbstopp(50 %, #dbdbdb), Farbstopp(75 %, #aeaeae), Farbstopp(90 %, #fbfbfb));
Hintergrund: -moz-linear-gradient(#fbfbfb 5 %, #dbdbdb 5 %, #dbdbdb 50 %, #aeaeae 75 %, #fbfbfb 90 %);
Hintergrund: -webkit-linear-gradient(#fbfbfb 5 %, #dbdbdb 5 %, #dbdbdb 50 %, #aeaeae 75 %, #fbfbfb 90 %);
Hintergrund: linearer Farbverlauf (#fbfbfb 5 %, #dbdbdb 5 %, #dbdbdb 50 %, #aeaeae 75 %, #fbfbfb 90 %);
}
.iphone .volume {
Position: absolut;
rechts: 100%;
Breite: 2px;
Höhe: 25px;
Rand: 1px durchgezogen #888;
Rand rechts: keiner;
-moz-border-radius-topleft: 2px;
-webkit-border-oben-links-radius: 2px;
Rahmen oben links – Radius: 2px;
-moz-border-radius-bottomleft: 2px;
-Webkit-Rand unten links-Radius: 2px;
Rahmen unten links – Radius: 2px;
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RiZGJkYiIvPjxzdG9wIG9mZnNldD0iMTUlIiBzdG9wLWNvbG9yPSIjZWVlZWVlIi8+PHN0b3Agb2Zmc2V0PSI3NSUiIHN0b3AtY29sb3I9IiMzMzMzMzMiLz48c3RvcCBvZmZzZXQ9IjkwJSIgc3RvcC1jb2xvcj0iI2ZiZmJmYiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
Hintergrund: -webkit-gradient(linear, 50 % 0 %, 50 % 100 %, Farbstopp(0 %, #dbdbdb), Farbstopp(15 %, #eeeeee), Farbstopp(75 %, #333333), Farbstopp(90 %, #fbfbfb));
Hintergrund: -moz-linear-gradient(#dbdbdb, #eeeeee 15 %, #333333 75 %, #fbfbfb 90 %);
Hintergrund: -webkit-linear-gradient(#dbdbdb, #eeeeee 15 %, #333333 75 %, #fbfbfb 90 %);
Hintergrund: linearer Farbverlauf (#dbdbdb, #eeeeee 15 %, #333333 75 %, #fbfbfb 90 %);
}
.iphone .lauter {
oben: 160px;
}
.iphone .lauter {
oben: 222px;
}
.iphone .sleep_wake {
Position: absolut;
unten: 100 %;
rechts: 70px;
Breite: 60px;
Höhe: 3px;
Rand: 1px durchgezogen #888;
Rahmen unten: keiner;
-moz-border-radius-topleft: 2px;
-webkit-border-oben-links-radius: 2px;
Rahmen oben links – Radius: 2px;
-moz-border-radius-topright: 2px;
-webkit-border-oben-rechts-radius: 2px;
Rahmen oben rechts – Radius: 2px;
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIvPjxzdG9wIG9mZnNldD0iNyUiIHN0b3AtY29sb3I9IiNmZmZmZmYiLz48c3RvcCBvZmZzZXQ9IjE1JSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIvPjxzdG9wIG9mZnNldD0iNzAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSI4NSUiIHN0b3AtY29sb3I9IiNiYmJiYmIiLz48c3RvcCBvZmZzZXQ9IjkzJSIgc3RvcC1jb2xvcj0iI2VlZWVlZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
Hintergrund: -webkit-gradient(linear, 0 % 50 %, 100 % 50 %, Farbstopp(0 %, #aaaaaa), Farbstopp(7 %, #ffffff), Farbstopp(15 %, #aaaaaa), Farbstopp(70 %, #dddddd), Farbstopp(85 %, #bbbbbb), Farbstopp(93 %, #eeeeee), Farbstopp(100 %, #aaaaaa));
Hintergrund: -moz-linear-gradient (links, #aaaaaa, #ffffff 7 %, #aaaaaa 15 %, #dddddd 70 %, #bbbbbb 85 %, #eeeeee 93 %, #aaaaaa);
Hintergrund: -webkit-linear-gradient (links, #aaaaaa, #ffffff 7 %, #aaaaaa 15 %, #dddddd 70 %, #bbbbbb 85 %, #eeeeee 93 %, #aaaaaa);
Hintergrund: linearer Farbverlauf (nach rechts, #aaaaaa, #ffffff 7 %, #aaaaaa 15 %, #dddddd 70 %, #bbbbbb 85 %, #eeeeee 93 %, #aaaaaa);
}Oben finden Sie ausführliche Informationen zum Zeichnen eines iPhones auf Basis von CSS3. Weitere Informationen zum Zeichnen eines iPhones mit CSS3 finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM! |
<<: Implementierung einer Bildfragmentierungsladefunktion basierend auf HTML-Code
Artikel empfehlen
Eine kurze Analyse der Probleme, auf die bei der Erstellung von 404-Fehlerseiten geachtet werden sollte
Bei der Optimierung einer Website müssen wir lern...
Detaillierte Schritte zur Installation von MySQL 5.7 über YUM auf CentOS7
1. Gehen Sie zu dem Speicherort, an dem Sie das I...
Lösung für das Fehlerproblem bei der Remote-Verbindung von Vscode zu Ubuntu
1. Hintergrund des Vorfalls: Aus Arbeitsgründen m...
So installieren Sie Phabricator mit Docker
Ich verwende hier das Ubuntu 16.04-System. Instal...
Detailliertes Tutorial zum Herunterladen von MySQL unter Windows 10
MySQL-Versionen werden in Enterprise Edition und ...
Schritte zum Kapseln der Karussellkomponente in vue3.0
Inhaltsverzeichnis 1: Kapselungsidee 2. Verpackun...
Verwendung des MySQL Query Rewrite-Plugins
Plugin zum Umschreiben von Abfragen Ab MySQL 5.7....
Super detaillierte grundlegende JavaScript-Syntaxregeln
Inhaltsverzeichnis 01 JavaScript (abgekürzt: js) ...
So installieren Sie JDK8 unter Windows
1. Herunterladen: http://www.oracle.com/technetwo...
Detaillierte Erklärung der CSS3-Textschatteneigenschaft Textschatten
Textschatten-Textschatten-Eigenschaftseffekte: 1....
Analyse des Linux-Hochleistungsnetzwerk-IO- und Reaktormodells
Inhaltsverzeichnis 1. Einführung in grundlegende ...
Detaillierte grafische Erläuterung der Mysql5.7.18-Installation und Master-Slave-Replikation
Installieren Sie mysql5.7.18 auf CentOS6.7 1. Ent...
Natives js zur Realisierung der Bild-Upload-Steuerung
In diesem Artikelbeispiel wird der spezifische Co...
Mehrere Möglichkeiten zur Implementierung eines zweispaltigen Layouts mit fester Breite links und adaptiver Breite rechts mithilfe von CSS
7 Möglichkeiten, mit CSS ein zweispaltiges Layout...
Linux (CentOS7) installiert Tomcat und legt Tomcat als Startobjekt fest (am Beispiel von Tomcat8).
Inhaltsverzeichnis Installieren Sie Tomcat Laden ...