Since this is my third blogger tutorial, I would like to know whether my previous tutorials have helped you in any way at all, if it has then it is my pleasure.Please dont be shy to send me queries,or ask some info or help you with any problem.
Also you will need the font so add the following piece of code after head tag.
To use your CSS Polaroid effect simply add the attribute
See the Example below:
Now to get back to the Polaroid effect, as you know there are already many tutorials on Polaroid boxes, but i will also show you how to add an animated caption.
- Well to start off, go to the Edit HTML page and add the following CSS code before ]]></b:skin> section the document.
td.pol{
background-color: #F2F5ED;
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .25);
padding: 20px 20px 25px 20px;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-webkit-transform: rotate(-6deg);
-moz-transform: rotate(-6deg);
border-radius: 1px 3px 2px 4px;
border: 1px solid whiteSmoke;
box-shadow: 0px 0px 10px rgba(0, 0, 0, .75);
}
td.pol{
border-radius: 2px 3px 2px 4px;
border: 1px solid whiteSmoke;
background-color: #F2F5ED;
padding: 20px 20px 25px 20px;
text-align: center;
box-shadow: 0px 0px 10px rgba(0,0,0,.25);
-webkit-box-shadow:0px 0px 10px rgba(0,0,0,.25);
transition:all .3s ease-out;
-webkit-transition:all .5s ease-out;
-moz-transition:all .5s ease-out;
-webkit-transform:rotate(-6deg);
-moz-transform:rotate(-6deg);
}
td.pol:hover{
box-shadow:0px 0px 15px rgba(2, 2,2,.5);
-webkit-shadow:0px 0px 15px rgba(2,2,2,.5);
-webkit-transform:rotate(-2deg);
-moz-transform:rotate(-2deg);
-webkit-transform:scale(1.2,1.2);
-moz-transform:scale(1.2,1.2);
}
p.cap1
{
font-family: 'Special Elite', arial, serif;
color: silver;
font-size: 12px;
-webkit-transition: all .3s;
-moz-transition:all .3s;
text-shadow: 0px 0px 1.5px rgba(0, 0, 0, 0.5);
-webkit-transform: rotate(90deg);
bottom: 20px;
position: absolute;
left: -20px;}
.ff p:hover{color:black;
font-weight:normal;
text-shadow: 0px 0px 1.5px rgba(0, 0, 0, 0.2)}
p.cap2{
z-index:3;
color: silver;
font-size: 18px;
-webkit-transition: all .3s;
-moz-transition:all .3s;
text-shadow: 0px 0px 1.5px rgba(0, 0, 0, 0.5);
font-family: 'The Girl Next Door', arial, serif;
vertical-align: text-bottom;}
Also you will need the font so add the following piece of code after head tag.
<link href='http://fonts.googleapis.com/css?family=Special+Elite&subset=latin' rel='stylesheet' type='text/css'/> <link href='http://fonts.googleapis.com/css?family=The+Girl+Next+Door&subset=latin' rel='stylesheet' type='text/css'/>
- Now that the coding part is done, its time to for a demo.
To use your CSS Polaroid effect simply add the attribute
class='pol' to the <td> tag inside a table.
The advantage of this is that you can add the Polaroid effect to
a photo of any size without the hassle of awkwardly sized
images due to preset sizes.
images due to preset sizes.
For the two captions use the selector for the Date as
class='cap1'
and for the text caption as
class='cap2'
See the Example below:
<table> <td class='pol'>
<img src='http://ih1.redbubble.net/work.4976985.1.flat,550x550,075,f.old-analog-nostalgia.jpg'/>
<p class='cap1'>20/04/89</p> <p class='cap2'>The backyard mobike pic </p>
</td> </table>
 20/04/89 The backyard mobike pic |
So pretty neat right, feel free to use it and ask me if you have any problems.
Post a Comment