Created
June 25, 2012 21:54
-
-
Save gcyrillus/2991555 to your computer and use it in GitHub Desktop.
gcyrillus this is not an iphone
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* gcyrillus this is not an iphone */ | |
html {background:url(http://d2f8dzk2mhcqts.cloudfront.net/0559_iPhone4/final.jpg)no-repeat top center} | |
#iphone { | |
height:295px; | |
width:148px; | |
aborder:#D9D9D9 solid 2px; | |
box-shadow:0 0 0 2px #d9d9d9,inset 0 0 0 2px black, 0 0 15px black; | |
margin:93px 104px; | |
border-radius:25px; | |
background-image: | |
linear-gradient(90deg, rgba(0,0,0,0.9) 40%, transparent 99%), | |
linear-gradient(22deg,#000 67% , #999 50%) | |
; | |
padding:1px; | |
font-family: arial; | |
} | |
p#mic { | |
padding:0; | |
margin:21px 58px 0 60px; | |
height:8px; | |
border-radius:1em; | |
box-shadow:0 0 2px black, inset 0 0 1px 2px #000, inset 0 0 3px 4px #333; | |
position:relative; | |
} | |
p#mic:before {content:'';border-radius:1em; | |
border:solid #333 1px; | |
box-shadow:0 0 1px 1px #555; | |
height:2px; | |
width:2px; | |
position:absolute; | |
left:-15px; | |
top:1px; | |
} | |
figure {width:124px; | |
margin:22px auto 0; | |
position:relative; | |
overflow:hidden; | |
} | |
figure:before { | |
content:''; | |
position:absolute; | |
width:54px; | |
height:80px; | |
top:0; | |
right:0; | |
border-radius:0 0 0px 200px; | |
background-image: | |
linear-gradient(24deg,transparent 40% , rgba(255,255,255,0.2) 30%) ; | |
box-shadow:28px 30px 5px rgba(255,255,255,0.19); | |
} | |
figure img {vertical-align:top;} | |
figcaption { | |
background-color:silver; | |
height:21px; | |
padding:2px; | |
margin:0; | |
background-image:linear-gradient(90deg,#777,#fff); | |
font-size:9px; | |
} | |
#light { | |
position:absolute; | |
opacity:0.55; | |
box-shadow:0 0 4px 2px #000 | |
letter-spacing:-1px; | |
margin:0; | |
top:8px; | |
left:8px; | |
background:#fff;#C6CC59; | |
border-radius:1em; | |
padding:0px 5px 1px 0; | |
line-height:1.2em; | |
text-align:right; | |
} | |
#light:before {content:'z';; | |
padding:0 2em 0 ;text-shadow:0 0 1px #333; | |
display:inline-block; | |
transform:skew(65deg,-105deg) rotate(-405deg); | |
transform-origin:center; | |
font-size:4px; | |
vertical-align:1em; | |
} | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div id="iphone"> | |
<p id="mic">j</p> | |
<figure> | |
<img src="http://lorempixum.com/124/168/ " /> | |
<figcaption> | |
<p id="light">Off </p> | |
</figcaption> | |
</figure> | |
</div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment