iPhone, iPad, Macbook and iMac mockups on CSS. Smoothly transform from one to another. Minimum HTML. Pure CSS3. Webkit only.
A Pen by Arsen Zbidnyakov on CodePen.
Created
March 31, 2014 09:25
-
-
Save ArsenArts/9888646 to your computer and use it in GitHub Desktop.
A Pen by Arsen Zbidnyakov.
This file contains hidden or 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
| <div id="device"> | |
| <div id="screen"></div> | |
| <div id="mac"></div> | |
| </div> |
This file contains hidden or 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
| /* | |
| 3 lines of HTML | |
| 3kB of CSS | |
| Try Full Page for better experience. | |
| */ |
This file contains hidden or 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
| #device { | |
| position: absolute; | |
| margin: auto; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| width: 240px; | |
| height: 426px; | |
| padding: 76px 20px; | |
| background: #eee; | |
| border: 2px solid #aaa; | |
| border-radius: 30px; | |
| z-index: 300; | |
| -webkit-transition: all 1s ease-in-out; | |
| -webkit-animation: devices 14s infinite; | |
| } | |
| @-webkit-keyframes devices { | |
| /* iPhone */ | |
| 0%, 20%, 100% { -webkit-transform: rotate(0deg); width: 240px; height: 426px; } | |
| /* iPad */ | |
| 25%, 45% { -webkit-transform: rotate(-90deg); width: 440px; height: 586px; | |
| padding: 76px 20px; background: #eee; border: 2px solid #aaa; border-radius: 30px; } | |
| /* Macbook */ | |
| 50%, 70% { width: 500px; height: 800px; padding: 20px; background: #222; border: 0; | |
| border-radius: 0 10px 10px 0; } | |
| /* iMac */ | |
| 75%, 95% { -webkit-transform: rotate(-90deg); width: 600px; height: 1080px; | |
| padding: 40px; background: #222; border: 0; border-radius: 0 30px 30px 0; } | |
| } | |
| #screen { | |
| width: 100%; | |
| height: 100%; | |
| overflow: hidden; | |
| color: #aaa; | |
| background: #555; | |
| border: 2px solid #aaa; | |
| z-index: 300; | |
| } | |
| /* speaker */ | |
| #device:before { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| right: 0; | |
| margin: -25px auto 0; | |
| width: 40px; | |
| height: 4px; | |
| background: #aaa; | |
| border: 4px solid #ddd; | |
| border-radius: 30px; | |
| z-index: 300; | |
| -webkit-animation: speaker 14s infinite; | |
| } | |
| @-webkit-keyframes speaker { | |
| 0%, 20%, 100% { opacity: 1; } | |
| 25%, 95% { opacity: 0; } | |
| } | |
| /* button */ | |
| #screen:before { | |
| content: ''; | |
| position: absolute; | |
| left: 50%; | |
| bottom: 14px; | |
| margin-left: -20px; | |
| height: 40px; | |
| width: 40px; | |
| background: #ddd; | |
| border: 2px solid #aaa; | |
| border-radius: 50%; | |
| -webkit-animation: btn-cam 14s infinite; | |
| } | |
| @-webkit-keyframes btn-cam { | |
| 0%, 45%, 100% { opacity: 1; } | |
| 50%, 95% { opacity: 0; } | |
| } | |
| /* camera */ | |
| #screen:after { | |
| content: ''; | |
| position: absolute; | |
| top: 30px; | |
| left: 50%; | |
| width: 6px; | |
| height: 6px; | |
| margin-left: -5px; | |
| background: #aaa; | |
| border: 2px solid #ddd; | |
| border-radius: 50%; | |
| -webkit-animation: btn-cam 14s infinite; | |
| } | |
| /* touchpad */ | |
| #mac:after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 50%; | |
| background: #aaa; | |
| z-index: 300; | |
| -webkit-animation: touchpad 14s infinite; | |
| } | |
| @-webkit-keyframes touchpad { | |
| 0%, 45%, 100% { opacity: 0; } | |
| 50%, 70% { opacity: 1; border-radius: 8px 0 0 8px; width: 14px; height: 120px; left: -14px; margin-bottom: -60px; } | |
| 75%, 95% { opacity: 1; border-radius: 50%; width: 60px; height: 60px; left: -90px; margin-bottom: -30px;} | |
| } | |
| /* keyboard */ | |
| #mac:before { | |
| content: ''; | |
| position: absolute; | |
| left: -30px; | |
| bottom: -80px; | |
| width: 30px; | |
| height: 100%; | |
| padding: 80px 0; | |
| background: #ddd; | |
| border-radius: 20px 0 0 20px; | |
| z-index: 300; | |
| -webkit-animation: keyboard 14s infinite; | |
| } | |
| @-webkit-keyframes keyboard { | |
| 0%, 45%, 100% { opacity: 0; } | |
| 50%, 70% { opacity: 1; width: 30px; left: -30px; padding: 80px 0; bottom: -80px; } | |
| 75%, 95% { opacity: 1; width: 120px; left: -120px; padding: 0; bottom: 0; } | |
| } | |
| /* stand */ | |
| #device:after { | |
| content: ''; | |
| position: absolute; | |
| left: -280px; | |
| bottom: 50%; | |
| width: 0; | |
| height: 250px; | |
| margin-bottom: -145px; | |
| border-right: 200px solid #ccc; | |
| border-left: 30px solid #ddd; | |
| border-bottom: 20px solid transparent; | |
| border-top: 20px solid transparent; | |
| border-radius: 15px; | |
| z-index: 100; | |
| -webkit-animation: stand 14s infinite; | |
| } | |
| @-webkit-keyframes stand { | |
| 0%, 45%, 70% { opacity: 0; border-right: 0; } | |
| 75%, 95% { opacity: 1; border-right: 200px solid #ccc; } | |
| 100% { opacity: 0; } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment