Duplicating iphone5 & ios7 in css3. There is a lot to learn and do.
A Pen by Akash Soti on CodePen.
/* Please use chrome for best viewing. I look forward to your valuable comments and suggestions. I will be working a lot on it to make it BIG */ | |
.iphone-outer | |
.lock-screen | |
.status-bar | |
.carrier.network-dots | |
%span | |
%span | |
%span | |
%span | |
%span | |
%span Airtel 3G | |
.pull-down | |
.battery-info | |
%span 40% | |
.battery-bar | |
.date-n-time | |
.time | |
time... | |
.date | |
Date... | |
.unlock | |
> slide to unlock | |
.bottom-actions | |
.pull-up | |
.camera | |
.speaker | |
.home-button | |
.shine | |
.brand iPhone 5 |
Duplicating iphone5 & ios7 in css3. There is a lot to learn and do.
A Pen by Akash Soti on CodePen.
// Thanks to Gabriel, @gab for the live clock and introducing me to moment.js :) | |
function update_date() { | |
$('.time').html(moment().format('h:mm')); | |
$('.date').html(moment().format('dddd, D MMMM')); | |
} | |
setInterval(update_date, 1000); |
@import "compass"; | |
/* Created by Akash Soti follow @akashsoti */ | |
body{ | |
letter-spacing: 2px; | |
background: #EFE2D1; | |
font-family: "HelveticaNeue-UltraLight", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; | |
} | |
.iphone-outer{ | |
width: 320px; | |
height: 640px; | |
background-color: #141414; | |
margin: 40px auto; | |
border-radius: 40px; | |
overflow: hidden; | |
position: relative; | |
&:before{ | |
content: ""; | |
display: block; | |
background-color: black; | |
width: 295px; | |
height: 470px; | |
position: relative; | |
top: 85px; | |
left: 12px; | |
border-radius: 5px; | |
} | |
&:after{ | |
content: ""; | |
display: block; | |
background: white; | |
width: 200px; | |
height: 700px; | |
z-index: 1; | |
position: relative; | |
top: -510px; | |
left: -98px; | |
opacity: 0.02; | |
-webkit-transform:rotate(11deg); | |
-moz-transform:rotate(11deg); | |
} | |
.lock-screen{ | |
position: absolute; | |
// thanks for the background to John Saddington, @saddington | |
background: url("http://john.do/wp-content/uploads/2013/09/ios-7-backgrounds-4.jpg"); | |
background-size: 100%; | |
width: 285px; | |
height: 460px; | |
top: 90px; | |
left: 17px; | |
} | |
& .brand{ | |
position: absolute; | |
font-size: 3.2em; | |
font-weight: 100; | |
text-align: center; | |
} | |
} | |
.status-bar{ | |
position: relative; | |
top: 0; | |
//background: blue; | |
width: 100%; | |
height: 4.5%; | |
} | |
.pull-down{ | |
position: absolute; | |
width: 13%; | |
height: 30%; | |
border-radius: 20px 20px 20px 20px; | |
background: white; | |
top: 9px; | |
left: 44%; | |
opacity: 0.4; | |
} | |
.carrier{ | |
letter-spacing: 0px; | |
float: left; | |
position: absolute; | |
width: 45%; | |
height: 100%; | |
//background: red; | |
} | |
.carrier.network-dots span{ | |
letter-spacing: 1px; | |
position: relative; | |
top: 0px; | |
left: 5px; | |
background: white; | |
width: 5px; | |
height: 5px; | |
border-radius: 50%; | |
display: inline-block; | |
} | |
.carrier.network-dots span:last-child{ | |
position: absolute; | |
top: 4px; | |
left: 53px; | |
background: none; | |
display: inline-block; | |
width: 62px; | |
color: white; | |
font-size: 13px; | |
} | |
.carrier.network-dots span:nth-last-child(2){ | |
background: none; | |
border: 1px solid white; | |
width: 3px; | |
height: 3px; | |
} | |
.battery-info{ | |
position: relative; | |
width: 30%; | |
height: 100%; | |
//background: orange; | |
float: right; | |
} | |
.battery-info span{ | |
position: absolute; | |
display: inline-block; | |
float: left; | |
width: 25%; | |
font-size: 13px; | |
top: 4px; | |
left: 16%; | |
color: white; | |
} | |
.battery-bar{ | |
top: 5px; | |
left: 45px; | |
position: absolute; | |
float: right; | |
width: 35%; | |
height: 50%; | |
border-radius: 2px; | |
border: 1px solid white; | |
&:before{ | |
position: relative; | |
top: 1px; | |
content: ""; | |
display: block; | |
width:40%; | |
height: 80%; | |
left: 1px; | |
background: white; | |
} | |
&:after{ | |
content: ""; | |
display: block; | |
position: absolute; | |
width:3px; | |
height:45%; | |
background: white; | |
top: 3px; | |
left: 100%; | |
} | |
} | |
.date-n-time{ | |
padding-top: 15px; | |
width: 75%; | |
height: 30%; | |
//background: red; | |
margin: 0 auto; | |
} | |
.time{ | |
font-size: 68px; | |
text-align: center; | |
color: white; | |
letter-spacing: 0.5px; | |
} | |
.date{ | |
font-family: "HelveticaNeue-Light"; | |
letter-spacing: 1.3px; | |
text-align: center; | |
color: white; | |
} | |
.unlock{ | |
font-family: "HelveticaNeue-Light"; | |
letter-spacing: 1px; | |
text-align: center; | |
font-size: 20px; | |
position: relative; | |
top: 47%; | |
background: -webkit-gradient(linear,left top,right top,color-stop(0, #FFE7C2),color-stop(0.4, white),color-stop(0.5, white),color-stop(0.6,#FFE7C2),color-stop(1, #FFE7C2)); | |
-webkit-background-clip: text; | |
-webkit-text-fill-color: transparent; | |
-webkit-animation: slidetounlock 2.5s infinite; | |
-moz-background-clip: text; | |
-moz-text-fill-color: transparent; | |
-moz-animation: slidetounlock 2.5s infinite; | |
// thanks to Chris Coyier for the tutorial on css-tricks | |
} | |
@-webkit-keyframes slidetounlock { | |
0% { | |
background-position: -100px 0; | |
} | |
100% { | |
background-position: 200px 0; | |
} | |
} | |
@-moz-keyframes slidetounlock { | |
0% { | |
background-position: -100px 0; | |
} | |
100% { | |
background-position: 200px 0; | |
} | |
} | |
.lock-screen .bottom-actions{ | |
position: absolute; | |
//background: blue; | |
bottom: 0; | |
width: 100%; | |
height: 4.5%; | |
} | |
.pull-up{ | |
position: absolute; | |
width: 13%; | |
height: 30%; | |
border-radius: 20px 20px 20px 20px; | |
background: white; | |
top: 30%; | |
left: 44%; | |
opacity: 0.7; | |
} | |
// working on it | |
.camera{ | |
position: absolute; | |
right: 7px; | |
bottom: 7px; | |
width: 30px; | |
height: 18px; | |
background: white; | |
opacity: 0.7; | |
-webkit-border-radius: 2px; | |
-moz-border-radius: 2px; | |
&:before{ | |
content: ""; | |
display: block; | |
position: relative; | |
width: 16px; | |
height: 4px; | |
background: white; | |
left: 7px; | |
top: -4px; | |
-webkit-border-radius: 5px 5px 0 0; | |
-moz-border-radius: 5px 5px 0 0; | |
} | |
} | |
.speaker{ | |
position: relative; | |
width: 60px; | |
height: 10px; | |
background-color: #1c1c1c; | |
top: -420px; | |
margin: 0 auto; | |
border-radius: 40px; | |
&:before{ | |
content: ""; | |
width: 8px; | |
height: 8px; | |
top:0px; | |
border-radius: 50%; | |
background-color: #0022FF; | |
position: absolute; | |
top: -20px; | |
left: 25px; | |
box-shadow: inset 0 0px 18px black; | |
border: 1px solid #292929; | |
} | |
} | |
.home-button{ | |
content: ""; | |
display: block; | |
position: relative; | |
background-color: black; | |
width: 55px; | |
height: 55px; | |
border-radius: 50%; | |
margin: 0 auto; | |
top: -112px; | |
box-shadow: inset 0 0 10px #000000; | |
border: 1px solid #1f1f1f; | |
&:before{ | |
content: ""; | |
display: block; | |
background-color: black; | |
width: 17px; | |
height: 17px; | |
position: absolute; | |
top: 18px; | |
left: 17px; | |
border-radius: 20%; | |
border: 2px solid #2f2f2f; | |
} | |
.shine{ | |
position: absolute; | |
width: 55px; | |
height: 55px; | |
background: -webkit-radial-gradient(circle, black, white); | |
border-radius: 50%; | |
opacity: 0.109; | |
} | |
} | |
.brand{ | |
text-align: center; | |
font-size: 52px; | |
font-weight: 100; | |
} | |