Sweet Polaroid Effect - Make Photo or Image Look Like a Polaroid Using CSS

This tip will show you how to make your Photos look like a Polaroid, with pure CSS. The effect is clean and subtle. If you want yours to stand out more, change the border color from #dadada to a darker color.

 

I've written the code for a Ning site, but will also show others how to apply to any image.

 

Instructions:

  • Edit CSS below, and add to your Advanced CSS via: My Network/Settings/Appearance.
  • Warning Ning Networks: I have set the maximum width of the images: 95%, for those images uploaded that fill full width of your individual photo pages. Make sure none of your images exceed the column area. If they do, change the 95% to less. You only need to test an image that fills the entire area.
  • Non-Ning Networks: To apply this effect to any image, change div#xg.xg_widget_photo div#photo_page_body a.next_photo_link img TO img, or to your image CSS identifier.

 

CSS:

/* Sweet Polaroid Photo Effect Ning Photo Page */
div#xg.xg_widget_photo div#photo_page_body a.next_photo_link img {
max-width:95%;
border: 1px solid #dadada; /* border color */
padding: 15px 15px 70px 15px;
margin-bottom: 15px; /* margin below image */
/* Next lines are a gradient color to give the Polaroid depth. You can remove these lines if you want all white. */
/* Opera 11.10+ */
background: -o-linear-gradient(top, rgba(255,255,255,1), rgba(246,245,245,1));
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, rgba(255,255,255,1), rgba(246,245,245,1));
/* Chrome 7+ & Safari 5.03+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255,255,255,1)), color-stop(1, rgba(246,245,245,1)));
/* IE5.5 - IE7 */
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FFFFFFFF,EndColorStr=#FFF6F5F5);
/* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FFFFFFFF,EndColorStr=#FFF6F5F5)"
}

Enjoy!
Jen

Tags: Add Polaroid Effect to Photo, CSS, image, image border, image frame, photo, photo border, photo frame, photo like polaroid, polaroid, More…polaroid effect pure css, polaroid with CSS, polaroid with css

Views: 370

▶ Reply to This

Replies to This Discussion

Permalink Reply by Abdullah Khamis on October 13, 2012 at 11:04pm

hi JenSocial
This is very nice
Can you use video?

Permalink Reply by JenSocial on October 13, 2012 at 11:31pm

Hi Abdullah,

Nice to hear you like it. I think there are too many variables on how videos are uploaded, to add effect around the video frame. And it could be, I'm just not capturing the area I want. What I found is a selector that will add the Polaroid effect around video DIV (video, description below, and share button). It's actually quite nice looking.

Try this for Video DIV:

/* Sweet Polaroid Photo Effect Ning Video */
.xg_widget_video_video_show div.vid_container {
max-width:95%;
border: 1px solid #dadada; /* border color */
padding: 15px 15px 70px 15px;
margin-bottom: 15px; /* margin below image */
/* Next lines are a gradient color to give the Polaroid depth. You can remove these lines if you want all white. */
/* Opera 11.10+ */
background: -o-linear-gradient(top, rgba(255,255,255,1), rgba(246,245,245,1));
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, rgba(255,255,255,1), rgba(246,245,245,1));
/* Chrome 7+ & Safari 5.03+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255,255,255,1)), color-stop(1, rgba(246,245,245,1)));
/* IE5.5 - IE7 */
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FFFFFFFF,EndColorStr=#FFF6F5F5);
/* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FFFFFFFF,EndColorStr=#FFF6F5F5)"
}

Best Regards,
Jen

Permalink Reply by Abdullah Khamis on October 14, 2012 at 1:54pm

thank

Permalink Reply by Abidin † Rosas Negras † on October 14, 2012 at 2:01am

thank you very much

Permalink Reply by JenSocial on October 14, 2012 at 1:24pm

You are welcome, very much. =)

Permalink Reply by Glenn Lynch on October 14, 2012 at 1:47pm

THIS IS AMAZING!!!!

Permalink Reply by JenSocial on October 14, 2012 at 1:58pm

LOL, thanks. It's just a nice little tip to add an interesting look to photo pages.

;-)

RSS

© 2013   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips