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

 

                                 

Views: 66

Reply to This

Replies to This Discussion

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
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
Nice. It works ok on Firefox. Particularly nice to draw attention to a link under an advertisement.
Yeah, shadow doesn't work in IE, unfortunately.
Best,
Jen

RSS

Members

Support & Tips Forum

© 2020   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips