+ Reply
Results 1 to 19 of 19

Your favorite Apple, iPhone, iPad, iOS, Jailbreak, and Cydia site.


Thread: Developer Builds A Virtual iPhone: Pure CSS3, No Images Whatsoever

is a discussion within the

iPhone News

forums, a part of the

General iPhone

section;
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
...
  1. #1
    MMi Staff Writer Anthony Bouchard's Avatar
    Join Date
    Sep 2011
    Location
    Florida
    Posts
    6,866
    Thanks
    200
    Thanked 991 Times in 731 Posts

    Default 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: TjRuss
    Last edited by Anthony Bouchard; 01-03-2012 at 04:13 PM.

  2. #2
    Livin the iPhone Life
    Join Date
    Sep 2007
    Location
    Ireland
    Posts
    1,436
    Thanks
    41
    Thanked 185 Times in 145 Posts

    Doesn't CSS need image assets? It can't just create different fonts, textures, images out of pure CSS code...can it?

  3. #3
    Livin the iPhone Life BenderRodriguez's Avatar
    Join Date
    Apr 2008
    Location
    The Future
    Posts
    2,139
    Thanks
    108
    Thanked 239 Times in 197 Posts

    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

  4. #4
    iPhone? More like MyPhone
    Join Date
    Sep 2008
    Posts
    184
    Thanks
    1
    Thanked 11 Times in 7 Posts

    Not the first one to create CSS3 iPhones

    iOS Icons

    Original iPhone

  5. #5
    Green Apple
    Join Date
    Dec 2007
    Location
    Mechelen, Belgium, Belgium
    Posts
    55
    Thanks
    5
    Thanked 7 Times in 5 Posts

    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.

  6. #6
    My iPhone is a Part of Me mofolo's Avatar
    Join Date
    Sep 2007
    Posts
    561
    Thanks
    19
    Thanked 35 Times in 28 Posts

    Wow, taking a look at the css, this thing is incredible.

  7. #7
    Livin the iPhone Life
    Join Date
    Sep 2007
    Location
    Ireland
    Posts
    1,436
    Thanks
    41
    Thanked 185 Times in 145 Posts

    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.

  8. #8
    Banned
    Join Date
    Mar 2011
    Posts
    83
    Thanks
    18
    Thanked 10 Times in 5 Posts

    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.

  9. #9
    "The Chuck Bass of Theming" k.nitsua's Avatar
    Join Date
    Mar 2009
    Location
    Merced, CA
    Posts
    4,422
    Thanks
    1,761
    Thanked 19,214 Times in 2,596 Posts

    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

  10. #10
    iPhone? More like MyPhone Hillefied's Avatar
    Join Date
    Sep 2011
    Posts
    166
    Thanks
    0
    Thanked 3 Times in 3 Posts

    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.
    Last edited by Hillefied; 01-03-2012 at 04:38 PM.

  11. #11
    Green Apple
    Join Date
    Oct 2010
    Posts
    84
    Thanks
    5
    Thanked 9 Times in 8 Posts

    Lol, I did this awhile ago.

  12. #12
    iPhone? More like MyPhone Hillefied's Avatar
    Join Date
    Sep 2011
    Posts
    166
    Thanks
    0
    Thanked 3 Times in 3 Posts

    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.

  13. #13
    My iPhone is a Part of Me iLoveWindows&iPhone's Avatar
    Join Date
    May 2010
    Location
    San Diego, CA
    Posts
    591
    Thanks
    9
    Thanked 49 Times in 34 Posts

    Man....I sure wish my iPhone 4 could boot as fast as this virtual one does!! Cool stuff
    El Zurdo

  14. #14
    Green Apple
    Join Date
    Oct 2011
    Posts
    35
    Thanks
    1
    Thanked 2 Times in 1 Post
    How the hell did he create say the signal bar using CSS? Is it even possible without using images

  15. #15
    My iPhone is a Part of Me vantheman169's Avatar
    Join Date
    Jul 2009
    Location
    Outter Space
    Posts
    888
    Thanks
    87
    Thanked 114 Times in 75 Posts

    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

  16. #16
    iPhone? More like MyPhone
    Join Date
    Sep 2008
    Posts
    184
    Thanks
    1
    Thanked 11 Times in 7 Posts

    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?

  17. #17
    iPhone? More like MyPhone
    Join Date
    Jan 2008
    Location
    New Jersey, USA
    Posts
    272
    Thanks
    3
    Thanked 25 Times in 21 Posts

    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.

  18. #18
    Green Apple
    Join Date
    Sep 2007
    Location
    West Palm Beach, FL
    Posts
    77
    Thanks
    1
    Thanked 4 Times in 4 Posts

    Using IE8 at work. Looks like an iPhone made for an Atari. Works just as well as one too.

  19. #19
    What's Jailbreak?
    Join Date
    Oct 2007
    Posts
    6
    Thanks
    3
    Thanked 1 Time in 1 Post
    lame. I managed to make one that uses no CSS and only runs in IE. Oh yeah!

    The Virtual iPhone

Posting Permissions
  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts