Polaroid Images

Polaroid Images

We thought we'd start off with something just about every site could use - a polaroid image frame. It's a fairly widely documented effect of CSS3, but nevertheless we're bringing it to you.

First off, this is what the final result will look like.

giraffe200.jpg

A lovely Giraffe

There are two ways of adding this to your site: either to every image on your site, or only to those wrapped in a specific div class. We're going with the second. As for where to put the CSS, if you have a custom theme you can add it in there, otherwise you can just put it in a CSS module on each page you have the image. This is the same for just about every entry we'll post, so take note, because we won't be writing it with every single time.

So, let's begin. We'll start off with the page content and the div.

[[div class="polaroid-image"]]
[[image :first width="200px"]]
[[div class="polaroid-caption"]]
A lovely Giraffe 
[[/div]]
[[/div]]

Now to define the CSS. First we'll add the image frame. You can fiddle around with the border widths to get the effect you think looks best. You also need to define the width of the image, otherwise your background will fill the width of the entire page (if you plan on adding the frame to several images of different widths, adding a float class with left or right will mean you don't have to define the width of the image).

.polaroid-image {
        width: 200px;
        border: 10px solid white;
        border-bottom: 20px solid white;
        background-color: white;
}

Next we’ll position the caption.

.polaroid-caption {
        padding-top: 5px;
        text-align: center;
}

Then to add to the effect, we'll add a slight rotation to the image using transforms. At the moment, this will only work in browsers running either webkit (Safari, Chrome) or mozilla (Firefox).

.polaroid-image {
        border: 10px solid white;
        border-bottom: 20px solid white;
        background-color: white;
        -webkit-transform: rotate(3deg);
        -moz-transform: rotate(3deg);
}

Finally we'll give the image a shadow to give it some depth.

.polaroid-image  {
    border: 10px solid #fff;
    border-bottom: 20px solid #fff;
    background-color: white;
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
}

If you don't want to have a caption on your image, you can remove the .polaroid-caption div and increase the width of the border-bottom: to achieve the same effect. This would result in code something like this…

.polaroid-image {
    border: 10px solid white;
    border-bottom: 55px solid white;
    background-color: white;
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
    margin: 10px;
    float: right;
}

And there you have it; our first real post and a cool Polaroid image frame for your site. Check out the next post, which adds some cool animations to your polaroid image.
giraffe200.jpg

A lovely Giraffe

This post was inspired by an article at Inspect Element, http://inspectelement.com/tutorials/simulate-realism-with-css3/.

Enjoy the article? Tweet it!

tags — css image polaroid

Discussion - No comments yet…0 comments

Add a New Comment
or Sign in as Wikidot user
(will not be published)
- +
Site design © BMC WebDesign, 2011. All rights reserved. All tutorials on this site are free for commerical use, subject to conditions outlined in the disclaimer.