JenSocial: Social Web Directory and Ning Tips

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

Mainpage Dropdown Shadows - Anybody knows it how?

Hi there,

I wish to learn how to add a dropdown shadows on the mainpage, just like here at jensocial. Anybody knows it how??? Any help is much appreciated thanks :D

0 members favorited this

▶ Reply to This

Replies to This Discussion

Permalink Reply by JenSocial on October 4, 2010 at 7:39pm

Hi,
Unfortunately there isn't a way to add a shadow with CSS, with cross browser compatibility. I created mine with a special image using Adobe Photoshop. The best way to accomplish a shadow is with a background image.

You can add a nice shadow to text boxes, but it takes wrapping your text box content in a few DIVs:

.blur{
background-color: #ccc; /*shadow color*/
color: inherit;
margin-left: 4px;
margin-top: 4px;
}

.shadow,
.content{
position: relative;
bottom: 2px;
right: 2px;
}

.shadow{
background-color: #666; /*shadow color*/
color: inherit;
}

.content{
background-color: #fff; /*background color of content*/
color: #000; /*text color of content*/
border: 1px solid #000; /*border color*/
padding: .5em 2ex;
}

/* Add Content to center of 3 divs like so:
<div class="blur">
<div class="shadow">
<div class="content">Content Goes Here.</div></div></div> */

Best Regards,
Jen

▶ Reply

Permalink Reply by irgeorgepecore on October 4, 2010 at 11:08pm

Thanks so much jen. I've tried a lot but it doesn't work. Maybe because of IE browser compatibility. I have seen some instruction which is different from http://thesishacker.com/ (thesishacker) but indeed a bad result. I will try to follow your instruction later on. Thanks much in deed! :-))) :D

Best,
irgeorge