01
Jul
NexusCSS-Thumb

The Nexus 4 below was created without using any external images. Okay, the one below is actually just a screenshot of a Nexus 4 designed entirely using CSS and JavaScript, but the real deal is hosted over at CodePen. The smartphone is somewhat interactive - you don't have access to the home screen or the Play Store, but you can play around with the dialer. The tabs can be switched, even though they don't lead to anything for the time being. All of the code is visible for anyone who wants to see how the sauce is made.

CodePen2 CodePen1

The vast majority of the code consists of CSS. Only the tab and integer interactions were written using JavaScript. The diagonal background pattern is technically an image, but it's still CSS since no external images are being loaded. This Nexus 4 was designed by Erhan Basa over the course of two days. His blog is written in Turkish, so even after translating to English using Google Translate, I still can't make out much more than that. Still, I've seen enough to file this away under "cool."

Source: CodePen

Bertel King, Jr.
Born and raised in the rural South, Bertel knows what it's like to live without 4G LTE - or 3G, for that matter. The only things he likes sweeter than his tea are his gadgets, and while few objects burn more than a metal phone on a summer day, he prefers them that way anyway.

  • http://www.androidheadlines.com/ Alexander Maxham

    Awesome

  • Ben Lee

    Cool. Though something for using this code would of been a nice easter egg ;-)

    http://imm.io/1aODn

  • Vincent

    sauce.... :D CSS + JavaScript are the juice I guess..? xD

  • Levi Wilcox

    Those are svg images if I'm not mistaken.

    • http://www.androidpolice.com/ Artem Russakovskii

      There's no SVG there. There's a single inline image (data:image/png;base64), that's it.

      • Levi Wilcox

        Where is the phone icon defined? Maybe I was looking at the wrong css.

        • andQlimax

          html:

          css:
          .phone-infos .battery {width: 8px; height: 10px; background: #4196b7; margin-top: 2px; position: relative; margin-top: 4px;}

          .phone-infos .battery:before {width: 4px; height: 2px; position: absolute; left: 2px; top: -2px; background: #4196b7; content: '';}

          • Levi Wilcox

            That defines where the icon is positioned but that the actual icon itself.

          • andQlimax

            that define the battery icon itself..the width, the height, and the color #4196b7 (blue)...thats it..a blue rectangle

          • Thaddeus Dannar

            The before and after in the css are making the top and bottom circles of the icon and the .icon.phone is making the center portion.

            .icon.phone {
            background: #fff;
            width: 5px;
            height: 26px;
            -webkit-transform: rotate(145deg);
            -moz-transform: rotate(145deg);
            -o-transform: rotate(145deg);
            transform: rotate(145deg);
            border-radius: 0 6px 6px 0;
            margin-top: 5px;
            }

            Pseudo ::before element
            .icon.phone:before {
            position: absolute;
            content: '';
            width: 8px;
            height: 9px;
            background: #fff;
            left: -6px;
            bottom: -1px;
            border-radius: 3px 6px 7px 3px;
            }
            Pseudo ::after element
            .icon.phone:after {
            position: absolute;
            content: '';
            width: 8px;
            height: 9px;
            background: #fff;
            left: -6px;
            top: -1px;
            border-radius: 3px 6px 7px 3px;
            }

          • http://www.modminecraft.com/ Nick Coad

            I think you need to stop commenting on something you don't know anything about.

        • http://kennydude.me/ Joe Simpson

          Webfonts

          • Levi Wilcox

            Ah that makes much more sense. thanks for filling in the blank

  • Guest

    Actually... the CSS contains one inline data: uri image :)

    • http://www.androidpolice.com/ Artem Russakovskii

      Indeed, but it's not external, so no extra requests.

  • icyrock1

    That's pretty amazing. Now maybe he can work on the white version? I kid, I kid. ;)

  • Christopher Robert

    Someone explain to me why this is cool. I have seen now two separate images made completely from code (the other was a map of the NYC subway). What is the significance and why would you spend your time doing it?

    • TheShoob

      For one its an awesome testament for how far web codeing has come. Secondly, a browser should be able to render that much faster than it could load a high res image.

    • http://www.modminecraft.com/ Nick Coad

      Because it's incredibly difficult to do and requires a lot of coding skill to accomplish? That skill is also directly transferable into web design/development so I hope that makes it useful enough for you to be satisfied.

      • Christopher Robert

        I am being serious not trying to be satisfied or sarcastic I really wanted to know what the significance of something like this would be.

  • JonJJon

    Mmmmm yummy sauce

  • Bleakvision

    I expect "look what I found - preeetty" pieces from the likes of Gizmodo and the Verge and not from AP.
    I love AP, you're the best source for Android information by a wide margin, please keep it that way.

    • http://www.androidpolice.com/ Artem Russakovskii

      Sometimes we share what we find fun, and this was something I was fascinated by.

      • Bleakvision

        Yeah, I feel like such an asshole now:)

  • Mo3tasm

    well, cool.. but you know FireFox OS os almost "basically" the same thing...

    • Sasquatch4ever

      You're missing why this is cool. He only used a single image for the whole thing, the rest is rendered using just CDD/Javascript. FireFox OS uses just as many images as any other OS.

  • David Crawford

    was almost impressed until I saw the embeded images eg: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAKElEQVQIW2NkQAOO07anMSKLgQT2Z3nOggvCBECKwILIAmBBdAGQIABJuxH63EphJgAAAABJRU5ErkJggg==

    • http://www.modminecraft.com/ Nick Coad

      There's only one embedded image.

  • ash71ish

    really cool

  • erhanbasa

    Thanks for the article and comments, i'm happy to see you like it. I need to explain that there is no image,svg or webfonts in this work except base64 image for background pattern.

  • ashraf