Single Element iPhone 5 using CSS3

iphone.css

body {background: url(http://subtlepatterns.com/patterns/classy_fabric.png)}

/* First, we'll make the body. After that we'll use :after and :before elements to make other things like buttons */

.iphone5 {
	position: relative;
	height: 520px;
	width: 248px;
	border-radius: 35px;
	margin: 50px auto;
	
	/* Use multiple background images (linear-gradients) here to create the main background, the shine and the screen */
	/*reduced the shine a bit too strong! */
	background: 
		linear-gradient(-161deg, rgba(255,255,255,.3), rgba(255,255,255,0.1) 36%, transparent 36%), 
		/* LCD Screen Gradient */
		linear-gradient(top, transparent 78px, #222 78px, #1f1f1f 454px, transparent 410px),
		
			/* black border around LCD Screen */
	linear-gradient(top, transparent 82px, #000 83px, #080808 458px, transparent 460px), 
		/* near black Face */
		linear-gradient(top, #000, #010101); 
	
	/* Screen positions */
	background-repeat: no-repeat;
	background-size: 100% 100%, 218px 100%, 224px 100%, 100% 100%;
	background-position: 0 0, 15px 0, 12px 0, 0 0; /*added values for border -AL */
	

		box-shadow: 
		/* Rather than drawing the bezel first, we'll draw the small dividers first to overlay ontop of the bezel - 4 dividers for the iPhone 5 */
		126px -214px -136px -122px rgba(0,0,0,.7),
		126px 214px -136px -122px rgba(0,0,0,.7),
		-126px -214px -136px -122px rgba(0,0,0,.7),
		-126px 214px -136px -122px rgba(0,0,0,.7),
		
		/* Diamond Bezel Glares !  really messy stuff! I should have used the :after to do this rather since I can use softening.  But anyway, what's done is done. */
		-118px -247px -136px -123px rgba(255,255,255,.6),
		-117px -248px -136px -123px rgba(255,255,255,.5),
		-116px -249px -136px -123px rgba(255,255,255,.5),
		-114px -249px -136px -122px rgba(255,255,255,.4),
		-113px -251px -136px -122px rgba(255,255,255,.3),
		-111px -254px -136px -122px rgba(255,255,255,.15),
		-109px -255px -136px -122px rgba(255,255,255,.1),
		-107px -256px -136px -122px rgba(255,255,255,.1),
		-118px -245px -136px -122px rgba(0,0,0,.6),
		
		-115px 249px -136px -123px rgba(255,255,255,.6),
		-114px 251px -136px -123px rgba(255,255,255,.5),
		-112px 252px -136px -123px rgba(255,255,255,.5),
		-110px 253px -136px -123px rgba(255,255,255,.4),
		-110px 254px -136px -123px rgba(255,255,255,.4),
		-107px 255px -136px -122px rgba(255,255,255,.3),
		-105px 258px -136px -122px rgba(255,255,255,.1),
		-102px 259px -136px -122px rgba(255,255,255,.05),
		-100px 260px -136px -123px rgba(255,255,255,.01),
		-117px 249px -136px -122px rgba(0,0,0,.6),
		
		113px 251px -136px -123px rgba(255,255,255,.7),
		115px 250px -136px -123px rgba(255,255,255,.6),
		117px 249px -136px -123px rgba(255,255,255,.4),
		118px 246px -136px -122px rgba(255,255,255,.3),
		120px 243px -136px -122px rgba(255,255,255,.2),
		122px 241px -136px -122px rgba(255,255,255,.1),
		123px 239px -136px -122px rgba(255,255,255,.1),
		125px 236px -136px -122px rgba(255,255,255,.05),
		112px 252px -136px -123px rgba(0,0,0,.5),
		
		115px -249px -136px -123px rgba(255,255,255,.7),
		117px -248px -136px -123px rgba(255,255,255,.4),
		118px -245px -136px -122px rgba(255,255,255,.4),
		120px -242px -136px -122px rgba(255,255,255,.3),
		122px -240px -136px -122px rgba(255,255,255,.2),
		123px -237px -136px -122px rgba(255,255,255,.1),
		125px -235px -136px -122px rgba(255,255,255,.05),
		124px -234px -136px -122px rgba(255,255,255,.05),
		113px -252px -136px -123px rgba(0,0,0,.5),
		
		/* Aluminum Diamond Bezel in Black and highlight */
		0 0 2px 1px rgba(120,128,150,.8),
		0 0 0 4px #050606,
		inset 0 0 2px 2px #000,
	
		/* Top button metallic shine on the button */
		49px -130px 2px -123px #1c2028,
		45px -130px 2px -123px #757c8d,
		/* Top button from here */
		62px -111px 1px -105px #35373c,
		62px -112px 0 -105px #01010d,
		62px -112px 0 -105px #35373c,
		
		/* Drop shadow for Phone*/
		0 5px 15px 8px rgba(0,0,0,.7);
}

/* Our phone's body is complete! Now we'll move onto the home button, front cam and the speaker.. */
/* We are going to use :after pseudo element for that and a lot of box-shadow awesomeness */
.iphone5:after {
	content: '▢';
	line-height: 1.6em; /*changed line height to compensate for smaller character  */
	text-align: center;
	font-size: 1.6em; /* changed font size because it was way too large  compared to the actual thing - used RGBA value to make it translucent -  Ok, just figured out the problem with this.  Depending on the character set on PCs and Macs, you'll get a different result!  On my Mac, Kushagra's was huge and with mine, on a PC it looks tiny.  There is a disconnect here. Any other solutions without using an additional element? */
	color: rgba(255,255,255,.25);
	position: absolute;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #fff;
	bottom: 10px;
	left: 102px;
	border: 2px solid #0a0a0a;
	text-shadow: 0 1px 1px rgba(255,255,255,.3); /* Added subtle shadow */
	
	
	/* We'll use gradients for the depth */
	background-image:
		linear-gradient(bottom, rgba(0, 0, 0, 0.7) 0%,rgba(0, 0, 0, 0.90) 45%,rgba(0, 0, 0, 1) 45%, #000 100%); /* Looking good */
	/* Changed to vertical gradient, with multiple colors for a glass look button */
	

	/* Now some box-shadow magic to create speaker and front cam */
	box-shadow:
		/* Front Cam: looking good with the new sapphire lens */
		-3px -461px 1px -24px #4a2061,
		-2px -460px 2px -23px #000c01,
		-2px -460px 0 -23px #2d0e43,
		-2px -461px 3px -22px #000000,
		-2px -460px 0 -19px #0c0c0c,
		
		/* Camera Highlights and Shadows */
		-2px -460px 0 -18px rgba(255,255,255,.06),
		-2px -459px 0 -18px rgba(0,0,0,.8),
	
		/* Speaker, it's a mess. Really. */ 
		/* now the outer covering of speaker, another mess */
		-18px -437px 0 -21px #252525,
		-14px -437px 0 -21px #222,
		-11px -437px 0 -21px #222,
		-7px -437px 0 -21px #222,
		-3px -437px 0 -21px #222,
		0px -437px 0 -21px #222,
		3px -437px 0 -21px #222,
		7px -437px 0 -21px #222,
		11px -437px 0 -21px #222,
		14px -437px 0 -21px #222,
		18px -437px 0 -21px #222,
		21px -434px 2px -22px rgba(255,255,255,.5),
		
		-19px -437px 0 -18px #151515,
		-15px -437px 0 -18px #121212,
		-11px -437px 0 -18px #101010,
		-7px -437px 0 -18px #101010,
		-3px -437px 0 -18px #101010,
		1px -437px 0 -18px #101010,
		4px -437px 0 -18px #101010,
		7px -437px 0 -18px #101010,
		10px -437px 0 -18px #101010,
		13px -437px 0 -18px #101010,
		16px -437px 0 -18px #101010,
		19px -437px 0 -18px #101010,
		
		/* Button highlight below Home Button*/
		0 1px 0 0 rgba(255,255,255,.3);
}

/* Side buttons Code */
.iphone5:before {
	position: absolute;
	content: '';
	width: 1px;
	height: 117px;
	background: transparent;
	top: 76px;
	left: -6px;
	
	/* Button Highlights and color */
	background-image:
	
		/* Side button Gradient shape with transparencies to mimic 3 separate buttons.*/
		linear-gradient(left, transparent 0px, transparent 1px, #7a7879 2px),
		linear-gradient(top, #858b9c 2px, #01010d 3px, #35373c 4px , #35373c 12px, #6d7280 19px, #22252d 20px,#6d7280 21px, #01010d 23px, transparent 24px, transparent 53px, #858b9c 53px, #35373c 57px, #35373c 60px, #35373c 62px, #01010d 65px, #01010d 66px, #383838 66px, #525863 68px, #6d7280 70px, transparent 70px, transparent 100px, #858b9c 100px, #35373c 102px, #35373c 105px, #35373c 111px, #01010d 112px, #383838 114px, #6d7280 114px, #6d7280 115px, #383838 117px);
}

/* 
That sums up the iPhone 5.  Again this was based on Kushagra Agarwal's idea and it was a fun excercise.  I now have a greater grasp at CSS3 thanks to this.  

I also have to thank Teehan + Lax for their high resolution image of the iPhone 5 as visual reference.

*/

iphone.html

<div class="iphone5"></div>