Make CSS Only Laptop Mockup – laptop.css

laptop.css is pure css based library to display images in laptop mockup. usefull for making online presentation. there are three sizes which you can use to display small and medium and large laptop mockup screens. Use laptop.css to automatically wrap an html img with an ASCII art laptop.

Make CSS Only Laptop Mockup - laptop.css

Libraries

Import the stylesheet laptop.css into the HTML.

<link href="laptop.css" rel="stylesheet" />

HTML

Wrap your design to be showcased in the CSS laptop.

<div class="laptop">
    <img src="https://media3.giphy.com/media/4oCKJV82qxnjO/giphy.gif">
</div>

laptop.css provides three class names to use on divs

  • laptop-sm
  • laptop
  • laptop-lg

See live demo and download source code.

DEMO | DOWNLOAD

This awesome script developed by jjkaufman, Visit their official github repository for more information and follow for future updates.


Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.