DZone
Web Dev Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Web Dev Zone > 3395 Lines of CSS + 335 Lines of JavaScript = iOS (Not Really)

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

John Esposito user avatar by
John Esposito
·
Jan. 10, 12 · Web Dev Zone · Interview
Like (0)
Save
Tweet
3.72K Views

Join the DZone community and get the full member experience.

Join For Free

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.

CSS JavaScript

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Chopping the Monolith: The Demo
  • No Code Expectations vs Reality
  • Is DataOps the Future of the Modern Data Stack?
  • Flask vs. Django: Which Python Framework to Choose?

Comments

Web Dev Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo