├── .gitignore
├── preview.png
├── compile.sh
├── README.md
├── style.css
├── docs
    ├── style.css
    └── index.html
└── style.scss


/.gitignore:
--------------------------------------------------------------------------------
1 | .sass-cache/
2 | *.css.map
3 | *.sass.map
4 | *.scss.map


--------------------------------------------------------------------------------
/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/twodayslate/iphone-mockup-css/master/preview.png


--------------------------------------------------------------------------------
/compile.sh:
--------------------------------------------------------------------------------
1 | #! /bin/sh
2 | 
3 | test sass || echo "Please install sass"
4 | 
5 | sass style.scss style.css
6 | cp style.css docs/style.css


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## Simple iPhone X Mockups
2 | 
3 | iPhone X frames that supports landscape and portrait mode as well as angled and stack views
4 | 
5 | Live Preview: https://twodayslate.github.io/iphone-mockup-css/
6 | 
7 | <img src="/preview.png"  width=150 />
8 | 
9 | Inspired by https://codepen.io/billyysea/pen/cGnvJ


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
 1 | .iphone {
 2 |   position: relative;
 3 |   overflow: hidden;
 4 |   background: #fff;
 5 |   background-size: cover;
 6 |   width: 11.7em;
 7 |   height: 25.272em;
 8 |   border: 0.6435em solid #0d0d10;
 9 |   border-radius: 1.8018em; }
10 |   .iphone.horizontal {
11 |     width: 25.272em;
12 |     height: 11.7em; }
13 |   .iphone:before {
14 |     display: block;
15 |     width: 6.52041em;
16 |     height: 0.936em;
17 |     background: #0d0d10;
18 |     border-radius: 0 0 0.702em 0.702em;
19 |     content: '';
20 |     position: relative;
21 |     top: 0;
22 |     left: 2.589795em;
23 |     z-index: 100; }
24 |   .iphone.horizontal:before {
25 |     height: 6.52041em;
26 |     width: 0.936em;
27 |     border-radius: 0 0.702em 0.702em 0;
28 |     left: 0;
29 |     top: 2.589795em; }
30 |   .iphone :first-child {
31 |     width: 11.7em;
32 |     height: 25.272em;
33 |     position: relative;
34 |     top: -0.936em; }
35 |   .iphone.horizontal :first-child {
36 |     top: -6.52041em;
37 |     height: 11.7em;
38 |     width: 25.272em; }
39 |   .iphone.left {
40 |     transform: perspective(50em) rotateY(-45deg); }
41 |   .iphone.right {
42 |     transform: perspective(50em) rotateY(45deg); }
43 |   .iphone.stack-right {
44 |     transform: perspective(50em) rotateX(45deg) skew(45deg, -45deg);
45 |     transform-origin: bottom-center;
46 |     filter: drop-shadow(-5em -0.25em 2em rgba(0, 0, 0, 0.3)); }
47 |   .iphone.stack-left {
48 |     transform: perspective(50em) rotateX(45deg) skew(-45deg, 45deg);
49 |     transform-origin: bottom-center;
50 |     filter: drop-shadow(5em 0.25em 2em rgba(0, 0, 0, 0.3)); }
51 |   .iphone.extra-small {
52 |     font-size: 8px; }
53 |   .iphone.small {
54 |     font-size: 10px; }
55 |   .iphone.medium {
56 |     font-size: 12px; }
57 |   .iphone.large {
58 |     font-size: 14px; }
59 |   .iphone.extra-large {
60 |     font-size: 16px; }
61 |   .iphone.gigantic {
62 |     font-size: 24px; }
63 | 
64 | /*# sourceMappingURL=style.css.map */
65 | 


--------------------------------------------------------------------------------
/docs/style.css:
--------------------------------------------------------------------------------
 1 | .iphone {
 2 |   position: relative;
 3 |   overflow: hidden;
 4 |   background: #fff;
 5 |   background-size: cover;
 6 |   width: 11.7em;
 7 |   height: 25.272em;
 8 |   border: 0.6435em solid #0d0d10;
 9 |   border-radius: 1.8018em; }
10 |   .iphone.horizontal {
11 |     width: 25.272em;
12 |     height: 11.7em; }
13 |   .iphone:before {
14 |     display: block;
15 |     width: 6.52041em;
16 |     height: 0.936em;
17 |     background: #0d0d10;
18 |     border-radius: 0 0 0.702em 0.702em;
19 |     content: '';
20 |     position: relative;
21 |     top: 0;
22 |     left: 2.589795em;
23 |     z-index: 100; }
24 |   .iphone.horizontal:before {
25 |     height: 6.52041em;
26 |     width: 0.936em;
27 |     border-radius: 0 0.702em 0.702em 0;
28 |     left: 0;
29 |     top: 2.589795em; }
30 |   .iphone :first-child {
31 |     width: 11.7em;
32 |     height: 25.272em;
33 |     position: relative;
34 |     top: -0.936em; }
35 |   .iphone.horizontal :first-child {
36 |     top: -6.52041em;
37 |     height: 11.7em;
38 |     width: 25.272em; }
39 |   .iphone.left {
40 |     transform: perspective(50em) rotateY(-45deg); }
41 |   .iphone.right {
42 |     transform: perspective(50em) rotateY(45deg); }
43 |   .iphone.stack-right {
44 |     transform: perspective(50em) rotateX(45deg) skew(45deg, -45deg);
45 |     transform-origin: bottom-center;
46 |     filter: drop-shadow(-5em -0.25em 2em rgba(0, 0, 0, 0.3)); }
47 |   .iphone.stack-left {
48 |     transform: perspective(50em) rotateX(45deg) skew(-45deg, 45deg);
49 |     transform-origin: bottom-center;
50 |     filter: drop-shadow(5em 0.25em 2em rgba(0, 0, 0, 0.3)); }
51 |   .iphone.extra-small {
52 |     font-size: 8px; }
53 |   .iphone.small {
54 |     font-size: 10px; }
55 |   .iphone.medium {
56 |     font-size: 12px; }
57 |   .iphone.large {
58 |     font-size: 14px; }
59 |   .iphone.extra-large {
60 |     font-size: 16px; }
61 |   .iphone.gigantic {
62 |     font-size: 24px; }
63 | 
64 | /*# sourceMappingURL=style.css.map */
65 | 


--------------------------------------------------------------------------------
/style.scss:
--------------------------------------------------------------------------------
 1 | .iphone {
 2 |   position: relative;
 3 |   overflow: hidden;
 4 |   background: #fff;
 5 |   background-size: cover;
 6 |   $width: 11.7em;
 7 |   width: $width; height: ($width*2.16);
 8 |   border: ($width*0.055) solid #0d0d10;
 9 |   border-radius: ($width*0.154);
10 | 
11 |   &.horizontal {
12 |     width: ($width*2.16); height: $width;
13 |   }
14 |   
15 |   &:before {
16 |     display: block;
17 |     width: $width*0.5573;
18 |     height: $width*0.08;
19 |     background: #0d0d10;
20 |     border-radius: 0 0 $width*0.06 $width*0.06;
21 |     content: '';
22 |     position: relative;
23 |     top: 0;
24 |     left: $width*0.5-$width*0.5573/2;
25 |     z-index: 100;
26 |   }
27 |   
28 |   &.horizontal:before {
29 |     height: $width*0.5573;
30 |     width: $width*0.08;
31 |     border-radius: 0 $width*0.06 $width*0.06 0;
32 |     left: 0;
33 |     top: $width*0.5-$width*0.5573/2;
34 |   }
35 |   
36 |   :first-child { 
37 |     width: $width;
38 |     height: ($width*2.16);
39 |     position: relative;
40 |     top: -$width*0.08;
41 |   }
42 |   
43 |   &.horizontal :first-child {
44 |     top: -$width*0.5573;
45 |     height: $width;
46 |     width: ($width*2.16);
47 |   }
48 |   
49 |   &.left {
50 |     transform: perspective(50em) rotateY(-45deg);
51 |   }
52 |   
53 |   &.right {
54 |     transform: perspective(50em) rotateY(45deg);
55 |   }
56 |   
57 |   &.stack-right {
58 |     transform: perspective(50em) rotateX(45deg) skew(45deg, -45deg);
59 |     transform-origin: bottom-center;
60 |     filter: drop-shadow(-5em -0.25em 2em rgba(0,0,0,0.3)); 
61 |   }
62 |   
63 |   &.stack-left {
64 |     transform: perspective(50em) rotateX(45deg) skew(-45deg, 45deg);
65 |     transform-origin: bottom-center;
66 |     filter: drop-shadow(5em 0.25em 2em rgba(0,0,0,0.3));
67 |   }
68 |   
69 |   &.extra-small {
70 |     font-size: 8px;
71 |   }
72 |   
73 |   &.small {
74 |     font-size: 10px;
75 |   }
76 |   
77 |   &.medium {
78 |     font-size: 12px;
79 |   }
80 |   
81 |   &.large {
82 |     font-size: 14px;
83 |   }
84 |   
85 |   &.extra-large {
86 |     font-size: 16px;
87 |   }
88 |   
89 |   &.gigantic {
90 |     font-size: 24px;
91 |   }
92 | }


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 5 |   <title>zac.gorak.us</title>
 6 |   <link rel="stylesheet" type="text/css" href="style.css">
 7 |   <style type="text/css">
 8 |     body { background:#f0f0fa; margin:0 }
 9 |     .iphone { margin:30px auto }
10 |   </style>
11 | </head>
12 | <body>
13 | <div class="iphone">
14 |   <!-- Just put your stuff in here -->
15 |   <img src="https://is2-ssl.mzstatic.com/image/thumb/Purple118/v4/06/2a/8c/062a8c9e-675c-2000-243c-00b1b33b9b57/pr_source.png/230x0w.jpg" />
16 |   </div>
17 | 
18 | <div class="iphone horizontal">
19 |   <!-- Just put your stuff in here -->
20 |   <iframe src="https://codepen.io"></iframe>
21 | </div>
22 | 
23 | <div class="iphone right">
24 |   <!-- Just put your stuff in here -->
25 |   <img src="https://is2-ssl.mzstatic.com/image/thumb/Purple118/v4/06/2a/8c/062a8c9e-675c-2000-243c-00b1b33b9b57/pr_source.png/230x0w.jpg" />
26 | </div>
27 | 
28 | <div class="iphone stack-right">
29 |   <!-- Just put your stuff in here -->
30 |   <img src="https://is2-ssl.mzstatic.com/image/thumb/Purple118/v4/06/2a/8c/062a8c9e-675c-2000-243c-00b1b33b9b57/pr_source.png/230x0w.jpg" />
31 | </div>
32 | 
33 | <div class="iphone stack-left">
34 |   <!-- Just put your stuff in here -->
35 |   <img src="https://is2-ssl.mzstatic.com/image/thumb/Purple118/v4/06/2a/8c/062a8c9e-675c-2000-243c-00b1b33b9b57/pr_source.png/230x0w.jpg" />
36 | </div>
37 | 
38 | <div class="iphone left">
39 |   <!-- Just put your stuff in here -->
40 |   <img src="https://is2-ssl.mzstatic.com/image/thumb/Purple118/v4/06/2a/8c/062a8c9e-675c-2000-243c-00b1b33b9b57/pr_source.png/230x0w.jpg" />
41 | </div>
42 | 
43 | <div class="iphone horizontal left">
44 |   <!-- Just put your stuff in here -->
45 |   <img src="https://is2-ssl.mzstatic.com/image/thumb/Purple118/v4/06/2a/8c/062a8c9e-675c-2000-243c-00b1b33b9b57/pr_source.png/230x0w.jpg" />
46 | </div>
47 | 
48 | <div class="iphone horizontal right">
49 |   <!-- Just put your stuff in here -->
50 |   <img src="https://is2-ssl.mzstatic.com/image/thumb/Purple118/v4/06/2a/8c/062a8c9e-675c-2000-243c-00b1b33b9b57/pr_source.png/230x0w.jpg" />
51 | </div>
52 | 
53 | <div class="iphone extra-small">
54 |   <!-- Just put your stuff in here -->
55 |   <img src="https://is2-ssl.mzstatic.com/image/thumb/Purple118/v4/06/2a/8c/062a8c9e-675c-2000-243c-00b1b33b9b57/pr_source.png/230x0w.jpg" />
56 | </div>
57 | <div class="iphone small">
58 |   <!-- Just put your stuff in here -->
59 |   <img src="https://is2-ssl.mzstatic.com/image/thumb/Purple118/v4/06/2a/8c/062a8c9e-675c-2000-243c-00b1b33b9b57/pr_source.png/230x0w.jpg" />
60 | </div>
61 | 
62 | <div class="iphone medium">
63 |   <!-- Just put your stuff in here -->
64 |   <img src="https://is2-ssl.mzstatic.com/image/thumb/Purple118/v4/06/2a/8c/062a8c9e-675c-2000-243c-00b1b33b9b57/pr_source.png/230x0w.jpg" />
65 | </div>
66 | 
67 | <div class="iphone large">
68 |   <!-- Just put your stuff in here -->
69 |   <img src="https://is2-ssl.mzstatic.com/image/thumb/Purple118/v4/06/2a/8c/062a8c9e-675c-2000-243c-00b1b33b9b57/pr_source.png/230x0w.jpg" />
70 | </div>
71 | 
72 | <div class="iphone extra-large">
73 |   <!-- Just put your stuff in here -->
74 |   <img src="https://is2-ssl.mzstatic.com/image/thumb/Purple118/v4/06/2a/8c/062a8c9e-675c-2000-243c-00b1b33b9b57/pr_source.png/230x0w.jpg" />
75 | </div>
76 | 
77 | <div class="iphone gigantic">
78 |   <!-- Just put your stuff in here -->
79 |   <img src="https://is2-ssl.mzstatic.com/image/thumb/Purple118/v4/06/2a/8c/062a8c9e-675c-2000-243c-00b1b33b9b57/pr_source.png/230x0w.jpg" />
80 | </div>
81 | </body>
82 | </html>


--------------------------------------------------------------------------------