A Pen by Collin Graves.

Flat-CSS-iPhone-iPad.markdown

Flat CSS iPhone/iPad

A flat CSS iPhone/iPad. Clicking the home button triggers the transformation.

Because the shapes are all sized in ems, the size of the mockup can easily be changed in CSS by adding a rule for #device to change the font size of the element (best done in percents).

A Pen by Collin Graves on CodePen.

License.

index.html

		<article id="devices">
			<div id="device" class="iphone">
				<div id="devicetop" class="iphone-speaker">
				</div>
				<div id="screen" class="iphone-screen">
				</div>
				<a href="#"><div id="button" onclick="ipadSwitch()">
					<div id="button-square">
					</div>
				</div></a>
			</div>
		</article>

script.js

			function ipadSwitch() {
				$("#device").toggleClass('ipad');
				$("#devicetop").toggleClass('ipad-camera');
				$("#screen").toggleClass('ipad-screen');
$("#button").toggleClass('ipad-button');
			}

style.css

#device, #devicetop, #screen, #button {
	-webkit-transition: all .4s;
	-moz-transition: all .4s;
	transition: all .4s;
}

#devices {
	background-color: #73c9ad;
	width:100%;
height:100%;
	padding: 2em 0 12em;
	margin: 0;
}

#device {
	margin: 6em auto 0.598em;
	background-color: #fff;
	border:0.126em solid #fff;
	border-radius: 1.512em;
	width: 11.592em;
	height: 23.058em;
	padding:1.701em 0 0;
	box-shadow: 0px 5px 0px #c5c3ba;
}

#device.ipad {
	margin: 1em auto 0.598em;
background-color: #000;
	border-radius: 1.512em;
	width: 28.98em;
	height: 38.178em;
	padding:1.134em 0 0;
	box-shadow: none;
}

#devicetop {
	background-color: #aba99f;
	width: 1.89em;
	height: 0.315em;
	border:0.126em solid #c5c3ba;
	border-radius: 0.315em;
	margin: 0 auto 0.756em;
}

#devicetop.ipad-camera {
	width: 0.315em;
	height: 0.315em;
	border-radius: 0.315em;
	margin: 0 auto 1.512em;
	border: 0.189em solid #c5c3ba;
}

#screen {
	background-color: #c5c3ba;
	margin: 0 auto 0;
	border: 0.189em solid #aba99f;
	border-radius: 0.189em;
	width:10.08em;
	height:17.892em;
}

#screen.ipad-screen {
	width:24.192em;
	height:32.256em;
}

#button {
	margin: 0.63em auto 0;
	background-color: #fff;
	width: 1.071em;
	height: 1.071em;
	border-radius: 50%;
	padding: 0.567em;
	cursor: hand;
}

#button.ipad-button {
background-color: #000;
}

#button:hover {
	cursor: hand;
}

#button-square {
	margin: 0 auto 0 0.063em;
	width: 0.693em;
	height: 0.693em;
	border: 0.126em solid #e9eae4;
	border-radius: 0.252em;
}