JenSocial: Social Web Directory and Ning Tips

Social Web Directory :: Social Network Directory :: Ning Tips and Ning Support

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

1 member favorited this

▶ 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?

▶ Reply

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)"
}