3395 Lines of CSS + 335 Lines of JavaScript = iOS (Not Really)
Join the DZone community and get the full member experience.
Join For FreeUnlike 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.
Opinions expressed by DZone contributors are their own.
Comments