Created
June 19, 2012 17:44
-
-
Save johan/2955508 to your computer and use it in GitHub Desktop.
Wrap an iPhone portrait screenshot in an iPhone via http://bit.ly/iphoneshot#http://i.imgur.com/MwnZF.png
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>CSS3 iPhone v0.1 · CodePen</title> | |
| <style> | |
| html, body { | |
| height: 100%; | |
| } | |
| body { | |
| text-align: center; | |
| padding: 50px; | |
| background: #cccccc; | |
| } | |
| .iphone { | |
| display: -moz-inline-box; | |
| -moz-box-orient: vertical; | |
| display: inline-block; | |
| vertical-align: middle; | |
| *vertical-align: auto; | |
| } | |
| .iphone { | |
| *display: inline; | |
| } | |
| .iphone { | |
| position: relative; | |
| } | |
| .iphone:after { | |
| position: absolute; | |
| top: 100%; | |
| width: 372px; | |
| height: 372px; | |
| -webkit-border-radius: 50%; | |
| -moz-border-radius: 50%; | |
| -ms-border-radius: 50%; | |
| -o-border-radius: 50%; | |
| border-radius: 50%; | |
| background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #000000), color-stop(100%, rgba(0, 0, 0, 0))); | |
| background: -webkit-radial-gradient(#000000, rgba(0, 0, 0, 0)); | |
| background: -moz-radial-gradient(#000000, rgba(0, 0, 0, 0)); | |
| background: -o-radial-gradient(#000000, rgba(0, 0, 0, 0)); | |
| background: -ms-radial-gradient(#000000, rgba(0, 0, 0, 0)); | |
| background: radial-gradient(#000000, rgba(0, 0, 0, 0)); | |
| -webkit-transform: scale(1, 0.025); | |
| -moz-transform: scale(1, 0.025); | |
| -ms-transform: scale(1, 0.025); | |
| -o-transform: scale(1, 0.025); | |
| transform: scale(1, 0.025); | |
| -webkit-transform-origin: 0 0; | |
| -moz-transform-origin: 0 0; | |
| -ms-transform-origin: 0 0; | |
| -o-transform-origin: 0 0; | |
| transform-origin: 0 0; | |
| content: ""; | |
| } | |
| .iphone .reflection { | |
| position: absolute; | |
| top: 100%; | |
| -webkit-transform: scaleY(-1); | |
| transform: scaleY(-1); | |
| -webkit-mask-image: -webkit-linear-gradient(rgba(0, 0, 0, 0) 80%, #000000); | |
| -box-mask-image: -moz-linear-gradient(rgba(0, 0, 0, 0) 80%, #000000); | |
| -o-mask-image: -o-linear-gradient(rgba(0, 0, 0, 0) 80%, #000000); | |
| mask-image: linear-gradient(rgba(0, 0, 0, 0) 80%, #000000); | |
| filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); | |
| opacity: 0.5; | |
| } | |
| .iphone .steel_band { | |
| position: relative; | |
| width: 372px; | |
| height: 734px; | |
| padding: 3px; | |
| background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #dcdbda), color-stop(100%, #ebeae9)); | |
| background: -webkit-linear-gradient(left, #dcdbda, #ebeae9); | |
| background: -moz-linear-gradient(left, #dcdbda, #ebeae9); | |
| background: -o-linear-gradient(left, #dcdbda, #ebeae9); | |
| background: -ms-linear-gradient(left, #dcdbda, #ebeae9); | |
| background: linear-gradient(left, #dcdbda, #ebeae9); | |
| -webkit-border-radius: 60px; | |
| -moz-border-radius: 60px; | |
| -ms-border-radius: 60px; | |
| -o-border-radius: 60px; | |
| border-radius: 60px; | |
| -webkit-box-shadow: inset 1px 0 0 #7e7c7a, inset -1px 0 1px #7e7c7a; | |
| -moz-box-shadow: inset 1px 0 0 #7e7c7a, inset -1px 0 1px #7e7c7a; | |
| box-shadow: inset 1px 0 0 #7e7c7a, inset -1px 0 1px #7e7c7a; | |
| } | |
| .iphone .plastic_band { | |
| width: 364px; | |
| height: 726px; | |
| padding: 4px; | |
| -webkit-border-radius: 57px; | |
| -moz-border-radius: 57px; | |
| -ms-border-radius: 57px; | |
| -o-border-radius: 57px; | |
| border-radius: 57px; | |
| background: #2b2b2b; | |
| -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5), 0 0 1px rgba(0, 0, 0, 0.5); | |
| -moz-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5), 0 0 1px rgba(0, 0, 0, 0.5); | |
| box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5), 0 0 1px rgba(0, 0, 0, 0.5); | |
| } | |
| .iphone .glass_face { | |
| position: relative; | |
| width: 364px; | |
| height: 726px; | |
| overflow: hidden; | |
| background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #000000), color-stop(100%, #090909)); | |
| background: -webkit-linear-gradient(#000000, #090909); | |
| background: -moz-linear-gradient(#000000, #090909); | |
| background: -o-linear-gradient(#000000, #090909); | |
| background: -ms-linear-gradient(#000000, #090909); | |
| background: linear-gradient(#000000, #090909); | |
| -webkit-border-radius: 53px; | |
| -moz-border-radius: 53px; | |
| -ms-border-radius: 53px; | |
| -o-border-radius: 53px; | |
| border-radius: 53px; | |
| -webkit-box-shadow: -1px -1px 2px rgba(255, 255, 255, 0.15), -1px -1px 0 rgba(0, 0, 0, 0.5); | |
| -moz-box-shadow: -1px -1px 2px rgba(255, 255, 255, 0.15), -1px -1px 0 rgba(0, 0, 0, 0.5); | |
| box-shadow: -1px -1px 2px rgba(255, 255, 255, 0.15), -1px -1px 0 rgba(0, 0, 0, 0.5); | |
| } | |
| .iphone .gloss { | |
| position: relative; | |
| z-index: 1; | |
| height: 100%; | |
| width: 100%; | |
| -webkit-mask-image: -webkit-linear-gradient(-162deg, #000000 32%, rgba(0, 0, 0, 0) 32%); | |
| -box-mask-image: -moz-linear-gradient(-162deg, #000000 32%, rgba(0, 0, 0, 0) 32%); | |
| -o-mask-image: -o-linear-gradient(-162deg, #000000 32%, rgba(0, 0, 0, 0) 32%); | |
| mask-image: linear-gradient(-162deg, #000000 32%, rgba(0, 0, 0, 0) 32%); | |
| -webkit-border-radius: 53px; | |
| -moz-border-radius: 53px; | |
| -ms-border-radius: 53px; | |
| -o-border-radius: 53px; | |
| border-radius: 53px; | |
| background: -webkit-gradient(linear, 280deg, 280deg, color-stop(0%, rgba(255, 255, 255, 0.6)), color-stop(70%, rgba(255, 255, 255, 0))) no-repeat; | |
| background: -webkit-linear-gradient(280deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 70%) no-repeat; | |
| background: -moz-linear-gradient(280deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 70%) no-repeat; | |
| background: -o-linear-gradient(280deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 70%) no-repeat; | |
| background: -ms-linear-gradient(280deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 70%) no-repeat; | |
| background: linear-gradient(280deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 70%) no-repeat; | |
| -webkit-background-size: 60% 100%; | |
| -moz-background-size: 60% 100%; | |
| -o-background-size: 60% 100%; | |
| background-size: 60% 100%; | |
| background-position: top right; | |
| } | |
| .iphone .camera { | |
| position: absolute; | |
| z-index: 2; | |
| top: 50px; | |
| left: 50%; | |
| margin-left: -75px; | |
| height: 8px; | |
| width: 8px; | |
| padding: 4px; | |
| border: 1px solid rgba(255, 255, 255, 0.05); | |
| -webkit-border-radius: 9px; | |
| -moz-border-radius: 9px; | |
| -ms-border-radius: 9px; | |
| -o-border-radius: 9px; | |
| border-radius: 9px; | |
| -webkit-box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.25); | |
| -moz-box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.25); | |
| box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.25); | |
| background: -webkit-gradient(radial, 5px 5px, 0, 5px 5px, 100, color-stop(0%, #1b1b1b), color-stop(100%, #343434)); | |
| background: -webkit-radial-gradient(5px 5px, #1b1b1b, #343434); | |
| background: -moz-radial-gradient(5px 5px, #1b1b1b, #343434); | |
| background: -o-radial-gradient(5px 5px, #1b1b1b, #343434); | |
| background: -ms-radial-gradient(5px 5px, #1b1b1b, #343434); | |
| background: radial-gradient(5px 5px, #1b1b1b, #343434); | |
| background-position: top left; | |
| } | |
| .iphone .camera:after { | |
| display: block; | |
| height: 8px; | |
| width: 8px; | |
| -webkit-border-radius: 4px; | |
| -moz-border-radius: 4px; | |
| -ms-border-radius: 4px; | |
| -o-border-radius: 4px; | |
| border-radius: 4px; | |
| -webkit-box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.1); | |
| -moz-box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.1); | |
| box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.1); | |
| background: -webkit-gradient(radial, 1px 1px, 0, 1px 1px, 50, color-stop(25%, #3c2b90), color-stop(50%, rgba(60, 43, 144, 0.75))), -webkit-gradient(radial, 1px 1px, 0, 1px 1px, 50, color-stop(25%, rgba(43, 93, 144, 0.75)), color-stop(50%, rgba(43, 93, 144, 0))), -webkit-gradient(radial, 1px 1px, 0, 1px 1px, 50, color-stop(25%, rgba(43, 93, 144, 0.75)), color-stop(50%, rgba(43, 93, 144, 0))), -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 60, color-stop(40%, #07131b), color-stop(60%, #1b3d70)); | |
| background: -webkit-radial-gradient(1px 1px, #3c2b90 25%, rgba(60, 43, 144, 0.75) 50%), -webkit-radial-gradient(1px 1px, rgba(43, 93, 144, 0.75) 25%, rgba(43, 93, 144, 0) 50%), -webkit-radial-gradient(1px 1px, rgba(43, 93, 144, 0.75) 25%, rgba(43, 93, 144, 0) 50%), -webkit-radial-gradient(#07131b 40%, #1b3d70 60%); | |
| background: -moz-radial-gradient(1px 1px, #3c2b90 25%, rgba(60, 43, 144, 0.75) 50%), -moz-radial-gradient(1px 1px, rgba(43, 93, 144, 0.75) 25%, rgba(43, 93, 144, 0) 50%), -moz-radial-gradient(1px 1px, rgba(43, 93, 144, 0.75) 25%, rgba(43, 93, 144, 0) 50%), -moz-radial-gradient(#07131b 40%, #1b3d70 60%); | |
| background: -o-radial-gradient(1px 1px, #3c2b90 25%, rgba(60, 43, 144, 0.75) 50%), -o-radial-gradient(1px 1px, rgba(43, 93, 144, 0.75) 25%, rgba(43, 93, 144, 0) 50%), -o-radial-gradient(1px 1px, rgba(43, 93, 144, 0.75) 25%, rgba(43, 93, 144, 0) 50%), -o-radial-gradient(#07131b 40%, #1b3d70 60%); | |
| background: -ms-radial-gradient(1px 1px, #3c2b90 25%, rgba(60, 43, 144, 0.75) 50%), -ms-radial-gradient(1px 1px, rgba(43, 93, 144, 0.75) 25%, rgba(43, 93, 144, 0) 50%), -ms-radial-gradient(1px 1px, rgba(43, 93, 144, 0.75) 25%, rgba(43, 93, 144, 0) 50%), -ms-radial-gradient(#07131b 40%, #1b3d70 60%); | |
| background: radial-gradient(1px 1px, #3c2b90 25%, rgba(60, 43, 144, 0.75) 50%), radial-gradient(1px 1px, rgba(43, 93, 144, 0.75) 25%, rgba(43, 93, 144, 0) 50%), radial-gradient(1px 1px, rgba(43, 93, 144, 0.75) 25%, rgba(43, 93, 144, 0) 50%), radial-gradient(#07131b 40%, #1b3d70 60%); | |
| background-position: top left, center left, center, right center; | |
| content: ""; | |
| } | |
| .iphone .speaker { | |
| position: absolute; | |
| z-index: 2; | |
| top: 50px; | |
| left: 50%; | |
| margin-left: -37px; | |
| width: 62px; | |
| height: 8px; | |
| padding: 5px; | |
| -webkit-border-radius: 9px; | |
| -moz-border-radius: 9px; | |
| -ms-border-radius: 9px; | |
| -o-border-radius: 9px; | |
| border-radius: 9px; | |
| background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, rgba(255, 255, 255, 0.35)), color-stop(100%, rgba(255, 255, 255, 0))) no-repeat, -webkit-gradient(linear, 50% 0%, 50% 18, color-stop(44.444%, #000000), color-stop(100%, #444444)); | |
| background: -webkit-radial-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0)) no-repeat, -webkit-linear-gradient(#000000 8px, #444444 18px); | |
| background: -moz-radial-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0)) no-repeat, -moz-linear-gradient(#000000 8px, #444444 18px); | |
| background: -o-radial-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0)) no-repeat, -o-linear-gradient(#000000 8px, #444444 18px); | |
| background: -ms-radial-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0)) no-repeat, -ms-linear-gradient(#000000 8px, #444444 18px); | |
| background: radial-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0)) no-repeat, linear-gradient(#000000 8px, #444444 18px); | |
| -webkit-background-size: 10px 10px, 100% 100%; | |
| -moz-background-size: 10px 10px, 100% 100%; | |
| -o-background-size: 10px 10px, 100% 100%; | |
| background-size: 10px 10px, 100% 100%; | |
| background-position: bottom right, center; | |
| } | |
| .iphone .speaker:after { | |
| display: block; | |
| width: 62px; | |
| height: 8px; | |
| -webkit-border-radius: 6px; | |
| -moz-border-radius: 6px; | |
| -ms-border-radius: 6px; | |
| -o-border-radius: 6px; | |
| border-radius: 6px; | |
| background: -webkit-gradient(linear, 45deg, 45deg, color-stop(25%, #000000), color-stop(25%, rgba(0, 0, 0, 0)), color-stop(75%, rgba(0, 0, 0, 0)), color-stop(75%, #000000), color-stop(100%, #000000)), #888888; | |
| background: -webkit-linear-gradient(45deg, #000000 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #000000 75%, #000000), #888888; | |
| background: -moz-linear-gradient(45deg, #000000 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #000000 75%, #000000), #888888; | |
| background: -o-linear-gradient(45deg, #000000 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #000000 75%, #000000), #888888; | |
| background: -ms-linear-gradient(45deg, #000000 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #000000 75%, #000000), #888888; | |
| background: linear-gradient(45deg, #000000 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #000000 75%, #000000), #888888; | |
| -webkit-background-size: 2px 2px; | |
| -moz-background-size: 2px 2px; | |
| -o-background-size: 2px 2px; | |
| background-size: 2px 2px; | |
| -webkit-box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.75), inset 0 0 2px rgba(0, 0, 0, 0.5); | |
| -moz-box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.75), inset 0 0 2px rgba(0, 0, 0, 0.5); | |
| box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.75), inset 0 0 2px rgba(0, 0, 0, 0.5); | |
| content: ""; | |
| } | |
| .iphone .home_button { | |
| position: absolute; | |
| bottom: 20px; | |
| left: 50%; | |
| margin-left: -35px; | |
| height: 70px; | |
| width: 70px; | |
| -webkit-border-radius: 35px; | |
| -moz-border-radius: 35px; | |
| -ms-border-radius: 35px; | |
| -o-border-radius: 35px; | |
| border-radius: 35px; | |
| background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #444444), color-stop(60%, #000000)); | |
| background: -webkit-linear-gradient(left, #444444, #000000 60%); | |
| background: -moz-linear-gradient(left, #444444, #000000 60%); | |
| background: -o-linear-gradient(left, #444444, #000000 60%); | |
| background: -ms-linear-gradient(left, #444444, #000000 60%); | |
| background: linear-gradient(left, #444444, #000000 60%); | |
| border: 1px solid black; | |
| -webkit-box-shadow: 1px 1px 1px #222222, inset 0 10px 30px rgba(0, 0, 0, 0.5); | |
| -moz-box-shadow: 1px 1px 1px #222222, inset 0 10px 30px rgba(0, 0, 0, 0.5); | |
| box-shadow: 1px 1px 1px #222222, inset 0 10px 30px rgba(0, 0, 0, 0.5); | |
| } | |
| .iphone .home_button:after { | |
| position: absolute; | |
| top: 23px; | |
| left: 23px; | |
| right: 23px; | |
| bottom: 23px; | |
| border: 2px solid #888888; | |
| -webkit-box-shadow: inset 0 0 1px black, 0 0 1px black; | |
| -moz-box-shadow: inset 0 0 1px black, 0 0 1px black; | |
| box-shadow: inset 0 0 1px black, 0 0 1px black; | |
| -webkit-border-radius: 6px; | |
| -moz-border-radius: 6px; | |
| -ms-border-radius: 6px; | |
| -o-border-radius: 6px; | |
| border-radius: 6px; | |
| content: ""; | |
| } | |
| .iphone .screen { | |
| position: absolute; | |
| top: 120px; | |
| left: 50%; | |
| margin-left: -166px; | |
| width: 320px; | |
| height: 480px; | |
| padding: 5px; | |
| -webkit-border-radius: 5px; | |
| -moz-border-radius: 5px; | |
| -ms-border-radius: 5px; | |
| -o-border-radius: 5px; | |
| border-radius: 5px; | |
| background: #0a0a0a; | |
| } | |
| .iphone .stage { | |
| width: 320px; | |
| height: 480px; | |
| background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #222222), color-stop(100%, #111111)); | |
| background: -webkit-linear-gradient(#222222, #111111); | |
| background: -moz-linear-gradient(#222222, #111111); | |
| background: -o-linear-gradient(#222222, #111111); | |
| background: -ms-linear-gradient(#222222, #111111); | |
| background: linear-gradient(#222222, #111111); | |
| } | |
| .iphone .mute_rocker { | |
| position: absolute; | |
| top: 90px; | |
| right: 100%; | |
| width: 2px; | |
| height: 32px; | |
| border: 1px solid #888888; | |
| border-right: none; | |
| -moz-border-radius-topleft: 2px; | |
| -webkit-border-top-left-radius: 2px; | |
| -ms-border-top-left-radius: 2px; | |
| -o-border-top-left-radius: 2px; | |
| border-top-left-radius: 2px; | |
| -moz-border-radius-bottomleft: 2px; | |
| -webkit-border-bottom-left-radius: 2px; | |
| -ms-border-bottom-left-radius: 2px; | |
| -o-border-bottom-left-radius: 2px; | |
| border-bottom-left-radius: 2px; | |
| background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(5%, #fbfbfb), color-stop(5%, #dbdbdb), color-stop(50%, #dbdbdb), color-stop(75%, #aeaeae), color-stop(90%, #fbfbfb)); | |
| background: -webkit-linear-gradient(#fbfbfb 5%, #dbdbdb 5%, #dbdbdb 50%, #aeaeae 75%, #fbfbfb 90%); | |
| background: -moz-linear-gradient(#fbfbfb 5%, #dbdbdb 5%, #dbdbdb 50%, #aeaeae 75%, #fbfbfb 90%); | |
| background: -o-linear-gradient(#fbfbfb 5%, #dbdbdb 5%, #dbdbdb 50%, #aeaeae 75%, #fbfbfb 90%); | |
| background: -ms-linear-gradient(#fbfbfb 5%, #dbdbdb 5%, #dbdbdb 50%, #aeaeae 75%, #fbfbfb 90%); | |
| background: linear-gradient(#fbfbfb 5%, #dbdbdb 5%, #dbdbdb 50%, #aeaeae 75%, #fbfbfb 90%); | |
| } | |
| .iphone .volume { | |
| position: absolute; | |
| right: 100%; | |
| width: 2px; | |
| height: 25px; | |
| border: 1px solid #888888; | |
| border-right: none; | |
| -moz-border-radius-topleft: 2px; | |
| -webkit-border-top-left-radius: 2px; | |
| -ms-border-top-left-radius: 2px; | |
| -o-border-top-left-radius: 2px; | |
| border-top-left-radius: 2px; | |
| -moz-border-radius-bottomleft: 2px; | |
| -webkit-border-bottom-left-radius: 2px; | |
| -ms-border-bottom-left-radius: 2px; | |
| -o-border-bottom-left-radius: 2px; | |
| border-bottom-left-radius: 2px; | |
| background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dbdbdb), color-stop(15%, #eeeeee), color-stop(75%, #333333), color-stop(90%, #fbfbfb)); | |
| background: -webkit-linear-gradient(#dbdbdb, #eeeeee 15%, #333333 75%, #fbfbfb 90%); | |
| background: -moz-linear-gradient(#dbdbdb, #eeeeee 15%, #333333 75%, #fbfbfb 90%); | |
| background: -o-linear-gradient(#dbdbdb, #eeeeee 15%, #333333 75%, #fbfbfb 90%); | |
| background: -ms-linear-gradient(#dbdbdb, #eeeeee 15%, #333333 75%, #fbfbfb 90%); | |
| background: linear-gradient(#dbdbdb, #eeeeee 15%, #333333 75%, #fbfbfb 90%); | |
| } | |
| .iphone .volume.up { | |
| top: 160px; | |
| } | |
| .iphone .volume.down { | |
| top: 222px; | |
| } | |
| .iphone .sleep_wake { | |
| position: absolute; | |
| bottom: 100%; | |
| right: 70px; | |
| width: 60px; | |
| height: 3px; | |
| border: 1px solid #888888; | |
| border-bottom: none; | |
| -moz-border-radius-topleft: 2px; | |
| -webkit-border-top-left-radius: 2px; | |
| -ms-border-top-left-radius: 2px; | |
| -o-border-top-left-radius: 2px; | |
| border-top-left-radius: 2px; | |
| -moz-border-radius-topright: 2px; | |
| -webkit-border-top-right-radius: 2px; | |
| -ms-border-top-right-radius: 2px; | |
| -o-border-top-right-radius: 2px; | |
| border-top-right-radius: 2px; | |
| background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #aaaaaa), color-stop(7%, #ffffff), color-stop(15%, #aaaaaa), color-stop(70%, #dddddd), color-stop(85%, #bbbbbb), color-stop(93%, #eeeeee), color-stop(100%, #aaaaaa)); | |
| background: -webkit-linear-gradient(left, #aaaaaa, #ffffff 7%, #aaaaaa 15%, #dddddd 70%, #bbbbbb 85%, #eeeeee 93%, #aaaaaa); | |
| background: -moz-linear-gradient(left, #aaaaaa, #ffffff 7%, #aaaaaa 15%, #dddddd 70%, #bbbbbb 85%, #eeeeee 93%, #aaaaaa); | |
| background: -o-linear-gradient(left, #aaaaaa, #ffffff 7%, #aaaaaa 15%, #dddddd 70%, #bbbbbb 85%, #eeeeee 93%, #aaaaaa); | |
| background: -ms-linear-gradient(left, #aaaaaa, #ffffff 7%, #aaaaaa 15%, #dddddd 70%, #bbbbbb 85%, #eeeeee 93%, #aaaaaa); | |
| background: linear-gradient(left, #aaaaaa, #ffffff 7%, #aaaaaa 15%, #dddddd 70%, #bbbbbb 85%, #eeeeee 93%, #aaaaaa); | |
| } | |
| html > body > #codepen-footer { | |
| position: fixed !important; | |
| } | |
| </style> | |
| <style> | |
| #codepen-footer, #codepen-footer * { | |
| -webkit-box-sizing: border-box !important; | |
| -moz-box-sizing: border-box !important; | |
| box-sizing: border-box !important; | |
| } | |
| #codepen-footer { | |
| display: block !important; | |
| position: absolute !important; | |
| bottom: 0 !important; | |
| left: 0 !important; | |
| width: 100% !important; | |
| padding: 0 10px !important; | |
| margin: 0 !important; | |
| height: 30px !important; | |
| line-height: 30px !important; | |
| font-size: 12px !important; | |
| color: #eeeeee !important; | |
| background-color: #505050 !important; | |
| text-align: left !important; | |
| background: -webkit-linear-gradient(top, #505050, #383838) !important; | |
| background: -moz-linear-gradient(top, #505050, #383838) !important; | |
| background: -ms-linear-gradient(top, #505050, #383838) !important; | |
| background: -o-linear-gradient(top, #505050, #383838) !important; | |
| border-top: 1px solid black !important; | |
| border-bottom: 1px solid black !important; | |
| box-shadow: inset 0 1px 0 #6e6e6e, 0 2px 2px rgba(0, 0, 0, 0.4) !important; | |
| z-index: 300 !important; | |
| font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, sans-serif !important; | |
| letter-spacing: 0 !important; | |
| word-spacing: 0 !important; | |
| } | |
| #codepen-footer a { | |
| color: #a7a7a7 !important; | |
| text-decoration: none !important; | |
| } | |
| #codepen-footer a:hover { | |
| color: white !important; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class='iphone'> | |
| <div class='steel_band'> | |
| <div class='mute_rocker'></div> | |
| <div class='volume up'></div> | |
| <div class='volume down'></div> | |
| <div class='sleep_wake'></div> | |
| <div class='plastic_band'> | |
| <div class='glass_face'> | |
| <div class='camera'></div> | |
| <div class='speaker'></div> | |
| <div class='home_button'></div> | |
| <div class='gloss'></div> | |
| <div class='screen'> | |
| <div class='stage'></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class='iphone reflection'> | |
| <div class='steel_band'> | |
| <div class='mute_rocker'></div> | |
| <div class='volume up'></div> | |
| <div class='volume down'></div> | |
| <div class='sleep_wake'></div> | |
| <div class='plastic_band'> | |
| <div class='glass_face'> | |
| <div class='camera'></div> | |
| <div class='speaker'></div> | |
| <div class='home_button'></div> | |
| <div class='gloss'></div> | |
| <div class='screen'> | |
| <div class='stage'></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="http://code.jquery.com/jquery-latest.js"></script> | |
| <script> | |
| var img = location.hash.slice(1) || parent.location.hash.slice(1); | |
| if (img) | |
| $('.stage') | |
| .html('<img width="320" height="480">') | |
| .find('img').attr('src', img); | |
| </script> | |
| <div id="codepen-footer"> | |
| <a style="color: #f73535 !important;" href="https://codepen.wufoo.com/forms/m7x3r3/def/field14=" onclick="window.open(this.href, null, 'height=517, width=680, toolbar=0, location=0, status=1, scrollbars=1, resizable=1'); return false">Report Abuse</a> | |
| | |
| <a href="/johan/pen/iphone/5">Edit this Pen</a> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var img = location.hash.slice(1) || parent.location.hash.slice(1); | |
| if (img) | |
| $('.stage') | |
| .html('<img width="320" height="480">') | |
| .find('img').attr('src', img); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .iphone | |
| .steel_band | |
| .mute_rocker | |
| .volume.up | |
| .volume.down | |
| .sleep_wake | |
| .plastic_band | |
| .glass_face | |
| .camera | |
| .speaker | |
| .home_button | |
| .gloss | |
| .screen | |
| .stage | |
| .iphone.reflection | |
| .steel_band | |
| .mute_rocker | |
| .volume.up | |
| .volume.down | |
| .sleep_wake | |
| .plastic_band | |
| .glass_face | |
| .camera | |
| .speaker | |
| .home_button | |
| .gloss | |
| .screen | |
| .stage |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import "compass" | |
| =mask-image($background) | |
| @if $experimental-support-for-webkit and prefixed(-webkit, $background) | |
| -webkit-mask-image: -webkit($background) | |
| @if $experimental-support-for-mozilla and prefixed(-moz, $background) | |
| -box-mask-image: -moz($background) | |
| @if $experimental-support-for-opera and prefixed(-o, $background) | |
| -o-mask-image: -o($background) | |
| mask-image: $background | |
| html, body | |
| height: 100% | |
| body | |
| text-align: center | |
| padding: 50px | |
| +background(#ccc) | |
| .iphone | |
| +inline-block | |
| .iphone | |
| position: relative | |
| &:after | |
| position: absolute | |
| top: 100% | |
| width: 372px | |
| height: 372px | |
| +border-radius(50%) | |
| +background(radial-gradient(rgba(#000, 1), rgba(#000, 0))) | |
| +transform(scale(1, 0.025)) | |
| +transform-origin(0, 0) | |
| content: '' | |
| .reflection | |
| position: absolute | |
| top: 100% | |
| +transform(scaleY(-1), rotateZ(180deg)) | |
| +mask-image(linear-gradient( rgba(#000, 0) 80%, #000)) | |
| +opacity(0.5) | |
| .steel_band | |
| position: relative | |
| width: 372px | |
| height: 734px | |
| padding: 3px | |
| +background(linear-gradient(left, #dcdbda, #ebeae9)) | |
| +border-radius(60px) | |
| +box-shadow(inset 1px 0 0 #7e7c7a, inset -1px 0 1px #7e7c7a) | |
| .plastic_band | |
| width: 364px | |
| height: 726px | |
| padding: 4px | |
| +border-radius(57px) | |
| +background(#2b2b2b) | |
| +box-shadow(inset 0 0 1px rgba(#000, 0.5), 0 0 1px rgba(#000, 0.5)) | |
| .glass_face | |
| position: relative | |
| width: 364px | |
| height: 726px | |
| overflow: hidden | |
| +background(linear-gradient(#000, #090909)) | |
| +border-radius(53px) | |
| +box-shadow(-1px -1px 2px rgba(#fff, 0.15), -1px -1px 0 rgba(#000, 0.5)) | |
| .gloss | |
| position: relative | |
| z-index: 1 | |
| height: 100% | |
| width: 100% | |
| +mask-image(linear-gradient(-162deg, rgba(#000, 1) 32%, rgba(#000, 0) 32%)) | |
| +border-radius(53px) | |
| +background(linear-gradient(280deg, rgba(#fff, 0.6), rgba(#fff, 0) 70%) no-repeat) | |
| +background-size(60% 100%) | |
| background-position: top right | |
| .camera | |
| position: absolute | |
| z-index: 2 | |
| top: 50px | |
| left: 50% | |
| margin-left: -75px | |
| height: 8px | |
| width: 8px | |
| padding: 4px | |
| border: 1px solid rgba(#fff, 0.05) | |
| +border-radius(9px) | |
| +box-shadow(inset 0 3px 6px rgba(0,0,0,0.25)) | |
| +background(radial-gradient(5px 5px, #1b1b1b, #343434)) | |
| background-position: top left | |
| &:after | |
| display: block | |
| height: 8px | |
| width: 8px | |
| +border-radius(4px) | |
| +box-shadow(1px 1px 1px rgba(#fff, 0.1)) | |
| +background(radial-gradient(1px 1px, rgba(#3c2b90, 1) 25%, rgba(#3c2b90, 0.75) 50%), radial-gradient(1px 1px, rgba(#2b5d90, 0.75) 25%, rgba(#2b5d90, 0) 50%), radial-gradient(1px 1px, rgba(#2b5d90, 0.75) 25%, rgba(#2b5d90, 0) 50%), radial-gradient(#07131b 40%, #1b3d70 60%)) | |
| background-position: top left, center left, center, right center | |
| content: '' | |
| .speaker | |
| position: absolute | |
| z-index: 2 | |
| top: 50px | |
| left: 50% | |
| margin-left: -37px | |
| width: 62px | |
| height: 8px | |
| padding: 5px | |
| +border-radius(9px) | |
| +background(radial-gradient(rgba(255,255,255,0.35), rgba(255,255,255,0)) no-repeat, linear-gradient(#000 8px, #444 18px)) | |
| +background-size(10px 10px, 100% 100%) | |
| background-position: bottom right, center | |
| &:after | |
| display: block | |
| width: 62px | |
| height: 8px | |
| +border-radius(6px) | |
| +background(linear-gradient(45deg, rgba(0,0,0,1) 25%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 75%, rgba(0,0,0,1) 75%, rgba(0,0,0,1)), #888) | |
| +background-size(2px 2px) | |
| +box-shadow(inset 0 2px 3px rgba(0,0,0,0.75), inset 0 0 2px rgba(#000, 0.5)) | |
| content: '' | |
| .home_button | |
| position: absolute | |
| bottom: 20px | |
| left: 50% | |
| margin-left: -35px | |
| height: 70px | |
| width: 70px | |
| +border-radius(35px) | |
| +background(linear-gradient(left, #444, #000 60%)) | |
| border: 1px solid #000 | |
| +box-shadow(1px 1px 1px #222, inset 0 10px 30px rgba(0,0,0,0.5)) | |
| &:after | |
| position: absolute | |
| top: 23px | |
| left: 23px | |
| right: 23px | |
| bottom: 23px | |
| border: 2px solid #888 | |
| +box-shadow(inset 0 0 1px #000, 0 0 1px #000) | |
| +border-radius(6px) | |
| content: '' | |
| .screen | |
| position: absolute | |
| top: 120px | |
| left: 50% | |
| margin-left: -166px | |
| width: 320px | |
| height: 480px | |
| padding: 5px | |
| +border-radius(5px) | |
| +background(#0a0a0a) | |
| .stage | |
| width: 320px | |
| height: 480px | |
| +background(linear-gradient(#222, #111)) | |
| .mute_rocker | |
| position: absolute | |
| top: 90px | |
| right: 100% | |
| width: 2px | |
| height: 32px | |
| border: 1px solid #888 | |
| border-right: none | |
| +border-left-radius(2px) | |
| +background(linear-gradient(#fbfbfb 5%, #dbdbdb 5%, #dbdbdb 50%, #aeaeae 75%, #fbfbfb 90%)) | |
| .volume | |
| position: absolute | |
| right: 100% | |
| width: 2px | |
| height: 25px | |
| border: 1px solid #888 | |
| border-right: none | |
| +border-left-radius(2px) | |
| +background(linear-gradient(#dbdbdb, #eee 15%, #333 75%, #fbfbfb 90%)) | |
| &.up | |
| top: 160px | |
| &.down | |
| top: 222px | |
| .sleep_wake | |
| position: absolute | |
| bottom: 100% | |
| right: 70px | |
| width: 60px | |
| height: 3px | |
| border: 1px solid #888 | |
| border-bottom: none | |
| +border-top-radius(2px) | |
| +background(linear-gradient(left, #aaa, #fff 7%, #aaa 15%, #ddd 70%, #bbb 85%, #eee 93%, #aaa)) | |
| html > body > #codepen-footer | |
| position: fixed !important |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment