Skip to content

Instantly share code, notes, and snippets.

@chase2981

chase2981/css-only-iphone-6.markdown

Created April 18, 2021 05:38
Show Gist options
  • Save chase2981/dff58ea62a37b833d25e14e036d34e4b to your computer and use it in GitHub Desktop.
Save chase2981/dff58ea62a37b833d25e14e036d34e4b to your computer and use it in GitHub Desktop.
Download ZIP
CSS Only iPhone 6
Raw
css-only-iphone-6.markdown
Raw
index.html
<div id="wrapper">
<div id="iphone">
<div id="shadow"></div>
<div id="side"></div>
<div id="lines">
<div>
<div>
<div></div>
</div>
</div>
<div>
<div>
<div></div>
</div>
</div>
</div>
<div id="toggler">
<div></div>
</div>
<div id="aux"></div>
<div id="lightning"></div>
<div id="bottom-speaker">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="skrews">
<div></div>
<div></div>
</div>
<div id="volume">
<div></div>
<div></div>
</div>
<div id="front">
<div id="front-cover"></div>
<div id="camera">
<div></div>
</div>
<div id="speaker"></div>
<div id="screen">
<div id="reminder">
<div></div>
<div>Made by @_fbrz</div>
<div>now</div>
</div>
<div id="circle"></div>
<div id="time">12:42</div>
<div id="date">Saturday, January 4</div>
<div id="bottom"></div>
<div id="top"></div>
<div id="slide">
<div></div>
slide to unlock
</div>
<div id="signal">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="battery">
<div>86%</div>
<div>
<div></div>
<div></div>
</div>
</div>
</div>
<div id="home">
<div></div>
</div>
</div>
</div>
</div>
<a href="fabrizio.co" id="fabrizio"></a>
<!--<div id="awwwards">Vote for it and win 2 tickets! <a target="_blank" href="http://conference.awwwards.com/code/fabrizio-bianchi">AWWWARDS® Conference 2015</a></div>
<a href="https://codepen.io/fbrz/details/aynlk" id="coolors" target="_blank">COOLORS is out!</a>-->
Raw
script.js
//You may also like Plugin
/*alsolike(
"LwlqI", "100 followers jelly cake!",
"nKCsI", "Semantic Sandwich",
"whxbF", "CSS Only Bending Effect"
);*/
Raw
scripts
<script src="https://codepen.io/fbrz/pen/9a3e4ee2ef6dfd479ad33a2c85146fc1.js"></script>
Raw
style.css
/* No images in this pen :D */
@font-face {
font-family: Helvetica;
src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/164210/HelveticaNeue-UltraLight.otf) format('TrueType');
font-weight: 300;
}
body {
font-family: 'Helvetica', sans-serif;
background: #f5f5f5;
color: #333;
letter-spacing: 1px;
}
html,body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#wrapper {
height: 520px;
width: 800px;
margin-left: -400px;
margin-top: -260px;
position: absolute;
perspective: 6000px;
top: 50%;
left: 50%;
}
#iphone {
height: 760px;
width: 372px;
border-radius: 50px;
position: absolute;
background: none;
box-shadow: none;
left: 206px;
top: -140px;
transform: rotateX(54deg) rotateZ(-46deg);
transform-style: preserve-3d;
}
#side {
background: #CDD0D5;
width: 393px;
height: 780px;
border-top-left-radius: 77px;
border-bottom-left-radius: 49px;
border-bottom-right-radius: 86px;
border-top-right-radius: 70px;
position: absolute;
top: 5px;
left: -26px;
box-shadow: inset #3D3E42 0 0 15px 9px;
}
#front {
width: 362px;
height: 750px;
border-radius: 49px;
position: absolute;
background-image: -webkit-linear-gradient(-27deg,#444,#000 10%, #000 42%, #333, #000 57%, #000 91%, #444);
left: 5px;
top: 5px;
box-shadow: inset #000 0 0 0 4px, #555 0px 0 3px 0px, #222 -3px 2px, #000 -5px 5px, #E0E0E0 -7px 6px 1px, #6D6D6D -7px 6px 9px;
transform: translateZ(1px);
}
#front-cover {
width: 344px;
height: 734px;
background: #000;
border-radius: 39px;
position: absolute;
top: 8px;
left: 9px;
}
#home {
position: absolute;
width: 52px;
height: 52px;
border-radius: 50%;
background: linear-gradient(32deg,#666,#000,#666);
top: 684px;
left: 160px;
}
#home div {
background: #000;
border-radius: 50%;
width: 46px;
height: 46px;
position: absolute;
left: 3px;
top: 3px;
}
#camera {
width: 11px;
height: 11px;
background: #000;
position: absolute;
top: 35px;
left: 124px;
border-radius: 50%;
box-shadow: inset #666 -5px 2px 9px -2px;
}
#camera div {
width: 6px;
height: 6px;
background: radial-gradient(#E1E4F5,#0D2B69 33%);
background-position: -1px -1px;
position: absolute;
top: 3px;
left: 3px;
border-radius: 50%;
}
#speaker {
width: 50px;
height: 4px;
border-radius: 2px;
background: #555;
position: absolute;
top: 39px;
left: 156px;
box-shadow: inset #222 0 0px 4px;
}
#volume {
height: 128px;
width: 11px;
border-radius: 10px;
position: absolute;
background: #F9F9FA;
top: 171px;
left: -20px;
transform: rotateY(95deg);
transform-style: preserve-3d;
box-shadow: inset #292A2F 4px 0 8px 1px, #D5D5D5 -1px 0px 2px;
}
#volume div {
width: 8px;
height: 55px;
background: #BBBCC0;
border-radius: 10px;
position: absolute;
box-shadow: #eee -1px 1px, #777 -1px 3px, #505057 -3px 3px, inset #909197 -3px 0 3px;
}
#volume div:first-child {
top: 2px;
left: 4px;
}
#volume div:last-child {
top: 69px;
left: 4px;
}
#toggler {
height: 34px;
width: 8px;
border-radius: 10px;
position: absolute;
background: #2B2C31;
top: 105px;
left: -20px;
transform: rotateY(95deg);
transform-style: preserve-3d;
box-shadow: inset #292A2F 4px 0 8px 1px, #D5D5D5 -1px 0px 2px;
}
#toggler div {
width: 4px;
height: 31px;
background: #BBBCC0;
border-radius: 10px;
position: absolute;
box-shadow: #eee -1px 1px, #777 -2px 3px, #505057 -3px 3px, inset #909197 -3px 0 3px;
top: -1px;
left: 3px;
}
#aux {
width: 19px;
height: 19px;
background: #3B3B3B;
border-radius: 50%;
transform: rotateX(90deg) translateZ(1px);
transform-style: preserve-3d;
position: absolute;
top: 766px;
left: 45px;
box-shadow: inset #000 6px -3px 10px 1px, #C7C7C7 1px 0px 1px;
}
#lightning {
width: 48px;
height: 12px;
border-radius: 10px;
background: #3F3F3F;
transform: rotateX(90deg) translate3d(0px,1px,0px);
top: 771px;
position: absolute;
left: 139px;
box-shadow: inset #8E8F94 -1px 1px 0px 2px, #515258 0px 0px 0 1px, inset #000 0 -3px 10px, #DADADA 1px 0 0 1px;
}
#bottom-speaker {
position: absolute;
transform: rotateX(90deg);
top: 781px;
left: 70px;
}
#bottom-speaker div {
width: 8px;
height: 8px;
border-radius: 50%;
background: #6C6D72;
position: absolute;
box-shadow: inset #000 1px -1px 4px 1px, #DADADA 1px 0px;
}
#bottom-speaker div:nth-child(2) { left: 150px; }
#bottom-speaker div:nth-child(3) { left: 162px; }
#bottom-speaker div:nth-child(4) { left: 174px; }
#bottom-speaker div:nth-child(5) { left: 186px; }
#bottom-speaker div:nth-child(6) { left: 198px; }
#bottom-speaker div:nth-child(7) { left: 210px; }
#skrews {
position: absolute;
top: 780px;
left: 120px;
transform: rotateX(90deg);
}
#skrews div {
position: absolute;
width: 8px;
height: 8px;
background: rgb(95, 92, 92);
border-radius: 50%;
top: 0;
z-index: 4;
box-shadow: inset #999AA0 0 0 0px 2px, #444 1px 0px;
}
#skrews div:last-child {
left: 70px;
}
#lines {
position: absolute;
top: 82px;
left: -32px;
}
#lines > div:last-child {
top: 634px;
}
#lines div {
width: 7px;
height: 11px;
position: absolute;
transform-style: preserve-3d;
transform-origin: 100% 100%;
}
#lines > div {
background: linear-gradient(right,#393A3C,#5A595E);
transform: rotateY(90deg);
}
#lines > div > div {
background: linear-gradient(right,#5A595E,#87868A);
transform: rotateY(17deg);
left: -6px;
}
#lines > div > div > div {
background: linear-gradient(right,#87868A,#A8A6AD);
transform: rotateY(17deg);
left: -6px;
}
#shadow {
width: 350px;
height: 755px;
background: black;
position: absolute;
top: 5px;
left: 0;
transform: translateZ(-17px);
transform-style: preserve-3d;
box-shadow: #000 0 0 10px 15px;
opacity: 0.4;
border-top-left-radius: 76px;
border-top-right-radius: 200px;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 56px;
}
#screen {
background: linear-gradient(#A1E5E5,#1987AA);
width: 336px;
height: 589px;
position: absolute;
top: 80px;
left: 13px;
font-weight: 300;
color: #fff;
background-size: 200% 100%;
overflow: hidden;
}
#time {
font-size: 86px;
left: 57px;
top: 37px;
position: absolute;
}
#date {
font-size: 20px;
left: 85px;
top: 130px;
position: absolute;
}
#bottom {
width: 37px;
height: 7px;
border-radius: 5px;
background: #2AB1DB;
position: absolute;
top: 573px;
left: 149px;
}
#top {
width: 37px;
height: 7px;
border-radius: 5px;
background: #D7FFFF;
position: absolute;
top: 10px;
left: 149px;
}
#slide {
position: absolute;
top: 489px;
left: 88px;
font-size: 28px;
color: #2AB1DB;
background: linear-gradient(left,#2EC4F3 30%,#fff,#2EC4F3 70%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 350px;
animation: slide 5s linear infinite;
}
@keyframes slide {
0% { background-position: 100px 0; }
40% { background-position: 440px 0; }
100% { background-position: 440px 0; }
}
#slide div {
transform: rotate(135deg);
border-left: 2px solid #2AB1DB;
border-top: 2px solid #2AB1DB;
width: 15px;
height: 15px;
position: absolute;
left: -29px;
top: 10px;
}
#signal {
position: absolute;
top: 9px;
left: 7px;
}
#signal div {
width: 6px;
height: 6px;
border-radius: 50%;
background: #fff;
border: 1px solid #fff;
position: absolute;
}
#signal div:nth-child(2) {
left: 9px;
}
#signal div:nth-child(3) {
left: 18px;
}
#signal div:nth-child(4) {
left: 27px;
}
#signal div:nth-child(5) {
left: 36px;
background: none;
}
#battery {
position: absolute;
top: 3px;
left: 270px;
font-size: 13px;
}
#battery > div:last-child {
width: 27px;
height: 9px;
border: 1px solid #fff;
position: absolute;
top: 4px;
left: 27px;
border-radius: 2px;
}
#battery div div:first-child {
width: 21px;
height: 7px;
background: #fff;
position: absolute;
top: 1px;
left: 1px;
}
#battery div div:last-child {
width: 1px;
height: 6px;
background: #FFF;
position: absolute;
left: 29px;
top: 2px;
border-radius: 0 1px 1px 0;
}
#fabrizio {
border-top: 100px solid black;
border-right: 63px solid transparent;
width: 0;
transform: scale(.33);
transform-origin: 0 0;
margin: 20px;
opacity:.6;
position: absolute;
bottom: -130px;
}
#fabrizio:before {
background: black;
width: 20px;
height: 30px;
content: '';
display: block;
transform: skewX(-32deg);
position: relative;
top: -65px;
left: 29px;
}
#fabrizio:after {
background: black;
width: 40px;
height: 36px;
content: '';
display: block;
transform: skewX(-32deg);
position: relative;
top: -130px;
left: 49px;
}
#circle {
width: 50px;
height: 50px;
background: none;
border-radius: 50%;
box-shadow: rgba(255,255,255,0.1) 160px 335px,rgba(255,255,255,0.1) 120px 275px 0 12px,rgba(255,255,255,0.1) 60px 355px 0 23px,rgba(255,255,255,0.1) 230px 445px 0 -8px,rgba(255,255,255,0.1) 60px 125px,rgba(255,255,255,0.1) 260px 145px 0 12px,rgba(255,255,255,0.1) 300px 145px 0 23px,rgba(255,255,255,0.1) 100px 85px 0 -8px,rgba(255,255,255,0.1) 50px 155px,rgba(255,255,255,0.1) 150px 273px 0 -2px,rgba(255,255,255,0.1) 50px 555px 0 23px,rgba(255,255,255,0.1) 180px 5px 0 -8px;
animation: circle 30s linear infinite alternate;
}
@keyframes circle {
0%{
box-shadow: rgba(255,255,255,0.1) 160px 335px,rgba(255,255,255,0.1) 120px 275px 0 12px,rgba(255,255,255,0.1) 60px 355px 0 23px,rgba(255,255,255,0.1) 230px 445px 0 -8px,rgba(255,255,255,0.1) 60px 125px,rgba(255,255,255,0.1) 260px 145px 0 12px,rgba(255,255,255,0.1) 300px 145px 0 23px,rgba(255,255,255,0.1) 100px 85px 0 -8px,rgba(255,255,255,0.1) 350px 555px,rgba(255,255,255,0.1) 350px 273px 0 -2px,rgba(255,255,255,0.1) 150px 355px 0 23px,rgba(255,255,255,0.1) 180px 205px 0 -8px,rgba(255,255,255,0.1) 0px 0px 0 -8px,rgba(255,255,255,0.1) 100px 555px 0 10px;
}
100%{
box-shadow: rgba(255,255,255,0.1) 70px 10px,rgba(255,255,255,0.1) 300px 205px 0 12px,rgba(255,255,255,0.1) 0px 155px 0 23px,rgba(255,255,255,0.1) 330px 45px 0 -8px,rgba(255,255,255,0.1) 460px 325px,rgba(255,255,255,0.1) 0px 445px 0 12px,rgba(255,255,255,0.1) 300px 145px 0 23px,rgba(255,255,255,0.1) 100px 85px 0 -8px,rgba(255,255,255,0.1) 50px 155px,rgba(255,255,255,0.1) 150px 273px 0 -2px,rgba(255,255,255,0.1) 0px 555px 0 23px,rgba(255,255,255,0.1) 180px 5px 0 -8px,rgba(255,255,255,0.1) 300px 555px 0 -8px,rgba(255,255,255,0.1) 350px 355px 0 10px;
}
}
#reminder {
position: absolute;
top: 230px;
left: 40px;
width: 296px;
height: 50px;
border-top: 1px solid #86E2F0;
border-bottom: 1px solid #86E2F0;
line-height: 50px;
font-weight: 400;
opacity: 0;
animation: reminder .1s linear forwards 15s;
}
#reminder div:first-child {
background: #fff;
width: 16px;
height: 16px;
border-radius: 3px;
position: absolute;
top: 18px;
}
#reminder div:nth-child(2) {
position: absolute;
left: 30px;
}
#reminder div:last-child{
position: absolute;
left: 251px;
font-size: 11px;
color: #86E2F0;
}
@keyframes reminder {
100% {
opacity: 1;
}
}
#awwwards {
position: absolute;
bottom: 30px;
left: 70px;
}
#awwwards a {
color: #444;
text-decoration: none;
border-bottom: 1px solid #888;
}
#coolors {
position: absolute;
bottom: 30px;
right: 30px;
color: #444;
text-decoration: none;
border-bottom: 1px solid #888;
animation: coolors 1s infinite;
opacity: 1;
}
@keyframes coolors {
50% { right: 40px; }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment