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

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

Advertisement

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.


Implements

base element in html:
<li>
  <img src="http://farm9.staticflickr.com/8220/8308366036_db46640325.jpg" width="348" height="349" alt="Poker de rosas">
  <p>Poker de rosas</p>
</li>

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!




demo
download html
download psd

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

Leave a Comment

No Comment

© Creative3x Ltd.