Elements Design: Free Blurred Backgrounds
UI: Polaris UI Kit PSD

Mockup & Code: Free Polaroid HTML/CSS and PSD Mockup


From Wikipedia: In manufacturing and design, a mockup, or mock-up, is a scale or full-size model of a design or device, used for teaching, demonstration, design evaluation, promotion, and other purposes. A mockup is a prototype if it provides at least part of the functionality of a system and enables testing of a design. Mock-ups are used by designers mainly to acquire feedback from users. Mock-ups address the idea captured in a popular engineering one-liner: You can fix it now on the drafting board with an eraser or you can fix it later on the construction site with a sledge hammer.

The purpose of this article is to create a layout in polaroid style;

The basic element we have:

Resource: Free Polaroid PSD Mockup and HTML/CSS

This Polaroid Mockup contains an easy to edit PSD file with cross processing and vignette effects. The file also includes 3 wood grain background images.


base element in html:
  <img src="" width="348" height="349" alt="Poker de rosas">
  <p>Poker de rosas</p>

in css
.polaroid-nav {
    display: block;
    float: left;
    left: 0;
    margin: 5px 0;
    position: relative;
    padding-bottom: 10px;
    padding-top: 10px;
.polaroid-nav > li {
    background: url( '../images/polaroid-box.png' ) no-repeat 0 0;
    width: 391px;
    height: 487px;
    display: block;
    float: left;
    margin-top: 10px;
.polaroid-nav > li > img {
    background: transparent;
    width: 348px;
    height: 349px;
    display: block;
    float: left;
    margin-left: 20px;
    margin-top: 57px;
    overflow: hidden;
.polaroid-nav > li > p {
    background: none repeat scroll 0 0 transparent;
    color: #333333;
    display: block;
    float: right;
    font-family: 'Petit Formal Script', cursive;
    font-size: 24px;
    font-weight: normal;
    margin-right: 30px;
    margin-top: 20px;

and final result:

Resource: Free Polaroid PSD Mockup and HTML/CSS

Hope you`d like it and share your feedback in below comments!

download html
download psd

Tags: polaroid template mockup mock-up html css layout portfolio comments design layout interface

Leave a Comment

No Comment

© Creative3x Ltd.