28+ CSS iPhone Design - csshint

Collection of free Html CSS iPhone Design code examples.

1.iPhone 5 CSS Template

See the Pen <a href='https://codepen.io/charlie-volpe/pen/xvcnE/'>iPhone 5 CSS Template</a> by Charlie Volpe (<a href='https://codepen.io/charlie-volpe'>@charlie-volpe</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

dylnhdsn

Made with

HTML / CSS

demo and code Get Hosting

2.CSS3 iPhone

See the Pen <a href='https://codepen.io/dylnhdsn/pen/pheJs/'>CSS3 iPhone</a> by dylnhdsn (<a href='https://codepen.io/dylnhdsn'>@dylnhdsn</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Charlie Volpe

Made with

HTML(Haml) / CSS(Sass)

demo and code Get Hosting

3.Interactive CSS3 iPhone 6

See the Pen <a href='https://codepen.io/MorenoDiDomenico/pen/jEyKxK/'>Interactive CSS3 iPhone 6</a> by Moreno Di Domenico (<a href='https://codepen.io/MorenoDiDomenico'>@MorenoDiDomenico</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Moreno Di Domenico

Made with

HTML(Pug) / CSS(Less) / JS(CoffeeScript)

demo and code Get Hosting

4.iPhone 6

See the Pen <a href='https://codepen.io/BenjaminVilina/pen/XJLVNX/'>iPhone 6</a> by Benjamin Vilina (<a href='https://codepen.io/BenjaminVilina'>@BenjaminVilina</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Benjamin Vilina

Made with

HTML / CSS(SCSS) / JS

demo and code Get Hosting

5.iPhone X to Macbook Pro

See the Pen <a href='https://codepen.io/eliortabeka/pen/eGNVxe/'>iPhone X to Macbook Pro</a> by Elior Tabeka (<a href='https://codepen.io/eliortabeka'>@eliortabeka</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Elior Tabeka

Made with

HTML / CSS(SCSS) / JS

demo and code Get Hosting

6.CSS Only iPhone 6

Author

Fabrizio Bianchi

Made with

HTML / CSS

demo and code Get Hosting

7.iPhone 6s

See the Pen <a href='https://codepen.io/ZyrianovViacheslav/pen/Lkoaqp/'>iPhone 6s</a> by Slava (<a href='https://codepen.io/ZyrianovViacheslav'>@ZyrianovViacheslav</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Slava

Made with

HTML(Pug) / CSS(SCSS)

demo and code Get Hosting

8.Single Element CSS3 iPhone 5

See the Pen <a href='https://codepen.io/mattboldt/pen/jbvfG/'>Single Element CSS3 iPhone 5</a> by Matt Boldt (<a href='https://codepen.io/mattboldt'>@mattboldt</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Matt Boldt

Made with

HTML / CSS

demo and code Get Hosting

9.iPhone 6 mockup | CSS only

See the Pen <a href='https://codepen.io/havardob/pen/KzoOMB/'>iPhone 6 mockup | CSS only</a> by Håvard Brynjulfsen (<a href='https://codepen.io/havardob'>@havardob</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Håvard Brynjulfsen

Made with

HTML / CSS(SCSS)

demo and code Get Hosting

10.iPhone 6

See the Pen <a href='https://codepen.io/khadkamhn/pen/VYWJKw/'>iPhone 6</a> by Mohan Khadka (<a href='https://codepen.io/khadkamhn'>@khadkamhn</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Mohan Khadka

Made with

HTML / CSS / JS

demo and code Get Hosting

11.SVG iPhone animation with CSS fill

See the Pen <a href='https://codepen.io/zachacole/pen/gpPogy/'>SVG iPhone animation with CSS fill</a> by Zach Cole (<a href='https://codepen.io/zachacole'>@zachacole</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Zach Cole

Made with

HTML / CSS

demo and code Get Hosting

12.Pure CSS Proportional iPhone XS & iPad Pro

See the Pen <a href='https://codepen.io/round/pen/VVVYgR/'>Pure CSS Proportional iPhone XS & iPad Pro</a> by Maxim Leyzerovich (<a href='https://codepen.io/round'>@round</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Maxim Leyzerovich

Made with

HTML / CSS(SCSS)

demo and code Get Hosting

13.#PureCSS – iPhone X

See the Pen <a href='https://codepen.io/AsyrafHussin/pen/mBaBXm/'>#PureCSS – iPhone X</a> by Asyraf Hussin (<a href='https://codepen.io/AsyrafHussin'>@AsyrafHussin</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Asyraf Hussin

Made with

HTML / CSS(SCSS)

demo and code Get Hosting

14.iPhone X

See the Pen <a href='https://codepen.io/ozgurg/pen/OxNmxw/'>iPhone X</a> by Özgür (<a href='https://codepen.io/ozgurg'>@ozgurg</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Özgür

Made with

HTML / CSS

demo and code Get Hosting

15.iPhone – CSS

See the Pen <a href='https://codepen.io/stobertg/pen/reQGRo/'>iPhone – CSS</a> by Tyler Stober (<a href='https://codepen.io/stobertg'>@stobertg</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Tyler Stober

Made with

HTML / CSS(SCSS)

demo and code Get Hosting

16.iPhone X

See the Pen <a href='https://codepen.io/ryanzola/pen/wqOJdm/'>iPhone X</a> by Ryan Zola (<a href='https://codepen.io/ryanzola'>@ryanzola</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Ryan Zola

Made with

HTML(Pug) / CSS(SASS) / JS(Babel)

demo and code Get Hosting

17.Animated flat iPhone/iPad

See the Pen <a href='https://codepen.io/lucasmotta/pen/ivhbt/'>Animated flat iPhone/iPad</a> by Lucas Motta (<a href='https://codepen.io/lucasmotta'>@lucasmotta</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Lucas Motta

Made with

HTML / CSS(SCSS) / JS

demo and code Get Hosting

18.iOS Like iMessage Responsive HTML5

See the Pen <a href='https://codepen.io/adobewordpress/pen/wGGMaV/'>iOS Like iMessage Responsive HTML5</a> by adobewordpress (<a href='https://codepen.io/adobewordpress'>@adobewordpress</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

adobewordpress

Made with

HTML / CSS / JS

demo and code Get Hosting

19. iPhone 8 + Wireless Charging

See the Pen <a href='https://codepen.io/AsyrafHussin/pen/BwgBLe/'>#PureCSS – iPhone 8 + Wireless Charging</a> by Asyraf Hussin (<a href='https://codepen.io/AsyrafHussin'>@AsyrafHussin</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Asyraf Hussin

Made with

HTML / CSS(SCSS)

demo and code Get Hosting

20. Touch device jelly menu concept

See the Pen <a href='https://codepen.io/sol0mka/pen/Jsyxq/'>Touch device jelly menu concept</a> by LegoMushroom (<a href='https://codepen.io/sol0mka'>@sol0mka</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

LegoMushroom

Made with

HTML / CSS / JS

demo and code Get Hosting

21. Pull to refresh – iPhone X

See the Pen <a href='https://codepen.io/kiyutink/pen/vpravo/'>Pull to refresh – iPhone X</a> by Kirill Kiyutin (<a href='https://codepen.io/kiyutink'>@kiyutink</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Kirill Kiyutin

Made with

HTML / CSS(SCSS) / JS

demo and code Get Hosting

22. iPhone 6 CSS

See the Pen <a href='https://codepen.io/DaBhai13/pen/ByQMMx/'>iPhone 6 CSS</a> by Zakariya Baig (<a href='https://codepen.io/DaBhai13'>@DaBhai13</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Zakariya Baig

Made with

HTML / CSS

demo and code Get Hosting

23. CSS Pure Flat iPhone 5S

See the Pen <a href='https://codepen.io/alikhalilifar/pen/Jrlbc/'>CSS Pure Flat iPhone 5S</a> by Ali Khalilifar (<a href='https://codepen.io/alikhalilifar'>@alikhalilifar</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Ali Khalilifar

Made with

HTML / CSS(SCSS)

demo and code Get Hosting

24. Flat CSS iPhone/iPad

See the Pen <a href='https://codepen.io/adamclaxon/pen/FhLkw/'>Flat CSS iPhone/iPad</a> by Adam Claxon (<a href='https://codepen.io/adamclaxon'>@adamclaxon</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Adam Claxon

Made with

HTML / CSS / JS

demo and code Get Hosting

25. Iphone X saying Hello Dribbble CSS Only

See the Pen <a href='https://codepen.io/hosseinshabani/pen/RvrWRp/'>Iphone X saying Hello Dribbble CSS Only</a> by Hossein Shabani (<a href='https://codepen.io/hosseinshabani'>@hosseinshabani</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Hossein Shabani

Made with

HTML / CSS

demo and code Get Hosting

26. Flat, Scaleable CSS iPhone Illustration

See the Pen <a href='https://codepen.io/TomHergenreter/pen/qDywF/'>Flat, Scaleable CSS iPhone Illustration</a> by Tom Hergenreter (<a href='https://codepen.io/TomHergenreter'>@TomHergenreter</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Tom Hergenreter

Made with

HTML / CSS(SCSS)

demo and code Get Hosting

27. iPhone 5 – iOS 7 Animate SVG

See the Pen <a href='https://codepen.io/jorgeatgu/pen/pvzlj/'>iPhone 5 – iOS 7 Animate SVG</a> by Jorge Aznar (<a href='https://codepen.io/jorgeatgu'>@jorgeatgu</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Jorge Aznar

Made with

HTML / CSS

demo and code Get Hosting

28. Iphone Placeholder

See the Pen <a href='https://codepen.io/ConnorGaunt/pen/Gpdyqy/'>Iphone Placeholder</a> by Connor Gaunt (<a href='https://codepen.io/ConnorGaunt'>@ConnorGaunt</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Connor Gaunt

Made with

HTML / CSS(SASS)

demo and code Get Hosting