Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

3395 Lines of CSS + 335 Lines of JavaScript = iOS (Not Really)

DZone's Guide to

3395 Lines of CSS + 335 Lines of JavaScript = iOS (Not Really)

· Web Dev Zone ·
Free Resource

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Unlike the last few awesome HTML5/CSS3 projects I've posted about here, this massive labor of persistence doesn't demo any single web technology particularly coolly:


But it does spend a lot of time to reproduce a totally different technology remarkably closely.

That's a screenshot of an iPhone 4 in pure CSS3. The page itself uses JavaScript, but only for the slide-unlock, power, and home buttons. There's no Canvas, and no SVG here.

Why make it at all? Vasil Zubach the creator says: 'It's COOL AND AWESOME' -- good enough reason to create anything.

Nice use of hierarchical CSS, though. (The icons' simple grid layout makes the architecture reasonably straightforward.) 

Okay, so if a clockface-image isn't CSSey enough for you, here's how to define a dot at the middle of a clock in code:

.i_clock .center_dot {
	position: absolute;
	width: 5px;
	height: 5px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	left: 25px;
	top: 25px;
	background: #eee;
	box-shadow: #000 0 0 0 1px;
	-moz-box-shadow: #000 0 0 0 1px;
	-webkit-box-shadow: #000 0 0 0 1px;
	z-index: 10;
}

which is less interesting than the YouTube app's television screen

.i_youtube .screen {
	position: absolute;
	left: 6px;
	top: 6px;
	width: 42px;
	height: 35px;
	background: linear-gradient(top, #6d7460 30%, #97a482);
	background: -webkit-linear-gradient(top, #6d7460 30%, #97a482);
	background: -moz-linear-gradient(top, #6d7460 30%, #97a482);
	background: -o-linear-gradient(top, #6d7460 30%, #97a482);
	z-index: 3;
	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	border: 1px #464c43 solid;
	box-shadow: inset #89986f 0 -2px 2px;
	-moz-box-shadow: inset #89986f 0 -2px 2px;
	-webkit-box-shadow: inset #89986f 0 -2px 2px;
}

But wow, 3395 lines of CSS. Check out the full page and CSS source, to see a physical object described in pure style sheets.

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Topics:

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}