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

#MyTechStory – Megan Castleton

Between 5.10.15 and 20.11.15, The Tech Partnership are targeting young people making important decisions about their futures with the #MyTechStory campaign, aiming to illustrate the opportunities available to those who choose...

Yard’s Gone to Iceland – Reykjavik Internet Marketing Conference

It’s been over a week since the Reykjavik Internet Marketing Conference 2013 and my first visit to Iceland. Both the conference and my stay as a whole were amazing....

Facebook Couples Pages; Love or Loathe?

If you are in a relationship on Facebook, go and visit facebook.com/us. I’m guessing you either squealed ‘awwww’ or shuddered and quickly closed the page. This ‘couples page’ or...