Over a million developers have joined DZone.

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

Bugsnag monitors application stability, so you can make data-driven decisions on whether you should be building new features, or fixing bugs. Learn more.

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.

Monitor application stability with Bugsnag to decide if your engineering team should be building new features on your roadmap or fixing bugs to stabilize your application.Try it free.


Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}