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

How did you get that job? Junior Web Developer at Yard

Unlike most of the people I know who work in the digital sector, I didn’t take what would be considered a conventional path into the job. In fact, my undergraduate...

Yardies back to school as part of national digital skills initiative.

Yard Digital founder Paul Newbury returns to his old school Corpus Christi High School to participate in Nationwide D-Day initiative to bridge digital skills gap as government sets ambitious...

Creative and Digital Business of the Year at the Cardiff Business Awards 2015

Photo Credit: Peter Morgan/Morgan James Photography On the evening of Friday 18th September 2015 the Yard team attended the inaugural Cardiff Business Awards which were held at City Hall...