• Your favorite

    Apple

    ,

    iPhone

    ,

    iPad

    ,

    iOS

    ,
    Jailbreak
    , and
    Cydia
    site.
  • Developer Builds A Virtual iPhone: Pure CSS3, No Images Whatsoever

    Here's something you don't see every day.

    It's one thing when you have an iPhone 4 image and you make it animated on a Web Site with JavaScript, Flash, HTML5 or some other kind of animating code. But it's a whole new ball park when you actually make the iPhone 4 from scratch with no pictures, no templates, no canvases, but pure CSS3 code. That's right folks, take a good look at the screenshot above - there isn't a single image in it. It's pure CSS3 code.

    Technically speaking, the screenshot above is a picture - the real deal can be seen on this Web Site. It's composed of 3,395 lines of CSS code and 335 lines of JavaScript code that can be viewed by seeing the page source through your Web Browser application. The project was built by Vasiliy Zubach, who is better known as TjRus all across the Internet. The best part about being made out of code instead of images is that it can load zippier, and also be scaled more effectively.

    The CSS3 iPhone 4 features 3 fully functional functions; a working 'slide to unlock' bar that you can click and drag to get onto the home screen. It also has a working power button that you can click on to use, and a working home button that you can click on to use. Unfortunately, that's as far as the fun goes, albeit it's still an amazing concept and breaks the ice for CSS3 creations. The developer recommends that you view the content on Mac OS X with either the latest Apple Safari or the Latest Google Chrome Web Browser applications.

    Aside from functions, the CSS3 iPhone 4 also has visual effects. It shows the correct date and time, the correct slide to unlock animations, and the correct SpringBoard animations. So it does hold some truly awesome functionality for being a completely virtual iPhone 4 with absolutely no images. We think that this is a very cool milestone for Web Development.

    What do you think about the CSS3 iPhone 4? Share in the comments.

    Sources: TjRus
    This article was originally published in forum thread: Developer Builds A Virtual iPhone: Pure CSS3, No Images Whatsoever started by Anthony Bouchard View original post
    Comments 18 Comments
    1. feidhlim1986's Avatar
      feidhlim1986 -
      Doesn't CSS need image assets? It can't just create different fonts, textures, images out of pure CSS code...can it?
    1. BenderRodriguez's Avatar
      BenderRodriguez -
      Quote Originally Posted by feidhlim1986 View Post
      Doesn't CSS need image assets? It can't just create different fonts, textures, images out of pure CSS code...can it?
      What do u think an image is to a computer.... A computer just sees a bunch of 0's and 1's and changes them to associate color like 0000, could be white or black, in reality it's ALOT more code to create
    1. baRRy boRRis's Avatar
      baRRy boRRis -
      Not the first one to create CSS3 iPhones

      iOS Icons

      Original iPhone
    1. hybirdd's Avatar
      hybirdd -
      Quote Originally Posted by feidhlim1986 View Post
      Doesn't CSS need image assets? It can't just create different fonts, textures, images out of pure CSS code...can it?
      Not a single image was used. and nope CSS3 can generate gradients.
    1. mofolo's Avatar
      mofolo -
      Wow, taking a look at the css, this thing is incredible.
    1. feidhlim1986's Avatar
      feidhlim1986 -
      Quote Originally Posted by hybirdd View Post
      Not a single image was used. and nope CSS3 can generate gradients.
      Interesting. I did not know CSS was so powerful. I've only dabbled with basic CSS.
    1. iKillYou's Avatar
      iKillYou -
      Quote Originally Posted by baRRy boRRis View Post
      Not the first one to create CSS3 iPhones

      iOS Icons

      Original iPhone
      Are you kidding me? That crap shouldn't even count considering what it looks like compared to the one in the OP.
    1. k.nitsua's Avatar
      k.nitsua -
      CSS3 is very powerful. All you need to do is look at what some of the MMi themers here have been doing with CSS3/HTML5. Some of the widgets and animated lockscreens and wallpapers are clear evidence that flash is going out and HTML5 w/ CSS3 is coming in

      CSS3 is capable of even making 3D canvas so what you see in the OP is just the tip of the CSS3/HTML5/Webkit iceberg
    1. Hillefied's Avatar
      Hillefied -
      Quote Originally Posted by baRRy boRRis View Post
      Not the first one to create CSS3 iPhones

      iOS Icons

      Original iPhone
      You are right, but this is the first functioning iPhone, while limited, that has been created wholly in CSS3. The reason why this is interesting is because XCode used in iOS development uses very similar coding so CSS3 could become a useful testing platform since Apple does have limits on testing.

      Another thing is, this could be another platform for mobile OS devices. 3000+ lines of code for a pretty decent virtual clone is nothing compared to the millions of lines of code used for iOS 5.

      By the way, CSS3 makes a one size fits all screens. I didn't notice until I decided to try it on my iPhone 4S. When I pinched to zoom, everything focused in and still looked incredibly crisp and colorful.
    1. micaiah12's Avatar
      micaiah12 -
      Lol, I did this awhile ago.
    1. Hillefied's Avatar
      Hillefied -
      Quote Originally Posted by micaiah12 View Post
      Lol, I did this awhile ago.
      Show us. Maybe we can see how well yours turned out. Compare.
    1. iLoveWindows&iPhone's Avatar
      iLoveWindows&iPhone -
      Man....I sure wish my iPhone 4 could boot as fast as this virtual one does!! Cool stuff
    1. Dainelli's Avatar
      Dainelli -
      How the hell did he create say the signal bar using CSS? Is it even possible without using images
    1. vantheman169's Avatar
      vantheman169 -
      Very impressive. I downloaded the FREE Mac App on their site (demo version) pretty damn cool. Its called Ensoul

      http://macpaw.com/download/ensoul?ut...m_source=tjrus
    1. baRRy boRRis's Avatar
      baRRy boRRis -
      Quote Originally Posted by iKillYou View Post
      Are you kidding me? That crap shouldn't even count considering what it looks like compared to the one in the OP.
      Woah there! Simmer down. All I was doing was pointing out that others had recreated other iPhone elements in CSS3. I wasn't trying to take anything away from Mr. Zubach or his massive coding prowess.

      Cool beans?
    1. hadzo's Avatar
      hadzo -
      So he created images using css. Very hard work but I am not dumb founded. All images are created using some form of coding.

      I do have to say this is very impressive and from the looks of it a lot of hard work has gone into it! Still I don't get the hipe.
    1. steeda763's Avatar
      steeda763 -
      Using IE8 at work. Looks like an iPhone made for an Atari. Works just as well as one too.
    1. mikejimenez's Avatar
      mikejimenez -
      lame. I managed to make one that uses no CSS and only runs in IE. Oh yeah!

      The Virtual iPhone