Skip to content
Responsive, lightweight CSS & SVG device shapes
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css devices
svg devices
LICENSE
README.md
css-devices.png

README.md

CSS & SVG Device Shapes

This a collection of responsive, lightweight CSS & SVG device shapes. The goal here was to create responsive device shapes with minimal markup and to keep filesize as small as possible. Full blog post about it here. I also wanted to embed html content within the device screens so CSS is easier to work with than SVG for that. It's as simple as doing this:

<div class="desktop">
   <div class="content">
       <!-- html content goes here e.g. youtube embedded iframe -->
   </div>
</div>

Demo of the end result here: https://jsfiddle.net/my1bakL7/


Screenshot of all 4 devices

CSS & SVG Device Shapes

You can’t perform that action at this time.