CSS
/**********************/
/* font face */
/**********************/
@font-face {
font-family: 'icomoon';
src:url('http://jlwebart.fr/lab/iphone5/fonts/icomoon.eot');
src:url('http://jlwebart.fr/lab/iphone5/fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('http://jlwebart.fr/lab/iphone5/fonts/icomoon.woff') format('woff'),
url('http://jlwebart.fr/lab/iphone5/fonts/icomoon.ttf') format('truetype'),
url('http://jlwebart.fr/lab/iphone5/fonts/icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
/**********************/
/* scene */
/**********************/
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
overflow: hidden;
}
#scene3D {
width: 296px;
height: 619px;
margin: 50px auto 0;
-webkit-perspective: 1000px;
perspective: 1000px;
}
#iPhone5 {
width: 296px;
height: 619px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateX(65deg) rotateZ(45deg);
transform: rotateX(65deg) rotateZ(45deg);
-webkit-animation: rotateiphone 15s infinite linear;
animation: rotateiphone 15s infinite linear;
}
#iPhone5 * {
position: absolute;
-webkit-transform-origin: 0 0 0;
transform-origin: 0 0 0;
}
@-webkit-keyframes rotateiphone {
from {
-webkit-transform: rotateX(65deg ) rotateY(0deg ) rotateZ(45deg );
}
to {
-webkit-transform: rotateX(425deg ) rotateY(360deg ) rotateZ(405deg );
}
}
@keyframes rotateiphone {
from {
transform: rotateX(65deg ) rotateY(0deg ) rotateZ(45deg );
}
to {
transform: rotateX(425deg ) rotateY(360deg ) rotateZ(405deg );
}
}
/**********************/
/* main structure */
/**********************/
#main-structure {
width: 296px;
height: 619px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.front, .back {
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 40.4px/44.9px;
}
.front {
background: -webkit-linear-gradient(top, #f4f4f4 0%,#e0e0e0 5%,#d1d1cf 95%,#ffffff 100%);
background: linear-gradient(to bottom, #f4f4f4 0%,#e0e0e0 5%,#d1d1cf 95%,#ffffff 100%);
}
#main-structure .front {
background: -webkit-linear-gradient(top, #dedede 0%,#c9c9c9 8%,#9c9c9c 92%,#c0c0c0 100%);
background: linear-gradient(to bottom, #dedede 0%,#c9c9c9 8%,#9c9c9c 92%,#c0c0c0 100%);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.back {
background: -webkit-linear-gradient(top, #f8f8f8 0%,#f7f7f7 9%,#e4e4e4 9%,#cbcbcb 91%,#fafafa 91%,#f7f7f7 100%);
background: linear-gradient(to bottom, #f8f8f8 0%,#f7f7f7 9%,#e4e4e4 9%,#cbcbcb 91%,#fafafa 91%,#f7f7f7 100%);
-webkit-transform: translateZ(-28.3px);
transform: translateZ(-28.3px);
}
#main-structure .back {
background: -webkit-linear-gradient(top, #dedede 0%,#c9c9c9 8%,#9c9c9c 92%,#c0c0c0 100%);
background: linear-gradient(to bottom, #dedede 0%,#c9c9c9 8%,#9c9c9c 92%,#c0c0c0 100%);
-moz-backface-visibility: hidden;
}
.top, .bottom {
left: 40.4px;
right: 40.4px;
height: 28.3px;
background: -webkit-linear-gradient(left, #e8eae9 0%,#d4d6d5 50%,#e8eae9 100%);
background: linear-gradient(to right, #e8eae9 0%,#d4d6d5 50%,#e8eae9 100%);
-webkit-transform: rotateX(-90deg);
transform: rotateX(-90deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
z-index: 2;
}
.bottom {
bottom: -28.3px;
background: -webkit-linear-gradient(left, #eff1f0 0%,#d6d8d7 50%,#eff1f0 100%);
background: linear-gradient(to right, #eff1f0 0%,#d6d8d7 50%,#eff1f0 100%);
z-index: 2;
}
.left, .right {
top: 44.9px;
bottom: 44.9px;
width: 28.3px;
background: -webkit-linear-gradient(top, #c8c8c8 0%,#e4e4e4 50%,#b3b3b3 100%);
background: linear-gradient(to bottom, #c8c8c8 0%,#e4e4e4 50%,#b3b3b3 100%);
-webkit-transform: rotateY(90deg);
transform: rotateY(90deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
z-index: 2;
}
.right {
right: -28.3px;
background: -webkit-linear-gradient(top, #cbcbcb 0%,#e5e5e5 50%,#b6b6b6 100%);
background: linear-gradient(to bottom, #cbcbcb 0%,#e5e5e5 50%,#b6b6b6 100%);
z-index: 2;
}
/**********************/
/*top-bottom structure*/
/**********************/
#top-structure, #bottom-structure {
top: 3px;
left: 3px;
width: 290px;
height: 613px;
-webkit-transform: translateZ(4px);
transform: translateZ(4px);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#bottom-structure {
-webkit-transform: translate3D(290px,0,-31.9px) rotateX(180deg) rotateZ(180deg);
transform: translate3D(290px,0,-31.9px) rotateX(180deg) rotateZ(180deg);
z-index: 1;
}
#bottom-structure .front {
background: -webkit-linear-gradient(top, #f8f8f8 0%,#f7f7f7 10.2%,#e4e4e4 10.2%,#cbcbcb 91%,#fafafa 91%,#f7f7f7 100%);
background: linear-gradient(to bottom, #f8f8f8 0%,#f7f7f7 10.2%,#e4e4e4 10.2%,#cbcbcb 91%,#fafafa 91%,#f7f7f7 100%);
}
/**********************/
/* angle */
/**********************/
.bottom:before, .top:before, .bottom:after, .top:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -16.7px;
width: 16.7px;
background: #eff1f0;
-webkit-transform-origin: 100% 0 0;
transform-origin: 100% 0 0;
-webkit-transform: rotateY(-11.25deg);
transform: rotateY(-11.25deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.bottom:after, .top:after {
left: auto;
right: -16.7px;
-webkit-transform-origin: 0 0 0;
transform-origin: 0 0 0;
-webkit-transform: rotateY(11.25deg);
transform: rotateY(11.25deg);
}
.angle-right, #iPhone5 .angle-left {
top: 0;
bottom: 0;
right: -32.4px;
width: 16.7px;
background: -webkit-linear-gradient(left, #eff1f0 0%,#f8f8f8 100%);
background: linear-gradient(to right, #eff1f0 0%,#f8f8f8 100%);
-webkit-transform: translateZ(-3.2px) rotateY(36.5deg);
transform: translateZ(-3.2px) rotateY(36.5deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#iPhone5 .angle-left {
left: -32.4px;
background: -webkit-linear-gradient(left, #f8f8f8 0%,#eff1f0 100%);
background: linear-gradient(to right, #f8f8f8 0%,#eff1f0 100%);
-webkit-transform-origin: 16.7px 0 0;
transform-origin: 16.7px 0 0;
-webkit-transform: translateZ(-3.2px) rotateY(-36.5deg);
transform: translateZ(-3.2px) rotateY(-36.5deg);
}
.angle-right:before, .angle-right:after, .angle-left:before, .angle-left:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: -16px;
width: 16.7px;
background: -webkit-linear-gradient(left, #f8f8f8 0%,#dbdbdb 100%);
background: linear-gradient(to right, #f8f8f8 0%,#dbdbdb 100%);
-webkit-transform-origin: 0 0 0;
transform-origin: 0 0 0;
-webkit-transform: rotateY(22.5deg);
transform: rotateY(22.5deg);
}
.angle-right:after {
right: -33.4px;
width: 18.7px;
background: -webkit-linear-gradient(left, #dbdbdb 0%,#b6b6b6 100%);
background: linear-gradient(to right, #dbdbdb 0%,#b6b6b6 100%);
-webkit-transform: translateZ(-6.1px) rotateY(42deg);
transform: translateZ(-6.1px) rotateY(42deg);
}
.angle-left:before {
left: -16px;
background: -webkit-linear-gradient(left, #bfbfbf 0%,#f8f8f8 100%);
background: linear-gradient(to right, #bfbfbf 0%,#f8f8f8 100%);
-webkit-transform-origin: 16.7px 0 0;
transform-origin: 16.7px 0 0;
-webkit-transform: rotateY(-22.5deg);
transform: rotateY(-22.5deg);
}
.angle-left:after {
left: -34.4px;
width: 19.7px;
background: -webkit-linear-gradient(left, #b3b3b3 0%,#bfbfbf 100%);
background: linear-gradient(to right, #b3b3b3 0%,#bfbfbf 100%);
-webkit-transform-origin: 19.7px 0 0;
transform-origin: 19.7px 0 0;
-webkit-transform: translateZ(-6.1px) rotateY(-43deg);
transform: translateZ(-6.1px) rotateY(-43deg);
}
.top:before, .top:after {
background: #e8eae9;
-webkit-transform: rotateY(11.25deg);
transform: rotateY(11.25deg);
}
.top:after {
-webkit-transform: rotateY(-11.25deg);
transform: rotateY(-11.25deg);
}
.top .angle-right {
background: -webkit-linear-gradient(left, #e8eae9 0%,#f8f8f8 100%);
background: linear-gradient(to right, #e8eae9 0%,#f8f8f8 100%);
-webkit-transform: translateZ(3.2px) rotateY(-36.5deg);
transform: translateZ(3.2px) rotateY(-36.5deg);
}
#iPhone5 .top .angle-left {
background: -webkit-linear-gradient(left, #f8f8f8 0%,#e8eae9 100%);
background: linear-gradient(to right, #f8f8f8 0%,#e8eae9 100%);
-webkit-transform: translateZ(3.2px) rotateY(36.5deg);
transform: translateZ(3.2px) rotateY(36.5deg);
}
.top .angle-right:before {
background: -webkit-linear-gradient(left, #f8f8f8 0%,#cbcbcb 100%);
background: linear-gradient(to right, #f8f8f8 0%,#cbcbcb 100%);
-webkit-transform: rotateY(-22.5deg);
transform: rotateY(-22.5deg);
}
.top .angle-right:after {
background: #cbcbcb;
-webkit-transform: translateZ(6.1px) rotateY(-42deg);
transform: translateZ(6.1px) rotateY(-42deg);
}
.top .angle-left:before {
background: -webkit-linear-gradient(left, #c8c8c8 0%,#f8f8f8 100%);
background: linear-gradient(to right, #c8c8c8 0%,#f8f8f8 100%);
-webkit-transform: rotateY(22.5deg);
transform: rotateY(22.5deg);
}
.top .angle-left:after {
background: #c8c8c8;
-webkit-transform: translateZ(6.1px) rotateY(43deg);
transform: translateZ(6.1px) rotateY(43deg);
}
/**********************/
/* screen structure */
/**********************/
#screen-structure {
top: 5px;
left: 5px;
width: 286px;
height: 609px;
-webkit-transform: translateZ(7.2px);
transform: translateZ(7.2px);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#screen-structure .back {
background: #e3e3e3;
-webkit-transform: translateZ(-2.7px);
transform: translateZ(-2.7px);
}
#screen-structure .top, #screen-structure .bottom {
height: 2.7px;
}
#screen-structure .bottom {
bottom: -2.7px;
}
#screen-structure .left, #screen-structure .right {
width: 2.7px;
}
#screen-structure .right {
right: -2.7px;
}
#screen-structure .front {
border: 2px solid #e3e3e3;
box-shadow: inset 0 0 0 1px #fff;
background: -webkit-linear-gradient(top, #fcfcfc 0%,#f7f7f7 100%);
background: linear-gradient(to bottom, #fcfcfc 0%,#f7f7f7 100%);
}
#screen-structure .top, #screen-structure .right, #screen-structure .bottom, #screen-structure .left, #screen-structure .top .angle-left, #screen-structure .bottom .angle-left, #screen-structure .angle-right,
#screen-structure .bottom:before, #screen-structure .bottom:after, #screen-structure .top:before, #screen-structure .top:after,
#screen-structure .angle-right:before, #screen-structure .angle-right:after, #screen-structure .angle-left:before, #screen-structure .angle-left:after {
background: #e3e3e3;
}
/**********************/
/* angle 45deg */
/**********************/
#top-structure .right, #bottom-structure .right {
right: -5px;
width: 5px;
background: -webkit-linear-gradient(top, #c9c9c9 0%,#f5f5f5 20%,#f5f5f5 80%,#9c9c9c 100%);
background: linear-gradient(to bottom, #c9c9c9 0%,#f5f5f5 20%,#f5f5f5 80%,#9c9c9c 100%);
-webkit-transform: rotateY(45deg);
transform: rotateY(45deg);
}
#top-structure .left, #bottom-structure .left {
width: 5px;
background: -webkit-linear-gradient(top, #c9c9c9 0%,#f5f5f5 20%,#f5f5f5 80%,#9c9c9c 100%);
background: linear-gradient(to bottom, #c9c9c9 0%,#f5f5f5 20%,#f5f5f5 80%,#9c9c9c 100%);
-webkit-transform: rotateY(135deg);
transform: rotateY(135deg);
}
#top-structure .bottom, #bottom-structure .bottom {
bottom: -5px;
height: 5px;
background: -webkit-linear-gradient(left, #c0c0c0 0%,#818181 20%,#818181 80%,#c0c0c0 100%);
background: linear-gradient(to right, #c0c0c0 0%,#818181 20%,#818181 80%,#c0c0c0 100%);
-webkit-transform: rotateX(-45deg);
transform: rotateX(-45deg);
}
#top-structure .top, #bottom-structure .top {
height: 5px;
background: -webkit-linear-gradient(left, #dedede 0%,#d0d0d0 20%,#d0d0d0 80%,#dedede 100%);
background: linear-gradient(to right, #dedede 0%,#d0d0d0 20%,#d0d0d0 80%,#dedede 100%);
-webkit-transform: rotateX(-135deg);
transform: rotateX(-135deg);
}
/**********************/
/* angle 45deg corner */
/**********************/
#top-structure .bottom:before, #bottom-structure .bottom:before, #top-structure .bottom:after, #bottom-structure .bottom:after, #top-structure .top:before, #bottom-structure .top:before, #top-structure .top:after, #bottom-structure .top:after {
width: 29px;
left: -29px;
background: #c0c0c0;
-webkit-transform: rotateY(-13.25deg) rotateZ(13.25deg);
transform: rotateY(-13.25deg) rotateZ(13.25deg);
}
#top-structure .bottom:after, #bottom-structure .bottom:after, #top-structure .top:after, #bottom-structure .top:after {
left: auto;
right: -29px;
-webkit-transform: rotateY(13.25deg) rotateZ(-13.25deg);
transform: rotateY(13.25deg) rotateZ(-13.25deg);
}
#top-structure .top:before, #bottom-structure .top:before, #top-structure .top:after, #bottom-structure .top:after {
background: #dedede;
-webkit-transform: rotateY(13.25deg) rotateZ(13.25deg);
transform: rotateY(13.25deg) rotateZ(13.25deg);
}
#top-structure .top:after, #bottom-structure .top:after {
-webkit-transform: rotateY(-13.25deg) rotateZ(-13.25deg);
transform: rotateY(-13.25deg) rotateZ(-13.25deg);
}
#top-structure .bottom .angle-right-45, #bottom-structure .bottom .angle-right-45, #top-structure .top .angle-right-45, #bottom-structure .top .angle-right-45, #top-structure .bottom .angle-left-45, #bottom-structure .bottom .angle-left-45, #top-structure .top .angle-left-45, #bottom-structure .top .angle-left-45 {
top: 0;
bottom: 0;
width: 40px;
right: -62px;
background: -webkit-linear-gradient(left, #c0c0c0 0%,#9c9c9c 100%);
background: linear-gradient(to right, #c0c0c0 0%,#9c9c9c 100%);
-webkit-transform: rotateY(60deg) rotateZ(-41deg) translateX(10px);
transform: rotateY(60deg) rotateZ(-41deg) translateX(10px);
}
#top-structure .top .angle-right-45, #bottom-structure .top .angle-right-45 {
background: -webkit-linear-gradient(left, #dedede 0%,#c9c9c9 100%);
background: linear-gradient(to right, #dedede 0%,#c9c9c9 100%);
-webkit-transform: rotateY(-60deg) rotateZ(-41deg) translateX(10px);
transform: rotateY(-60deg) rotateZ(-41deg) translateX(10px);
}
#top-structure .bottom .angle-left-45, #bottom-structure .bottom .angle-left-45, #top-structure .top .angle-left-45, #bottom-structure .top .angle-left-45 {
left: -62px;
background: -webkit-linear-gradient(left, #9c9c9c 0%,#c0c0c0 100%);
background: linear-gradient(to right, #9c9c9c 0%,#c0c0c0 100%);
-webkit-transform-origin: 100% 0 0;
transform-origin: 100% 0 0;
-webkit-transform: rotateY(-60deg) rotateZ(41deg) translateX(-10px);
transform: rotateY(-60deg) rotateZ(41deg) translateX(-10px);
}
#top-structure .top .angle-left-45, #bottom-structure .top .angle-left-45 {
background: -webkit-linear-gradient(left, #c9c9c9 0%,#dedede 100%);
background: linear-gradient(to right, #c9c9c9 0%,#dedede 100%);
-webkit-transform: rotateY(60deg) rotateZ(41deg) translateX(-10px);
transform: rotateY(60deg) rotateZ(41deg) translateX(-10px);
}
/**********************/
/* join */
/**********************/
.join {
bottom: 13px;
left: -1px;
right: -1px;
height: 4.5px;
background: #e1e1e1;
-webkit-transform: translateZ(.8px);
transform: translateZ(.8px);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.join + .join {
top: 13px;
}
.join:before, .join:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: -5px;
width: 5px;
background: #232323;
-webkit-transform-origin: 0 0 0;
transform-origin: 0 0 0;
-webkit-transform: rotateY(45deg);
transform: rotateY(45deg);
}
.join:after {
left: -5px;
background: #f6f6f6;
-webkit-transform-origin: 100% 0 0;
transform-origin: 100% 0 0;
-webkit-transform: rotateY(-45deg);
transform: rotateY(-45deg);
}
.left .join {
-webkit-transform: translateZ(-.8px);
transform: translateZ(-.8px);
}
.left .join:before {
-webkit-transform: rotateY(-45deg);
transform: rotateY(-45deg);
}
.left .join:after {
-webkit-transform: rotateY(45deg);
transform: rotateY(45deg);
}
/**********************/
/* painted */
/**********************/
#painted-top, #painted-bottom, #painted-front, #painted-back, #painted-right, #painted-left {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#painted-top, #painted-left {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#painted-bottom {
-webkit-transform: translateZ(.5px);
transform: translateZ(.5px);
}
#painted-left {
-webkit-transform: translateZ(-1.9px);
transform: translateZ(-1.9px);
}
#painted-right, #painted-left {
top: 17.5px;
bottom: 17.5px;
}
/**********************/
/* home button */
/**********************/
#home-button {
bottom: 9px;
left: 50%;
width: 55.7px;
height: 55.7px;
margin-left: -27.9px;
background: -webkit-linear-gradient(top, #f6f6f6 0%,#ffffff 100%);
background: linear-gradient(to bottom, #f6f6f6 0%,#ffffff 100%);
box-shadow: inset 0 0 0 1px #efefef, 0 0 0 1px #fdfdfd;
border-radius: 56px;
}
#click {
top: 50%;
left: 50%;
width: 19.8px;
height: 19.8px;
margin-top: -9.9px;
margin-left: -9.9px;
box-shadow: 0 0 0 2px #fff, inset 0 0 0 1px #efefef, inset 0 -1px 2px #e2e2e2;
border-radius: 5px;
}
/**********************/
/* screen */
/**********************/
#screen {
top: 78.7px;
left: 50%;
width: 256.3px;
height: 449.2px;
border: 3.6px solid #292929;
margin-left: -128.2px;
background: #000;
box-shadow: 0 0 0 1px #fff;
border-radius: 4px;
}
/**********************/
/* front camera */
/**********************/
#front-camera {
top: 17.1px;
left: 50%;
width: 11.7px;
height: 11.7px;
margin-left: -5.6px;
box-shadow: inset 0 2px 0 #242529;
background: -webkit-linear-gradient(left, #242529 0%,#7e7e7e 100%);
background: linear-gradient(to right, #242529 0%,#7e7e7e 100%);
border-radius: 11.7px;
}
#blue-light {
top: 50%;
left: 50%;
width: 6px;
height: 6px;
margin-top: -3px;
margin-left: -3px;
background: -webkit-radial-gradient(center, ellipse cover, #0e2229 0%,#245db4 50%,#245db4 100%);
background: radial-gradient(ellipse at center, #0e2229 0%,#245db4 50%,#245db4 100%);
box-shadow: inset 1px -1px 0 #317ca3;
border-radius: 6px;
}
#front-micro {
top: 41.3px;
left: 50%;
width: 53.9px;
height: 12.6px;
margin-left: -27px;
padding: 2px 1px 2px 2px;
border: 2.7px solid #e9e9e9;
background: #1a1a1a;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.8);
border-radius: 12.6px;
}
#front-micro .point {
position: static;
float: left;
width: 1px;
height: 1px;
margin: 0 1px 1px 0;
background: #4c4c4c;
}
/**********************/
/* proximity sensor */
/**********************/
#proximity {
top: 43.3px;
left: 97px;
width: 8.1px;
height: 8.1px;
background: #555;
border: 1px solid #242529;
box-shadow: 0 0 0 1px #fff;
border-radius: 8.1px;
}
/**********************/
/* sleep button */
/**********************/
#sleep {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#sleep, #sleep-1, #sleep-2, #sleep-3, #sleep-4, #sleep-5, #sleep-6 {
top: 50%;
right: 7.5px;
width: 50.3px;
height: 13.6px;
margin-top: -6.8px;
border: 1px solid #a0a2a1;
border-right: 1px solid #2a2c2b;
border-left: 1px solid #2a2c2b;
background: #d1d3d2;
border-radius: 13.6px/11.6px;
box-shadow: 0 0 0 1px #f0f2f1, inset 0 0 0 1px #f4f6f5;
}
#sleep-1, #sleep-2, #sleep-3, #sleep-4, #sleep-5, #sleep-6 {
right: -1px;
border-right: 1px solid rgba(42,44,43,.5);
border-left: 1px solid rgba(42,44,43,.5);
box-shadow: inset 0 0 0 1px #f4f6f5;
-webkit-transform: translateZ(-.5px);
transform: translateZ(-.5px);
}
#sleep-2 {
-webkit-transform: translateZ(-1px);
transform: translateZ(-1px);
}
#sleep-3 {
-webkit-transform: translateZ(-1.5px);
transform: translateZ(-1.5px);
}
#sleep-4 {
-webkit-transform: translateZ(-2px);
transform: translateZ(-2px);
}
#sleep-5 {
-webkit-transform: translateZ(-2.5px);
transform: translateZ(-2.5px);
}
#sleep-6 {
-webkit-transform: translateZ(-3px);
transform: translateZ(-3px);
}
/**********************/
/* audio jack */
/**********************/
#audio-jack {
top: 50%;
left: 0;
width: 24.3px;
height: 24.3px;
margin-top: -12.2px;
border: 1px solid #282a29;
background: -webkit-linear-gradient(-45deg, #3c4043 0%,#262b2f 100%);
background: linear-gradient(135deg, #3c4043 0%,#262b2f 100%);
border-radius: 24.3px;
box-shadow: inset 0 0 0 2px #e9efef, inset 6px 0 3px #050b0b, 0 0 0 1px #fff;
}
/**********************/
/* lightning */
/**********************/
#lightning {
top: 50%;
left: 50%;
width: 46.2px;
height: 17.2px;
margin-top: -8.6px;
margin-left: -23.1px;
padding-left: 11px;
border: 1px solid #343635;
background: #63686c;
border-radius: 17.2px/14.2px;
box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 2px #e9efef, inset 1px -1px 3px 4px #36393e, 0 0 0 1px #fff;
}
#lightning:before, #lightning:after {
content: "";
position: absolute;
top: 4px;
bottom: 4px;
left: 3px;
width: 3px;
border-right: 1px solid #41494c;
background: #979fa2;
border-radius: 4px;
box-shadow: inset 0 0 0 1px #777b7c;
}
#lightning:after {
left: auto;
right: 3px;
border-left: 1px solid #41494c;
}
#lightning .pin {
position: static;
float: left;
width: 1px;
height: 4px;
margin: 9px 2px 0 0;
background: #3c3d3f;
}
/**********************/
/* speaker */
/**********************/
.speaker {
top: 8.1px;
left: 29.4px;
width: 40px;
height: 14px;
overflow: hidden;
}
.speaker:last-child {
left: auto;
right: 3px;
width: 60px;
}
#iPhone5 .speaker .point {
position: static;
float: left;
width: 5.4px;
height: 5.4px;
margin: 0 1.8px 2.7px 0;
border: 1px solid #080a09;
background: #4f5150;
border-radius: 5.4px;
box-shadow: 0 0 0 1px #f8faf9;
}
/**********************/
/* screw */
/**********************/
.screw {
top: 50%;
left: 71.4px;
width: 7.9px;
height: 7.9px;
margin-top: -4px;
border: 1px solid #bbbdbc;
background: #f3f5f4;
font: bold 5px/7.9px Verdana, Arial, sans-serif;
color: #4d4f4e;
text-align: center;
text-shadow: 1px 1px 0 #f3f5f4;
border-radius: 7.9px;
box-shadow: 0 0 0 1px #f8faf9;
}
#lightning + .screw {
left: auto;
right: 71.4px;
}
/**********************/
/* sim */
/**********************/
#sim {
top: 204.2px;
left: 50%;
width: 11.3px;
height: 77.9px;
margin-left: -5.6px;
border: 1px solid #cacaca;
border-radius: 11.3px/13.3px;
box-shadow: 0 0 0 1px rgba(255,255,255,.2);
}
#sim .hole {
bottom: 2.5px;
left: 50%;
width: 5px;
height: 5px;
margin-left: -2.5px;
background: #010101;
border-radius: 5px;
box-shadow: inset -1px 0 #efefef;
}
/**********************/
/* volume */
/**********************/
.volume, .volume-1, .volume-2, .volume-3, .volume-4, .volume-5, .volume-6 {
top: 85px;
left: 50%;
width: 22px;
height: 22px;
margin-left: -11px;
border: 1px solid #adaeb0;
border-right: 1px solid #838383;
border-left: 1px solid #838383;
background: #d2d4d3;
font: 22px/18px Verdana, Arial, sans-serif;
color: #ebebeb;
text-align: center;
text-shadow: -1px -1px 0 #a8aaa9;
border-radius: 22px;
box-shadow: inset 0 0 0 1px #f1f3f2, 0 0 1px 1px #e9ebea, 0 0 1px 1px #828483;
}
.volume-1, .volume-2, .volume-3, .volume-4, .volume-5, .volume-6 {
top: -1px;
box-shadow: inset 0 0 0 1px #f1f3f2;
-webkit-transform: translateZ(-.5px);
transform: translateZ(-.5px);
}
.volume-2 {
-webkit-transform: translateZ(-1px);
transform: translateZ(-1px);
}
.volume-3 {
-webkit-transform: translateZ(-1.5px);
transform: translateZ(-1.5px);
}
.volume-4 {
-webkit-transform: translateZ(-2px);
transform: translateZ(-2px);
}
.volume-5 {
-webkit-transform: translateZ(-2.5px);
transform: translateZ(-2.5px);
}
.volume-6 {
-webkit-transform: translateZ(-3px);
transform: translateZ(-3px);
}
.volume.down {
top: 135.3px;
}
.volume.down .volume-6 {
font: 45px/15px Georgia, "Times New Roman", serif;
}
/**********************/
/* ring */
/**********************/
#ring, #ring .silent {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#ring {
top: 26px;
left: 50%;
width: 13.4px;
height: 29.9px;
margin-left: -6.7px;
background: #c5c7c6;
border: 1px solid #a5a7a6;
border-right: 1px solid #b3b5b4;
border-radius: 13.4px/10.4px;
box-shadow: 0 0 0 1px #e3e5e4, inset -1px 0 0 #b4b6b5;
}
#ring .silent, .silent-1, .silent-2, .silent-3, .silent-4, .silent-5, .silent-6 {
top: -1px;
bottom: -1px;
left: -1px;
width: 7.9px;
border: 1px solid #979998;
background: #d9dbda;
border-radius: 7.9px/12.9px;
box-shadow: inset 1px 1px 0 #f3f5f4;
}
.silent-1, .silent-2, .silent-3, .silent-4, .silent-5, .silent-6 {
top: 0;
}
.silent-1 {
-webkit-transform: translateZ(-.5px);
transform: translateZ(-.5px);
}
.silent-2 {
-webkit-transform: translateZ(-1px);
transform: translateZ(-1px);
}
.silent-3 {
-webkit-transform: translateZ(-1.5px);
transform: translateZ(-1.5px);
}
.silent-4 {
-webkit-transform: translateZ(-2px);
transform: translateZ(-2px);
}
.silent-5 {
-webkit-transform: translateZ(-2.5px);
transform: translateZ(-2.5px);
}
.silent-6 {
-webkit-transform: translateZ(-3px);
transform: translateZ(-3px);
}
/**********************/
/* rear camera */
/**********************/
#rear-camera {
top: 23px;
left: 29.7px;
width: 27px;
height: 27px;
background: -webkit-linear-gradient(top, #0d0e10 0%,#48494b 100%);
background: linear-gradient(to bottom, #0d0e10 0%,#48494b 100%);
border-radius: 27px;
box-shadow: 0 0 0 2px #d5d9da, 0 0 0 3px #d7d7d9, 0 0 0 4px #fff;
}
#light {
top: 50%;
left: 50%;
width: 10px;
height: 10px;
margin-top: -5px;
margin-left: -5px;
border: 1px solid #12171b;
background: #063e5f;
border-radius: 10px;
box-shadow: inset 0 2px 2px #145b77, inset 0 -1px 0 #22a6b3, 0 0 0 3px #363f3c, 0 0 0 4px #25292a;
}
/**********************/
/* rear micro */
/**********************/
#rear-micro {
top: 35px;
left: 68.1px;
width: 7.2px;
height: 3.6px;
background: #2c2d2f;
border-radius: 3.6px/2.6px;
box-shadow: 0 0 0 1px #fff;
}
/**********************/
/* flash */
/**********************/
#flash {
top: 29px;
left: 84.2px;
width: 15px;
height: 15px;
border: 1px solid #a5a6a8;
background: -webkit-linear-gradient(top, #eff0f4 0%,#b8c1c0 40%,#b8c1c0 60%,#eff0f4 100%);
background: linear-gradient(to bottom, #eff0f4 0%,#b8c1c0 40%,#b8c1c0 60%,#eff0f4 100%);
border-radius: 15px;
box-shadow: inset 0 1px 2px #838a8c, 0 0 0 2px #e1e1e1, 0 0 0 3px #fff;
}
#flash-light {
top: 50%;
left: 50%;
width: 6px;
height: 6px;
margin-top: -3px;
margin-left: -3px;
background: #f4f2dd;
border-radius: 6px;
box-shadow: inset 0 -1px 1px #fffffd, inset 0 3px 2px #dedcc5;
}
/**********************/
/* icon apple */
/**********************/
.icon-apple {
top: 117.2px;
right: 0;
left: 0;
margin: 0;
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
font-size: 79.3px;
text-transform: none;
text-align: center;
line-height: 1;
color: #3d3d3d;
text-shadow: -1px -1px 0 #282828, 1px 1px 0 #f1f3f2;
-webkit-font-smoothing: antialiased;
}
.icon-apple:before {
content: "\e000";
}
/**********************/
/* iphone text */
/**********************/
#iphone-text {
top: 415px;
bottom: 0;
right: 0;
left: 0;
}
#iphone-text h2, #iphone-text p {
position: static;
margin: 0;
text-align: center;
}
#iphone-text h2 {
font: normal 24.5px "Gill Sans", Arial, sans-serif;
color: #fff;
text-shadow: 0 0 1px #9a9c9b;
}
#iphone-text p {
margin-top: 11px;
font: normal 6.5px/1.3 "Myriad Pro", Verdana, Arial, sans-serif;
color: #8c8e8d;
text-shadow: 0 0 1px #fff;
}
#iphone-text br {
position: static;
}
#iphone-text p:last-child {
margin-top: 2px;
font-family: "Century Gothic", sans-serif;
font-size: 20px;
color: #dcdedd;
text-shadow: -1px -1px 0 #8c8e8d, 1px -1px 0 #8c8e8d, -1px 1px 0 #8c8e8d, 1px 1px 0 #8c8e8d;
}
#iphone-text p:last-child span:first-child {
top: -5px;
position: relative;
font-size: 6.5px;
color: #8c8e8d;
text-shadow: 0 0 1px #fff;
}
#iphone-text p:last-child span + span {
top: -3px;
position: relative;
display: inline-block;
width: 18px;
border: 1px solid #8c8e8d;
font-size: 13px;
border-radius: 18px;
box-shadow: inset 0 0 0 1px #dcdedd, inset 0 0 0 2px #8c8e8d;
}
/**********************/
/* clipping firefox */
/**********************/
#main-structure, .left, .angle-right, .angle-left {
z-index: 1;
}
#top-structure, .angle-right, .angle-left, .angle-right:before, .angle-left:before, .angle-right:after, .angle-left:after, #screen-structure {
z-index: 2;
}
