CSS3 と HTML で iPhone を作ってみました。
9:42
Thursday, June 9
slide to unlock
CSS3 iPhone
CSS3 iPhone Download
- CSS3 iPhone » Download
IMAGE
HTML
<div id="iPhone"> <div id="powerbutton"></div> <div id="leftbutton"> <div id="lockbutton"></div> <div id="volumebutton1"></div> <div id="volumebutton2"></div> </div> <div id="flame1"> <div id="flame2"> <div id="flame3"> <div id="flame4"> <div id="display"> <div id="ear1"> <div id="ear2"></div> </div> <div id="space1"></div> <div id="screen"> <div id="topbar"></div> <div class="line2"></div> <div class="glassmenu"></div> <div class="line1"></div> <div class="line2"></div> <div id="clock">9:42</div> <div id="day">Thursday, June 9</div> <div id="space2"></div> <div class="line2"></div> <div class="line3"></div> <div class="glassmenu"></div> <div id="unlockslider"></div> <div id="unlockbutton"></div> <div id="unlock">slide to unlock</div> </div> <div id="space3"></div> <div id="homebutton"> <div id="square"></div> </div> </div> </div> </div> </div> </div> <p id="title">CSS3 iPhone</p> </div>
CSS
#iPhone {
margin: 0 auto;
padding: 40px 0;
width: 302px;
text-align: center;
}
#iPhone div {
margin: 0 auto;
color: #FFFFFF;
text-align: center;
font-family: Helvecira, sans-serif;
text-shadow: 0 -1px 2px #000000;
}
#iPhone #powerbutton {
margin: 0 0 0 200px;
width: 48px;
height: 2px;
background: -webkit-gradient(linear, left center, right center, from(#646566), color-stop(0.1, #cacbcc), color-stop(0.9, #cacbcc), to(#646566));
background: -moz-linear-gradient(left, #646566, #cacbcc 10%, #cacbcc 90%, #646566);
-webkit-border-top-right-radius: 2px;
-webkit-border-top-left-radius: 2px;
-moz-border-radius-topright: 2px;
-moz-border-radius-topleft: 2px;
}
#iPhone #leftbutton {
float: left;
width: 2px;
}
#iPhone #lockbutton {
margin: 60px 0 18px 0;
width: 2px;
height: 25px;
background: -webkit-gradient(linear, center top, center bottom, from(#000000), color-stop(0.2, #cacbcc), color-stop(0.8, #cacbcc), to(#000000));
background: -moz-linear-gradient(center top, #646566, #cacbcc 20%, #cacbcc 80%, #646566);
-webkit-border-top-left-radius: 2px;
-webkit-border-bottom-left-radius: 2px;
-moz-border-radius-topleft: 2px;
-moz-border-radius-bottomleft: 2px;
}
#iPhone #volumebutton1 {
margin: 10px 0;
width: 2px;
height: 40px;
background: -webkit-gradient(linear, center top, center bottom, from(#000000), color-stop(0.2, #cacbcc), color-stop(0.6, #cacbcc), to(#000000));
background: -moz-linear-gradient(center top, #646566, #cacbcc 20%, #cacbcc 60%, #646566);
-webkit-border-top-left-radius: 2px;
-webkit-border-bottom-left-radius: 2px 30px;
-moz-border-radius-topleft: 2px;
-moz-border-radius-bottomleft: 2px;
}
#iPhone #volumebutton2 {
margin: 10px 0;
width: 2px;
height: 40px;
background: -webkit-gradient(linear, center top, center bottom, from(#000000), color-stop(0.4, #cacbcc), color-stop(0.8, #cacbcc), to(#000000));
background: -moz-linear-gradient(center top, #646566, #cacbcc 40%, #cacbcc 80%, #646566);
-webkit-border-top-left-radius: 2px 30px;
-webkit-border-bottom-left-radius: 2px;
-moz-border-radius-topleft: 2px;
-moz-border-radius-bottomleft: 2px;
}
#iPhone #flame1 {
float: right;
padding: 5px 0;
width: 300px;
height: 545px;
background: -webkit-gradient(linear, left top, left bottom, from(#B1B2B3), color-stop(0.03, #FFFFFF), color-stop(0.98, #FFFFFF), to(#646566));
background: -moz-linear-gradient(center top, #B1B2B3, #FFFFFF 3%, #FFFFFF 98%, #646566);
-webkit-box-shadow: 0 5px 10px #999999;
-moz-box-shadow: 0 5px 10px rgba(0,0,0, .5);
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
}
#iPhone #flame2 {
padding: 1px 0;
width: 300px;
height: 543px;
background-color: #000000;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
}
#iPhone #flame3 {
width: 296px;
height: 543px;
background: -webkit-gradient(linear, left center, right center, from(#FFFFFF), color-stop(0.02, #646566), color-stop(0.98, #646566), to(#FFFFFF));
background: -moz-linear-gradient(left, #FFFFFF, #646566 2%, #646566 98%, #FFFFFF);
-webkit-border-radius: 52px;
-moz-border-radius: 52px;
}
#iPhone #flame4 {
padding: 5px 0;
width: 286px;
height: 533px;
background-color: #FFFFFF;
-webkit-border-radius: 45px;
-moz-border-radius: 45px;
}
#iPhone #display {
padding: 35px 0;
width: 270px;
height: 457px;
border: 3px solid #000000;
background: -webkit-gradient(linear, right top, left bottom, from(#4B4C4D), color-stop(0.2, #0F0F0F), to(#0F0F0F));
background: -moz-linear-gradient(right top, #4B4C4D, #121212 20%, #121212);
-webkit-border-radius: 38px;
-moz-border-radius: 38px;
}
#iPhone #ear1 {
padding: 3px;
width: 50px;
height: 6px;
background: -webkit-gradient(linear, center top, center bottom, from(#000000), to(#313233));
background: -moz-linear-gradient(top, #000000, #313233);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
#iPhone #ear2 {
width: 50px;
height: 6px;
background: -webkit-gradient(linear, center top, center bottom, from(#171819), to(#474849));
background: -moz-linear-gradient(top, #171819, #474849);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
#iPhone #space1 {
height: 30px;
}
#iPhone #space2 {
height: 207px;
}
#iPhone #space3 {
height: 8px;
}
#iPhone #screen {
padding: 4px 0;
width: 256px;
height: 373px;
background: url(/clownfish.png) no-repeat 50% 50%, -webkit-gradient(linear, center top, center bottom, from(#313233), color-stop(0.5, #171819), to(#313233));
background: url(/clownfish.png) no-repeat 50% 50%, -moz-linear-gradient(center top, #313233, #171819 50%, #313233);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}
#iPhone #topbar {
width: 248px;
height: 11px;
background: #000000 url(/icon.png) no-repeat 50% 50%;
opacity: 0.5;
}
#iPhone .glassmenu {
width: 248px;
height: 75px;
background: -webkit-gradient(linear, center top, center bottom, from(#666666), color-stop(0.25, #1A1A1A), color-stop(0.5, #1A1A1A), color-stop(0.5, #000000), to(#000000));
background: -moz-linear-gradient(center top, #666666, #1A1A1A 25%, #1A1A1A 50%, #000000 50%, #000000);
opacity: 0.5;
}
#iPhone .line1 {
width: 248px;
height: 1px;
background-color: #333333;
opacity: 0.5;
}
#iPhone .line2 {
width: 248px;
height: 1px;
background-color: #000000;
opacity: 0.6;
}
#iPhone .line3 {
width: 248px;
height: 1px;
background-color: #999999;
opacity: 0.5;
}
#iPhone #clock {
position: absolute;
margin: -70px 0 0 0;
width: 256px;
font-size: 42px;
}
#iPhone #day {
position: absolute;
margin: -25px 0 0 0;
width: 256px;
font-size: 10px;
}
#iPhone #unlock {
position: absolute;
margin: -48px 26px 0 26px;
width: 256px;
font-size: 20px;
}
#iPhone #unlockslider {
position: absolute;
margin: -58px 17px 0 17px;
width: 220px;
height: 40px;
border: 1px solid #4D4D4D;
background: -webkit-gradient(linear, center top, center bottom, from(#000000), to(#333333));
background: -moz-linear-gradient(center top, #000000, #333333);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
opacity: 0.8;
}
#iPhone #unlockbutton {
position: absolute;
margin: -55px 20px 0 20px;
width: 50px;
height: 36px;
background: url(/arrow.png) no-repeat 50% 50%, -webkit-gradient(linear, center top, center bottom, from(#F7F7F7), color-stop(0.25, #D9D9D9), color-stop(0.5, #D9D9D9), color-stop(0.5, #C3C3C3), to(#959595));
background: url(/arrow.png) no-repeat 50% 50%, -moz-linear-gradient(center top, #F7F7F7, #D9D9D9 25%, #D9D9D9 50%, #C3C3C3 50%, #959595);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}
#iPhone #homebutton {
padding: 18px;
width: 16px;
height: 16px;
background: -webkit-gradient(linear, right top, left bottom, from(#000000), color-stop(0.25, #000000), to(#333333));
background: -moz-linear-gradient(center top, #000000, #000000 25%, #333333);
-webkit-border-radius: 26px;
-moz-border-radius: 26px;
}
#iPhone #square {
width: 15px;
height: 15px;
border: 1px solid #646566;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
#iPhone #title {
clear: both;
margin: 0;
font-size: 40px;
line-height: 80px;
}
No Comment