Grains Of Sand Web Design, CSS Demos & HTML5 Templates by tupence

CSS3 Demos - Polaroid Effect On Images

Give plain images a Polaroid effect using CSS3 figure, figcaption, gradient, box-shadow and transform.

What We're Aiming For

Red mushroom
Pretty red mushroom
Rainbow near Keswick
Rainbow near Keswick
An old tree
Nice old tree

Step By Step

Step One
Add the images using figure and figcaption and place them in a line

HTML - note this is the same for each step
  • <div id="polaroid"> <!--place the everything inside a div and give it an id or class for styling-->
  • <!--Image One-->
  • <figure> <!--use figure to contain each image and caption-->
  • <img src="assets/polaroid01.jpg" width="200" height="200" alt="Red mushroom" /> <!--the image-->
  • <figcaption>Pretty red mushroom</figcaption> <!--the caption that appears below the image-->
  • </figure>
  • <!--Image Two-->
  • <figure>
  • <img src="assets/polaroid02.jpg" width="200" height="200" alt="Rainbow near Keswick" />
  • <figcaption>Rainbow near Keswick</figcaption>
  • </figure>
  • <!--Image Three-->
  • <figure>
  • <img src="assets/polaroid03.jpg" width="200" height="200" alt="An old tree" />
  • <figcaption>Nice old tree</figcaption>
  • </figure>
  • </div> <!--end polaroid-->
CSS FOR THIS STEP
  • /***Because older browsers may not recognise, and therefore not know how to display, HTML5 elements we need add instructions to display them as block elemets***/
  • figure, figcaption{ /*add any other html5 elements you use*/
  • display:block;
  • }
  • /***Now style the containing div that we gave the id 'polaroid'***/
  • #polaroid{
  • padding:20px 10px;
  • /*setting a width and adding overflow:hidden will clear the floats we're going to apply to figure*/
  • width:100%;
  • overflow:hidden;
  • }
  • /***Position the figures containing the images and captions***/
  • #polaroid figure{
  • float:left; /*places the images in a horizontal line*/
  • position:relative; /*allows precise positioning of the tape in step 5- see support section below for more info*/
  • width:200px; /width of the images*/
  • margin:10px 20px; /*space between the images*/
  • }

Result

Red mushroom
Pretty red mushroom
Rainbow near Keswick
Rainbow near Keswick
An old tree
Nice old tree

Step Two
Style the Polaroid frames around the images

CSS FOR THIS STEP
  • #polaroid figure{
  • padding: 6px 8px 10px 8px; /*size of the frame*/
  • /*give the frame's background colour a gradient*/
  • background: #eee6d8; /*fallback colour for browsers that don't support gradients*/
  • background: -webkit-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
  • background: -moz-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
  • background: -o-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
  • background: -ms-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
  • background: linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
  • /*give the Polaroids a small drop shadow*/
  • -webkit-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
  • -moz-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
  • box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
  • }

Result

Red mushroom
Pretty red mushroom
Rainbow near Keswick
Rainbow near Keswick
An old tree
Nice old tree

Step Three
Rotate the Polaroids

CSS FOR THIS STEP
  • /***Rotate the images 1 degrees anti-clockwise***/
  • #polaroid figure{
  • -webkit-transform:rotate(-1deg);
  • -moz-transform: rotate(-1deg);
  • -o-transform: rotate(-1deg);
  • -ms-transform: rotate(-1deg);
  • transform: rotate(-1deg);
  • -webkit-backface-visibility:hidden; /*prevent rotated text in the caption being jagged in Chrome and Safari*/
    }
  • /***Rotate each even numbered image 2 degrees clockwise***/
  • #polaroid figure:nth-child(even) { /*see support section below for more info on nth-child*/
  • -webkit-transform:rotate(2deg);
  • -moz-transform: rotate(2deg);
  • -o-transform: rotate(2deg);
  • -ms-transform: rotate(2deg);
  • transform: rotate(2deg);
  • /*because the image is rotated the opposite way, the drop-shadow needs moving to the other side of the image*/
  • -webkit-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
  • -moz-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
  • box-shadow: -4px 4px 8px -4px rgba(0, 0, 0, .75);
  • }

Result

Red mushroom
Pretty red mushroom
Rainbow near Keswick
Rainbow near Keswick
An old tree
Nice old tree

Step Four
Style the caption to make it look like a hand written note

CSS FOR THIS STEP

Result

Red mushroom
Pretty red mushroom
Rainbow near Keswick
Rainbow near Keswick
An old tree
Nice old tree

Step Five
Add sticky tape to the Polaroids - see the support section below to more info on creating a sticky tape effect

CSS FOR THIS STEP
  • figure:before { /*see the support section below to more info on using the :before psuedo element*/
  • content: '';
  • display: block;
  • position: absolute;
  • left:5px; /*postion from the left side of the frame (positive value move the tape right, negative moves it left)*/
  • top: -15px; /*position from the top of the frame (positive move it above the frame, negative below)*/
  • width: 75px; /*width of the tape*/
  • height: 25px; /*height of the tape*/
  • background-color: rgba(222,220,198,0.7); /*colour of the tape, use rgba to make it slightly transparent*/
  • /*rotate the tape 12 degrees anti-clockwise*/
  • -webkit-transform: rotate(-12deg);
  • -moz-transform: rotate(-12deg);
  • -o-transform: rotate(-12deg);
  • -ms-transform: rotate(-12deg);
  • }
  • /**The tape for the even numbered images needs to be rotated the opposite way, as the images are, and positioned on the other side of the frame, I've also changed the width slightly**/
  • figure:nth-child(even):before {
  • left:150px;
  • top: -15px;
  • width: 55px;
  • height: 25px;
  • -webkit-transform: rotate(12deg);
  • -moz-transform: rotate(12deg);
  • -o-transform: rotate(12deg);
  • -ms-transform: rotate(12deg);
  • }

Result

Red mushroom
Pretty red mushroom
Rainbow near Keswick
Rainbow near Keswick
An old tree
Nice old tree

Full Code For You To Copy And Paste

HTML
  • <div id="polaroid">
    <figure>
    <img src="assets/polaroid01.jpg" width="200" height="200" alt="Red mushroom" />
    <figcaption>Pretty red mushroom</figcaption>
    </figure>
    <figure>
    <img src="assets/polaroid02.jpg" width="200" height="200" alt="Rainbow near Keswick" />
    <figcaption>Rainbow near Keswick</figcaption>
    </figure>
    <figure>
    <img src="assets/polaroid03.jpg" width="200" height="200" alt="An old tree" />
    <figcaption>Nice old tree</figcaption>
    </figure>
    </div><!--end polaroid-->
CSS
  • figure, figcaption {
  • display: block;
  • }
  • #polaroid{
  • width:100%;
  • overflow:hidden;
  • padding:20px 10px;
  • }
  • #polaroid figure{
  • float:left;
  • position:relative;
  • width:200px;
  • margin:10px 20px;
  • padding: 6px 8px 10px 8px;
  • -webkit-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
  • -moz-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
  • box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
  • background: #eee6d8;
  • background: -webkit-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
  • background: -moz-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
  • background: -o-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
  • background: -ms-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
  • background: linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
  • -webkit-transform:rotate(-1deg);
  • -moz-transform: rotate(-1deg);
  • -o-transform: rotate(-1deg);
  • -ms-transform: rotate(-1deg);
  • transform: rotate(-1deg);
  • -webkit-backface-visibility:hidden; /*prevent rotated text being jagged in Chrome and Safari*/
  • }
  • #polaroid figure:nth-child(even) {
  • -webkit-transform:rotate(2deg);
  • -moz-transform: rotate(2deg);
  • -o-transform: rotate(2deg);
  • -ms-transform: rotate(2deg);
  • transform: rotate(2deg);
  • -webkit-backface-visibility:hidden; /*prevent rotated text being jagged in Chrome and Safari*/
  • -webkit-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
  • -moz-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
  • box-shadow: -4px 4px 8px -4px rgba(0, 0, 0, .75);
  • }
  • #polaroid figure:before {
  • content: '';
  • display: block;
  • position: absolute;
  • left:5px;
  • top: -15px;
  • width: 75px;
  • height: 25px;
  • background-color: rgba(222,220,198,0.7);
  • -webkit-transform: rotate(-12deg);
  • -moz-transform: rotate(-12deg);
  • -o-transform: rotate(-12deg);
  • -ms-transform: rotate(-12deg);
  • }
  • #polaroid figure:nth-child(even):before {
  • left:150px;
  • top: -15px;
  • width: 55px;
  • height: 25px;
  • -webkit-transform: rotate(12deg);
  • -moz-transform: rotate(12deg);
  • -o-transform: rotate(12deg);
  • -ms-transform: rotate(12deg);
  • }
  • #polaroid figcaption{
  • text-align:center;
  • font-family: 'Reenie Beanie', cursive; /*Reenie Beanie is available through Google Webfonts http://code.google.com/webfonts/specimen/Reenie+Beanie*/
  • font-size:1.3em;
  • color:#454f40;
  • letter-spacing:0.09em;
  • }
  • /**IE Hacks - see http://css3pie.com/ for more info on how to use CS3Pie and to download the latest version**/
  • #polaroid figure{
  • -pie-background: linear-gradient(#ede1c9, #fef8e2 20%, #f2ebde 60%);
  • behavior: url(assets/pie/PIE.htc);
  • position:relative; /*required to make PIE work*/
  • padding-top:10px\9;
  • padding-right:10px\9;
  • }

Support

Explanations Of The CSS3 Used

Postioning

The demo uses postition:absolute together with position:relative, so here's a brief explanation...
position:relative -- lets you position an object relative to its normal position, using top, bottom, left and right
position:absolute -- removes an object from the normal flow and positions it exactly where you say on the page
position:relative with position:absolute -- lets you position a child element inside its parent. If you don't first use position:relative on the parent element, the absolutely positioned child will move outside the parent.

See a further explanation and example of using relative and absolute positioning together.

More CSS3 Demos This Way