In this project, I created some fun and simple device mockups made with plain old CSS. Devices include a desktop browser, a tablet, and a mobile phone. They are all created using a single CSS element.
The desktop browser features a close button, minimise button, expand button, and a url bar. Url's are captured and displayed using the data-url attribute in the markup and CSS. The demo uses a 13:8 aspect ratio image, but you are free to use whatever size you want. The browser takes up 100% width, unless a maximum width is specified. Example usage:
<div class="css-device css-device--browser" data-url="http://callmenick.com">
<img class="css-device__image" src="img/desktop.svg">
</div>The tablet mockup features a home button (like that of the iPad), and a camera pinhole. The demo uses a 4:3 aspect ratio image, but you are free to use whatever size you want. The tablet mockup occupies a maximum width of 360px, but this can be changed easily in the media queries. If you're using Sass, then it's easily editable in the Sass files. Just change up the scaling factor for bigger media queries. Example usage:
<div class="css-device css-device--tablet">
<img class="css-device__image" src="img/tablet.svg">
</div>The mobile mockup features a home button (like that of the iPhone), and two volume buttons on the left. The demo uses a 16:9 aspect ratio image, but you are free to use whatever size you want. The mobile mockup occupies a maximum width of 240px, but this can be changed easily in the media queries. If you're using Sass, then it's easily editable in the Sass files. Just change up the scaling factor for bigger media queries. Example usage:
<div class="css-device css-device--mobile">
<img class="css-device__image" src="img/mobile.svg">
</div>You can check out the CSS devices in action right here.
Licensed under the MIT license.
Copyright 2014, Call Me Nick.