CSS3로 만든 아이폰

출처: http://www.hongkiat.com/blog/coding-graphics-with-css3/

아이폰.html

CSS를 이렇게까지 활용할 수 있구나...대단하단 생각뿐이 안든다...

일단 시계부터 뜯어보았다. 어떻게 만들었을까...~

               

  
	
1
	
2
	
3
	
4
	
5
	
6
	
7
	
8
	
9
	
10
	
11
	
12
	

	

	

	

	
	

마크업은 이렇게 되어있다.

이번엔 css

ul { z-index: 2; position: relative; width: 76px; height: 76px; background: -webkit-gradient(linear, left top, left bottom, from(#cacaca), to(#e6e6e6), color-stop(1, #fff)); margin: 0 auto; list-style: none; -webkit-border-radius: 38px; -webkit-box-shadow: 0 -1px 0 rgba(0,0,0, 0.5), 0 1px 0 rgba(255,255,255, 1.0); }
ul li { text-shadow: 0 -1px 0 rgba(255,255,255, 0.5); }
li.hour, li.minute, li.second { width: 76px; height: 76px; position: absolute; }

li.hour span { margin: 35px 0 0 38px; border-style: solid; border-width: 3px 0 3px 16px; border-color: transparent #050506; }

#newyork   li.hour { -webkit-transform: rotate(-66deg); }

li.minute          { -webkit-transform: rotate(160deg); }
li.minute span { display: none; margin: 36px 0 0 38px; border-style: solid; border-width: 2px 0 2px 24px; border-color: transparent #050506; }
li.second span { margin: 37px 0 0 38px; width: 28px; height: 1px; background: #d20f11; }
li.pin { position: absolute; top: 34px; left: 34px; width: 4px; height: 4px; background: #d20f11; -webkit-border-radius: 4px; border: 2px solid #050506; }
li.one    { top: 8px; right: 20px; position: absolute; }
li.two    { top: 19px; right: 11px; position: absolute; }
li.three  { top: 33px; right: 5px; position: absolute; }
li.four   { bottom: 17px; right: 9px; position: absolute; }    
li.five   { bottom: 7px; right: 20px; position: absolute; }
li.six    { bottom: 3px; left: 35px; position: absolute; }
li.seven  { bottom: 7px; left: 20px; position: absolute; }
li.eight  { bottom: 17px; left: 10px; position: absolute; } 
li.nine   { top: 33px; left: 6px; position: absolute; }
li.ten    { top: 19px; left: 7px; position: absolute; }
li.eleven { top: 8px; left: 17px; position: absolute; }
li.twelve { top: 5px; left: 32px; position: absolute; }
li.glare { width: 76px; height: 76px; -webkit-border-radius: 38px; background: -webkit-gradient(radial, 50% 135%, 30, 50% 135%, 150, from(rgba(255,255,255, 0)), to(rgba(255,255,255, 0.7)), color-stop(50%, rgba(255,255,255, 0)), color-stop(50%, rgba(255,255,255, 0.3))); }

li.hour span, li.minute span, li.second span { display: block; }

여기서 재미있는것은 바늘모양을 만든 css! span을 블럭 시켜서 border-width값을 지정해주었다. border-width의 새로운 발견.....나머진 포지션 떡칠...노가다의 결정판.