Skip to content

Instantly share code, notes, and snippets.

@gcyrillus
Created June 25, 2012 21:54
Show Gist options
  • Save gcyrillus/2991555 to your computer and use it in GitHub Desktop.
Save gcyrillus/2991555 to your computer and use it in GitHub Desktop.
gcyrillus this is not an iphone
/* 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;
}
<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>
{"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