IPhone Ui

Developer
Daniel Gooß
Size
8,602 Kb
Views
14,168
  1. IPhone Ui Previews
  2. IPhone Ui HTML Codes
  3. IPhone Ui CSS Codes

How do I make an iphone ui?

I built this pen after a great dribbble shot by Ionut Zamfir and integrated it in my little iOS7 mockup frame.. What is a iphone ui? How do you make a iphone ui? This script and codes were developed by Daniel Gooß on 10 November 2022, Thursday.

IPhone Ui Previews
IQ Test

IPhone Ui - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>iPhone Ui</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(https://fonts.googleapis.com/css?family=Raleway:200,300);
a.link { display: block; margin: 30px; text-align: center; text-decoration: none; font-family: 'Raleway', sans-serif; font-weight: 300; font-size: 30px; color: #000;
}
/* ======= iPhone mokup styles ======= */
.iphone { width: 736px; height: 1574px; margin: 0 auto; border: 2px solid #999; border-radius: 90px; transform-origin: 50% 0;
}
.iphone:after { content: ''; display: block; width: 140px; height: 140px; margin: 50px auto 0 auto; border: 2px solid #999; border-radius: 50%;
}
.iphone .screen { position: relative; width: 640px; height: 1136px; margin: 205px 46px 0; outline: 2px solid #999;
}
.iphone .screen .body { z-index: 0; position: relative; height: 100%; box-sizing: border-box;
}
.providerbarwrap { z-index: 1; position: absolute; width: 640px; height: 42px; font: 23px 'Helvetica Neue', sans-serif normal; -webkit-font-smoothing: antialiased; color: #fff;
}
.providerbarwrap .providerbar { position: relative;
}
.providerbarwrap .providerbar .provider { position: relative; display: inline-block; padding: 6px 10px 8px 90px;
}
.providerbarwrap .providerbar .provider:before { content: ''; position: absolute; width: 11px; height: 11px; top: 15px; left: 13px; box-shadow: 14px 0 0 #fff, 28px 0 0 #fff, 42px 0 0 #fff, 56px 0 0 #fff; border-radius: 50%; background-color: #fff;
}
.providerbarwrap .providerbar .wifiwrap { position: relative; display: inline-block; overflow: hidden; width: 24px; height: 17px; vertical-align: top; margin-top: 12px;
}
.providerbarwrap .providerbar .wifiwrap .wifi { position: absolute; overflow: hidden; width: 100%; height: 100%; width: 35px; height: 35px; left: -5px; box-shadow: inset 0 0 0 3px #fff; clip: rect(0, 17px, 17px, 0); transform: rotateZ(45deg); border-radius: 50%;
}
.providerbarwrap .providerbar .wifiwrap .wifi:before { content: ''; position: absolute; width: 3px; height: 3px; top: 6px; left: 6px; border: double #fff; border-width: 9px; box-shadow: inset 0 0 0 5px #fff; border-radius: 50%; background-color: #transparent;
}
.providerbarwrap .providerbar .time { position: absolute; width: 60px; line-height: 42px; top: 0; left: 0; margin: 0 290px; font-weight: bold;
}
.providerbarwrap .providerbar .batterywrap { position: absolute; top: 6px; right: 14px;
}
.providerbarwrap .providerbar .batterywrap .battery { position: relative; display: inline-block; width: 45px; height: 19px; box-sizing: border-box; padding: 1px; margin-left: 6px; border: 1px solid #fff; border-radius: 3px;
}
.providerbarwrap .providerbar .batterywrap .battery:before { display: block; content: ''; width: 95%; height: 100%; box-sizing: border-box; border-radius: 1px 0 0 1px; background-color: #fff;
}
.providerbarwrap .providerbar .batterywrap .battery:after { content: ''; position: absolute; width: 3px; height: 7px; top: 5px; right: -5px; border-radius: 0 2px 2px 0; background-color: #fff;
}
/* ======= Content styles ======= */
.body { padding-top: 133px; font-family: 'Raleway', sans-serif; font-weight: 300; background: #35373F;
}
.content { overflow: scroll; -webkit-overflow-scrolling: touch; height: 100%; box-sizing: border-box; padding-top: 16px;
}
header,
section { margin-bottom: 16px;
}
h1 { margin: 0; font-size: 38px; font-weight: 200; text-align: center;
}
header { position: absolute; top: 0; left: 0; padding-top: 42px; background: linear-gradient(0deg, #f14959 0%, #f16149 100%); color: #fff; z-index: 3; font-size: 0; line-height: 0; line-height: 88px;
}
header h1 { display: inline-block; width: 460px; vertical-align: middle;
}
header .menubutton { display: inline-block; width: 30px; height: 40px; margin: 0 35px 0 25px; vertical-align: middle;
}
header .menubutton .menuicon { display: block; height: 2px; width: 100%; margin-top: 4px; box-shadow: 0 15px 0 #fff, 0 30px 0 #fff; background-color: #fff;
}
header .dropdown { display: inline-block; width: 40px; height: 40px; box-sizing: border-box; padding: 9px 0; margin: 0 25px; vertical-align: middle;
}
header .dropdown .dropdownicon { display: block; position: relative; height: 22px; transition: -webkit-transform 0.25s ease-in-out;
}
header .dropdown .dropdownicon:before,
header .dropdown .dropdownicon:after { content: ''; position: absolute; width: 29px; height: 2px; border-radius: 2px; background-color: #fff;
}
header .dropdown .dropdownicon:before { top: 0; left: 0; transform-origin: 0% 50%; transform: rotateZ(45deg);
}
header .dropdown .dropdownicon:after { top: 0; right: 0; transform-origin: 100% 50%; transform: rotateZ(-45deg);
}
header .dropdown.active .dropdownicon { transform: rotateZ(180deg);
}
section { width: 100%; height: 162px; box-sizing: border-box; padding: 16px 0 16px 16px; border-radius: 5px; background-color: #eff1f8; font-size: 0; line-height: 0;
}
section > ul { display: inline-block; list-style-type: none; width: 477px; padding: 0; margin: 0; vertical-align: top;
}
section > ul li { display: inline-block; overflow: hidden;
}
section > ul li:first-child { border-right: 1px solid #c8cbd4;
}
section > ul li:first-child,
section > ul li:nth-child(2) { height: 71px; border-bottom: 2px solid #c8cbd4; vertical-align: top;
}
section > ul li:nth-child(3),
section > ul li:nth-child(4) { width: 50%; height: 58px; color: #3f454c; vertical-align: bottom;
}
section > ul li:nth-child(4) { text-align: right;
}
section > ul li h2 { width: 393px; margin: 19px 0; font-weight: 300; color: #272930; font-size: 22px; line-height: 1; font-size: 38px;
}
section > ul li p { margin: 18px 16px 18px 8px; display: inline-block; vertical-align: middle; font-size: 22px; line-height: 1;
}
section > ul li span { font-size: 22px; line-height: 1;
}
section img { display: inline-block; width: 130px; height: 130px; margin-right: 16px; border-radius: 5px; background-color: #666; vertical-align: top;
}
.hearticon { position: relative; display: inline-block; width: 18px; height: 18px; box-sizing: border-box; margin: 32px; border: 2px solid #666b72; border-top-width: 0; border-right-width: 0; transform: rotateZ(-45deg);
}
.hearticon:before,
.hearticon:after { content: ''; position: absolute; box-sizing: border-box; border: 2px solid #666b72; border-radius: 2em;
}
.hearticon:before { width: 18px; height: 21.6px; top: -10.8px; left: -2px; clip: rect(0, 18px, 12.8px, 0);
}
.hearticon:after { width: 21.6px; height: 18px; bottom: -2px; right: -10.8px; clip: rect(0, 21.6px, 18px, 8.8px);
}
.hearticon.liked { border: none; background-color: #f15252;
}
.hearticon.liked:before,
.hearticon.liked:after { border: none; background-color: #f15252;
}
.hearticon.liked:before { left: 0;
}
.hearticon.liked:after { bottom: 0;
}
.dateicon { position: relative; display: inline-block; width: 26px; height: 26px; box-sizing: border-box; border: 2px solid #666b72; border-radius: 50%; vertical-align: middle;
}
.dateicon:before,
.dateicon:after { content: ''; position: absolute; height: 2px; top: 11px; left: 10px; background-color: #666b72;
}
.dateicon:before { width: 8px;
}
.dateicon:after { width: 10px; transform-origin: 1px 50%; transform: rotateZ(-90deg);
}
.reviewsicon { position: relative; display: inline-block; width: 26px; height: 23px; box-sizing: border-box; margin: 2px 3px; border: 2px solid #666b72; border-radius: 3px; border-bottom-width: 0; vertical-align: middle;
}
.reviewsicon:before,
.reviewsicon:after { content: ''; position: absolute;
}
.reviewsicon:before { width: 3px; height: 2px; bottom: 0; left: 0; background-color: #666b72; box-shadow: 3px 0 0 #666b72, 6px 0 0 #666b72, 8px 0 0 #666b72, 19px 0 0 #666b72, 4px -14px 0 #666b72, 6px -14px 0 #666b72, 9px -14px 0 #666b72, 12px -14px 0 #666b72, 15px -14px 0 #666b72, 15px -9px 0 #666b72, 12px -9px 0 #666b72, 9px -9px 0 #666b72, 8px -9px 0 #666b72;
}
.reviewsicon:after { height: 4px; width: 4px; bottom: -2px; left: 11px; border: 2px solid #666b72; border-top-color: transparent; border-left-color: transparent; transform: rotateZ(45deg);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <a href="http://dribbble.com/shots/1271575-Iphone-Ui-updated" class="link">"iPhone Ui" Build after a dribbble shot by Ionut Zamfir</a>
<div class="iphone"> <div class="screen"> <div class="providerbarwrap"> <div class="providerbar"> <div class="provider"> Telekom.de </div> <div class="wifiwrap"> <div class="wifi"> </div> </div> <div class="time"> 08:15 </div> <div class="batterywrap"> <span>95 %</span> <div class="battery"> </div> </div> </div> </div> <div class="body"> <!-- Custom markup here --> <header> <div class="menubutton"> <span class="menuicon"></span> </div> <h1>Screen Title</h1> <div class="dropdown"> <span class="dropdownicon"></span> </div> </header> <div class="content"> <section> <img src="https://www.freeimages.co.uk/galleries/nature/environment/thumbs/clean_beach6085.jpg" alt=""/> <ul> <li><h2>Palm Beach</h2></li> <li> <span class="hearticon"></span> </li> <li> <span class="dateicon"></span> <p>Today</p> </li> <li> <span class="reviewsicon"></span> <p>3 reviews</p> </li> </ul> </section> <section> <img src="http://processing.org/tutorials/pixels/imgs/tint1.jpg" alt=""/> <ul> <li><h2>Sunny Flower</h2></li> <li> <span class="hearticon liked"></span> </li> <li> <span class="dateicon"></span> <p>Today</p> </li> <li> <span class="reviewsicon"></span> <p>6 reviews</p> </li> </ul> </section> <section> <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRe_BwdsxYNlzUsSjF2x0C5qAvrnVxKcMu-CWSgzBiKjqog_oPY" alt=""/> <ul> <li><h2>Ford Mustang</h2></li> <li> <span class="hearticon liked"></span> </li> <li> <span class="dateicon"></span> <p>Today</p> </li> <li> <span class="reviewsicon"></span> <p>12 reviews</p> </li> </ul> </section> <section> <img src="http://static.dtuts.com/3d/articles/winter-renderings/header.jpg" alt=""/> <ul> <li><h2>X-Mas Tree</h2></li> <li> <span class="hearticon"></span> </li> <li> <span class="dateicon"></span> <p>Yesterday</p> </li> <li> <span class="reviewsicon"></span> <p>46 reviews</p> </li> </ul> </section> <section> <img src="http://static.dtuts.com/3d/tuts/3dsmax/ambient-occlusion/header.jpg" alt=""/> <ul> <li><h2>Interior</h2></li> <li> <span class="hearticon"></span> </li> <li> <span class="dateicon"></span> <p>Yesterday</p> </li> <li> <span class="reviewsicon"></span> <p>36 reviews</p> </li> </ul> </section> <section> <img src="http://static.dtuts.com/3d/tuts/3dsmax/victorian-street/header.jpg" alt=""/> <ul> <li><h2>In the old days</h2></li> <li> <span class="hearticon liked"></span> </li> <li> <span class="dateicon"></span> <p>Yesterday</p> </li> <li> <span class="reviewsicon"></span> <p>22 reviews</p> </li> </ul> </section> <section> <img src="http://static.dtuts.com/3d/tuts/3dsmax/daytime-rendering/header.jpg" alt=""/> <ul> <li><h2>Skyline</h2></li> <li> <span class="hearticon"></span> </li> <li> <span class="dateicon"></span> <p>2 days ago</p> </li> <li> <span class="reviewsicon"></span> <p>53 reviews</p> </li> </ul> </section> </div> </div> </div>
</div>
</body>
</html>

IPhone Ui - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Raleway:200,300);
a.link { display: block; margin: 30px; text-align: center; text-decoration: none; font-family: 'Raleway', sans-serif; font-weight: 300; font-size: 30px; color: #000;
}
/* ======= iPhone mokup styles ======= */
.iphone { width: 736px; height: 1574px; margin: 0 auto; border: 2px solid #999; border-radius: 90px; transform-origin: 50% 0;
}
.iphone:after { content: ''; display: block; width: 140px; height: 140px; margin: 50px auto 0 auto; border: 2px solid #999; border-radius: 50%;
}
.iphone .screen { position: relative; width: 640px; height: 1136px; margin: 205px 46px 0; outline: 2px solid #999;
}
.iphone .screen .body { z-index: 0; position: relative; height: 100%; box-sizing: border-box;
}
.providerbarwrap { z-index: 1; position: absolute; width: 640px; height: 42px; font: 23px 'Helvetica Neue', sans-serif normal; -webkit-font-smoothing: antialiased; color: #fff;
}
.providerbarwrap .providerbar { position: relative;
}
.providerbarwrap .providerbar .provider { position: relative; display: inline-block; padding: 6px 10px 8px 90px;
}
.providerbarwrap .providerbar .provider:before { content: ''; position: absolute; width: 11px; height: 11px; top: 15px; left: 13px; box-shadow: 14px 0 0 #fff, 28px 0 0 #fff, 42px 0 0 #fff, 56px 0 0 #fff; border-radius: 50%; background-color: #fff;
}
.providerbarwrap .providerbar .wifiwrap { position: relative; display: inline-block; overflow: hidden; width: 24px; height: 17px; vertical-align: top; margin-top: 12px;
}
.providerbarwrap .providerbar .wifiwrap .wifi { position: absolute; overflow: hidden; width: 100%; height: 100%; width: 35px; height: 35px; left: -5px; box-shadow: inset 0 0 0 3px #fff; clip: rect(0, 17px, 17px, 0); transform: rotateZ(45deg); border-radius: 50%;
}
.providerbarwrap .providerbar .wifiwrap .wifi:before { content: ''; position: absolute; width: 3px; height: 3px; top: 6px; left: 6px; border: double #fff; border-width: 9px; box-shadow: inset 0 0 0 5px #fff; border-radius: 50%; background-color: #transparent;
}
.providerbarwrap .providerbar .time { position: absolute; width: 60px; line-height: 42px; top: 0; left: 0; margin: 0 290px; font-weight: bold;
}
.providerbarwrap .providerbar .batterywrap { position: absolute; top: 6px; right: 14px;
}
.providerbarwrap .providerbar .batterywrap .battery { position: relative; display: inline-block; width: 45px; height: 19px; box-sizing: border-box; padding: 1px; margin-left: 6px; border: 1px solid #fff; border-radius: 3px;
}
.providerbarwrap .providerbar .batterywrap .battery:before { display: block; content: ''; width: 95%; height: 100%; box-sizing: border-box; border-radius: 1px 0 0 1px; background-color: #fff;
}
.providerbarwrap .providerbar .batterywrap .battery:after { content: ''; position: absolute; width: 3px; height: 7px; top: 5px; right: -5px; border-radius: 0 2px 2px 0; background-color: #fff;
}
/* ======= Content styles ======= */
.body { padding-top: 133px; font-family: 'Raleway', sans-serif; font-weight: 300; background: #35373F;
}
.content { overflow: scroll; -webkit-overflow-scrolling: touch; height: 100%; box-sizing: border-box; padding-top: 16px;
}
header,
section { margin-bottom: 16px;
}
h1 { margin: 0; font-size: 38px; font-weight: 200; text-align: center;
}
header { position: absolute; top: 0; left: 0; padding-top: 42px; background: linear-gradient(0deg, #f14959 0%, #f16149 100%); color: #fff; z-index: 3; font-size: 0; line-height: 0; line-height: 88px;
}
header h1 { display: inline-block; width: 460px; vertical-align: middle;
}
header .menubutton { display: inline-block; width: 30px; height: 40px; margin: 0 35px 0 25px; vertical-align: middle;
}
header .menubutton .menuicon { display: block; height: 2px; width: 100%; margin-top: 4px; box-shadow: 0 15px 0 #fff, 0 30px 0 #fff; background-color: #fff;
}
header .dropdown { display: inline-block; width: 40px; height: 40px; box-sizing: border-box; padding: 9px 0; margin: 0 25px; vertical-align: middle;
}
header .dropdown .dropdownicon { display: block; position: relative; height: 22px; transition: -webkit-transform 0.25s ease-in-out;
}
header .dropdown .dropdownicon:before,
header .dropdown .dropdownicon:after { content: ''; position: absolute; width: 29px; height: 2px; border-radius: 2px; background-color: #fff;
}
header .dropdown .dropdownicon:before { top: 0; left: 0; transform-origin: 0% 50%; transform: rotateZ(45deg);
}
header .dropdown .dropdownicon:after { top: 0; right: 0; transform-origin: 100% 50%; transform: rotateZ(-45deg);
}
header .dropdown.active .dropdownicon { transform: rotateZ(180deg);
}
section { width: 100%; height: 162px; box-sizing: border-box; padding: 16px 0 16px 16px; border-radius: 5px; background-color: #eff1f8; font-size: 0; line-height: 0;
}
section > ul { display: inline-block; list-style-type: none; width: 477px; padding: 0; margin: 0; vertical-align: top;
}
section > ul li { display: inline-block; overflow: hidden;
}
section > ul li:first-child { border-right: 1px solid #c8cbd4;
}
section > ul li:first-child,
section > ul li:nth-child(2) { height: 71px; border-bottom: 2px solid #c8cbd4; vertical-align: top;
}
section > ul li:nth-child(3),
section > ul li:nth-child(4) { width: 50%; height: 58px; color: #3f454c; vertical-align: bottom;
}
section > ul li:nth-child(4) { text-align: right;
}
section > ul li h2 { width: 393px; margin: 19px 0; font-weight: 300; color: #272930; font-size: 22px; line-height: 1; font-size: 38px;
}
section > ul li p { margin: 18px 16px 18px 8px; display: inline-block; vertical-align: middle; font-size: 22px; line-height: 1;
}
section > ul li span { font-size: 22px; line-height: 1;
}
section img { display: inline-block; width: 130px; height: 130px; margin-right: 16px; border-radius: 5px; background-color: #666; vertical-align: top;
}
.hearticon { position: relative; display: inline-block; width: 18px; height: 18px; box-sizing: border-box; margin: 32px; border: 2px solid #666b72; border-top-width: 0; border-right-width: 0; transform: rotateZ(-45deg);
}
.hearticon:before,
.hearticon:after { content: ''; position: absolute; box-sizing: border-box; border: 2px solid #666b72; border-radius: 2em;
}
.hearticon:before { width: 18px; height: 21.6px; top: -10.8px; left: -2px; clip: rect(0, 18px, 12.8px, 0);
}
.hearticon:after { width: 21.6px; height: 18px; bottom: -2px; right: -10.8px; clip: rect(0, 21.6px, 18px, 8.8px);
}
.hearticon.liked { border: none; background-color: #f15252;
}
.hearticon.liked:before,
.hearticon.liked:after { border: none; background-color: #f15252;
}
.hearticon.liked:before { left: 0;
}
.hearticon.liked:after { bottom: 0;
}
.dateicon { position: relative; display: inline-block; width: 26px; height: 26px; box-sizing: border-box; border: 2px solid #666b72; border-radius: 50%; vertical-align: middle;
}
.dateicon:before,
.dateicon:after { content: ''; position: absolute; height: 2px; top: 11px; left: 10px; background-color: #666b72;
}
.dateicon:before { width: 8px;
}
.dateicon:after { width: 10px; transform-origin: 1px 50%; transform: rotateZ(-90deg);
}
.reviewsicon { position: relative; display: inline-block; width: 26px; height: 23px; box-sizing: border-box; margin: 2px 3px; border: 2px solid #666b72; border-radius: 3px; border-bottom-width: 0; vertical-align: middle;
}
.reviewsicon:before,
.reviewsicon:after { content: ''; position: absolute;
}
.reviewsicon:before { width: 3px; height: 2px; bottom: 0; left: 0; background-color: #666b72; box-shadow: 3px 0 0 #666b72, 6px 0 0 #666b72, 8px 0 0 #666b72, 19px 0 0 #666b72, 4px -14px 0 #666b72, 6px -14px 0 #666b72, 9px -14px 0 #666b72, 12px -14px 0 #666b72, 15px -14px 0 #666b72, 15px -9px 0 #666b72, 12px -9px 0 #666b72, 9px -9px 0 #666b72, 8px -9px 0 #666b72;
}
.reviewsicon:after { height: 4px; width: 4px; bottom: -2px; left: 11px; border: 2px solid #666b72; border-top-color: transparent; border-left-color: transparent; transform: rotateZ(45deg);
}
IPhone Ui - Script Codes
IPhone Ui - Script Codes
Home Page Home
Developer Daniel Gooß
Username daniel_gooss
Uploaded November 10, 2022
Rating 3
Size 8,602 Kb
Views 14,168
Do you need developer help for IPhone Ui?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Daniel Gooß (daniel_gooss) Script Codes
Name
Navigation concept
Web Component Switches
Apple menu redesign
CSS Blur Effect
Base-Style
CSSConf EU
Mobile Navigation Pattern
CSS Paperfold Effect
Revolver Slideshow with Touch
CSS Tab-Nav
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!