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

• ▶ Reply

Permalink Reply by Carny Town on October 5, 2010 at 10:12am

Nice. It works ok on Firefox. Particularly nice to draw attention to a link under an advertisement.

• ▶ Reply

Permalink Reply by JenSocial on October 5, 2010 at 1:48pm

Yeah, shadow doesn't work in IE, unfortunately.
Best,
Jen

• ▶ Reply