HTML & CSS iPhone

An iPhone made with pure HTML and CSS

19 January 2014

When designing this site, I realized that I would need a method to feature web design work in the portfolio section. I wanted to write articles for those projects as well, but there was no effective way to feature the design. Static images wouldn't show the interactive elements of a site, and seemed odd for featuring web design work on a website. What matters most with a website is how it works, and I wanted to be able to feature that while discussing the project.

Something old, something new

Nearly a year ago I spent an evening experimenting with code, and created a pure (albeit flat) HTML and CSS iPhone/iPad mockup. I built it with nested divs, styled to resemble each section of the iPhone, and created a CSS class that, when applied, reshaped the design into an iPad. jQuery and CSS3 animations were used to switch between the two styles when the home button was clicked.

I realized that I could use this mockup in the web design posts to feature the project. By placing an iframe element in the screen, I can display the actual site in the article. I cleaned up the old code to fit in better with this site, and did a bit of restyling to add detail and update the mockup to the current iPhone. The shadow was added by stacking two box-shadows below the design. The iPhone at the top of this article is the full HTML and CSS version, not a static image (yes, you can navigate to this page in the mockup and layer iPhones inside of iPhones; yes, doing so will probably crash your browser).

Featured below is the original design from March of 2013. Click the home button to switch to the iPad version.

Note: The design below has been scaled down for smaller screens to compensate for the size of the transition.

Feel free to use the code in any way you see fit, as long you don’t claim to have made it yourself. Attribution is greatly appreciated, but not required. A comment in code is a great way to give me credit.

View this on Dribbble | View the source code on CodePen

 Web Design, Code