Over a million developers have joined DZone.

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

· Web Dev Zone

Make the transition to Node.js if you are a Java, PHP, Rails or .NET developer with these resources to help jumpstart your Node.js knowledge plus pick up some development tips.  Brought to you in partnership with IBM.

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.

Learn why developers are gravitating towards Node and its ability to retain and leverage the skills of JavaScript developers and the ability to deliver projects faster than other languages can.  Brought to you in partnership with IBM.

Topics:

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

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

{{ parent.tldr }}

{{ parent.urlSource.name }}