Posted by at

2011年12月04日

iPhone4 を CSS だけで描いてみた。

本日2011年12月4日の久留米プログラミングフリークス勉強会の発表ネタとしてiPhone4 をCSSだけで書いてみました。
ただ実務レベルでは使えないよね。

でも、こう言うの大好き(^^/
ただ、IE9では、グラデーションが表示しないので、その他ブラウザで見てね(^^;



HTML はこちら
  <div id="iphone_body">
  <div id="camera"></div>
  <div id="camera-inner"></div>
  <div id="speaker"></div>
  <div id="speaker-inner"></div>
  <div id="disp"></div>
  <div id="hbtn"></div>
  <div id="hbtn-inner"></div>
  <div id="btn1"></div>
  <div id="btn2"></div>
  <div id="btn3"></div>
  <div id="line1"></div>
  <div id="line2"></div>
  <div id="line3"></div>
  </div>



CSSはこちら
#iphone_body {
height: 452px;
width: 232px;
padding-top: 0px;
padding-left: 0px;
border: 2px solid #CCCCCC;
margin-top: 20px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 100px;
padding-right: 0px;
padding-bottom: 0px;
background-color: #000000;
border-radius:25px;
box-shadow:#000000 0px 0px 20px;
background: -webkit-gradient(linear, left top, right bottom, from(#000000), to(#222222));
background: -ms-linear-gradient(top, #000000, #222222);
background: -moz-linear-gradient(top, #000000, #222222);
}
#camera {
padding: 0px;
height: 12px;
width: 12px;
margin-top: 28px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 70px;
background-color: #333333;
border-radius:6px;
}
#camera-inner {
height: 4px;
width: 4px;
margin-top: -9px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 73px;
background-color: #000000;
border-radius:2px;
border: 1px solid #666666;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#speaker {
padding: 0px;
height: 12px;
width: 44px;
margin-top: -9px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 95px;
background-color: #333333;
border-radius:6px;
}
#speaker-inner {
padding: 0px;
height: 4px;
width: 36px;
margin-top: -8px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 99px;
background-color: #aaaaaa;
border-radius:3px;
}
#disp {
background-color: #333333;
height: 310px;
width: 213px;
padding: 0px;
margin-top: 33px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 10px;
background: -webkit-gradient(linear, left top, right bottom, from(#222222), to(#333333));
background: -ms-linear-gradient(top, #222222, #333333);
background: -moz-linear-gradient(top, #222222, #333333);
}
#hbtn {
width:42px;
height:42px;
border-radius:21px;
background-color: #282828;
padding: 0px;
margin-top: 14px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 94px;
}
#hbtn-inner {
width:13px;
height:13px;
border-radius:4px;
border: 1px solid #CCCCCC;
margin-top: -29px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 108px;
}
#btn1 {
background-color:#eeeeee;
width:2px;
height:20px;
padding: 0px;
margin-top: -385px;
margin-left: -5px;
background: -webkit-gradient(linear, left top, left bottom, from(#333333),color-stop(20%,#eeeeee),color-stop(80%,#eeeeee), to(#333333));
background: -ms-linear-gradient(top, #333333, #eeeeee 20%, #eeeeee 80%, #333333);
background: -moz-linear-gradient(top, #333333, #eeeeee 20%, #eeeeee 80%, #333333);

}
#btn2 {
background-color:#eeeeee;
width:2px;
height:15px;
padding: 0px;
margin-top: 30px;
margin-left: -5px;
background: -webkit-gradient(linear, left top, left bottom, from(#333333),color-stop(50%,#ffffff), to(#333333));
background: -ms-linear-gradient(top, #333333, #ffffff 50%, #333333);
background: -moz-linear-gradient(top, #333333, #ffffff 50%, #333333);
}
#btn3 {
background-color:#eeeeee;
width:2px;
height:15px;
padding: 0px;
margin-top: 30px;
margin-left: -5px;
background: -webkit-gradient(linear, left top, left bottom, from(#333333),color-stop(50%,#ffffff), to(#333333));
background: -ms-linear-gradient(top, #333333, #ffffff 50%, #333333);
background: -moz-linear-gradient(top, #333333, #ffffff 50%, #333333);
}
#line1 {
background-color:#222222;
width:2px;
height:2px;
padding: 0px;
margin-top: 254px;
margin-left: -2px;
}
#line2 {
background-color:#222222;
width:2px;
height:2px;
padding: 0px;
margin-top: -2px;
margin-left: 232px;
}
#line3 {
background-color:#222222;
width:2px;
height:2px;
padding: 0px;
margin-top: -404px;
margin-left: 73px;
}


  


Posted by 田中克之 at 20:23Comments(1)CSS