burger menu

Build an iPhone 4 in CSS without ANY images

31st August 2011 by Warrick Hunter | Innovation

Please note: The below image may not present correctly in Internet Explorer and older web browsers. If this does not like like a realistic iPhone 4, then your browser maybe out of date. Why not upgrade to one of the latest, feature rich, secure and free web browsers like Google Chrome, Mozilla Firefox, Opera.

The image-less iPhone 4 image.

 

The background story about the iPhone idea

I came about this project by accident whilst designing custom navigation page for a website. The idea was to have a series of floating panels that showcased various assignments, however after applying a border radius to each corner, they resembled a series of ghostly iPhone silhouettes. Thinking this would be an even cooler way to navigate a web page, I set upon creating an iPhone purely from CSS and HTML divs. A few hours later I had what you see above. There are no images used in this iPhone picture. Just HTML and CSS.

I’m sure the sceptics have already checked the source code and noticed the in-line CSS. This was the best way to insure the iPhone rendered correctly in a self contained article.

Since an iPhone is just a series of basic rectangular shapes it wasn’t all that difficult once I got my head around it. In case you are interested in having a go yourself…

Here’s the steps I took.

    1. Obtain the design drawings of the object you wish to replicate.

 

    1. Convert the measurement units to pixels, I did this by multiplying the units by five and rounding to the nearest whole number.

 

    1. Examine the object to be coded for basic geometric shapes and create a div for each in HTML. Start from the outer left and work your way to the inner right. Remember that some shapes lie inside others and your markup should reflect this. Keep visualising the markup you have written. Below is the code I used.

 

iPhone HTML code

<div id="case">
<div id="earsection">
<div id="camera"></div>
<div id="speaker"></div>
</div>
<div id="screen"></div>
<div id="button">
<div id="buttonsquare"></div>
</div>
</div>

    1. Create a style sheet for the divs you have created and apply the measurements in the drawings to the widths and heights of the divs. At this stage I created a wire frame first using borders before applying color and effects. Rounded corners and circles were created using the border-radius element.

 

iPhone CSS code

#case {height: 560px; width: 277px; border-radius: 40px 40px; border: 1px solid #000; margin: auto;}
#earsection {margin-top: 36px; margin-left: 72px; height: 16px;}
#camera {float: left; width: 16px; height: 16px; border: 1px solid #000; border-radius: 9px 9px;}
#speaker {float: left; width: 54px; height: 5px; margin-left: 15px; border: 1px solid #000; border-radius: 7px 7px;}
#screen {clear: both; width: 250px; height: 374px; margin: auto; margin-top: 35px; border: 1px solid #000;}
#button {height: 56px; width: 56px; border: 1px solid #000; border-radius: 28px 28px; margin: auto; margin-top: 22px;}
#buttonsquare {height: 17px; width: 17px; border: 1px solid #000; border-radius: 5px; margin: auto; margin-top: 18px; }

    1. If you haven’t been cheating with a WYSIWYG, now is a good time to view the page in a web browser. Hopefully all your coding is correct and you’ve floated any necessary divs.

 

iPhone 4 Wire-frame

 

    1. Now comes the colourful part. I decided to cheat a little here and use an online css gradient generator to get the effect I wanted. This made it a lot easier to mix the colours in a more life like way. Check out Colorzilla for an easy to use gradient tool. Just keep playing with and tweaking the gradients until you get your desired effect.

 

  1. Now for the final touches. Pay careful attention to border widths, type and colour, you can achieve cool lighting effects by subtly changing the colours each border side. Add shadow to help create the three dimensional illusion.

If you’ve done it right you can achieve some pretty cool, near photo realistic creations!


iPhone copyrighted by Apple.

Share this post

Related Content

Internet World 2009: Successfully using Social Networks

Arriving with the badge number I had printed off the day before, I entered the Exhibition with the ease and convenience expected with today’s IT streamlining. My colleague however...

The Yard Take – BrightonSEO

Last Friday, Yard Head of SEO Richard Falconer turned on his out of office replies and headed off to BrightonSEO. We expect you’ve heard of it, it’s one of...

Brands do St Patrick’s Day on Twitter

Today, 17th March, marks the greenest day on the calendar – St Patrick’s Day. Widely celebrated across the globe, brands everywhere seize the opportunity to jump on the trending...