Add Shadow to CSS Block

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
musicscore
Power Poster
Power Poster
Posts: 496
Joined: Wed Jan 25, 2006 11:53 am

Add Shadow to CSS Block

Post by musicscore »

Hey,

I want to add shadow (using CSS) to a block, created in CSS.
I use this CSS code :

#info {
   display: block;
   width: 150px;
   border-top: 20px solid #feecde;
   border-right: 1px solid #fccba8;
   border-bottom: 1px solid #fccba8;
   border-left: 1px solid #fccba8;
   margin: 10px;
   padding: 10px;
   filter:shadow(color=#333333, direction=135);

   background-image:url(images/layout/aktueel_bg.gif);
   background-repeat: repeat-y;
}


Can someone tell me whats wrong with this code because there is no shadow

Please help

Musicscore
User avatar
Nullig
Power Poster
Power Poster
Posts: 2380
Joined: Fri Feb 02, 2007 4:31 pm

Re: Add Shadow to CSS Block

Post by Nullig »

This line:

filter:shadow(color=#333333, direction=135);

will only work with IE.

You need to do something like this to achieve a cross-browser shadow.

Code: Select all

<div class="infowrapper" style="position: relative; width: 120px; top:-90px; left: 40px;">
  <div class="shadowbox" style="position: absolute; left: 10px; top: 10px;
    width: 120px; height: 84px; background-color: black;
    filter: alpha(opacity=30); -moz-opacity: 0.3; opacity: 0.3;"> </div>
  <div class="infobox" style="position: relative; height: 80px;
    background-color: #FFFFDD;"> I am flying above the text and dropping a shadow.</div>
</div>
Nullig
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: Add Shadow to CSS Block

Post by Dr.CSS »

Have you seen this...

http://multiintech.com/

no images...
User avatar
Nullig
Power Poster
Power Poster
Posts: 2380
Joined: Fri Feb 02, 2007 4:31 pm

Re: Add Shadow to CSS Block

Post by Nullig »

@mark

The left-hand side of the shadow at the bottom and the right-hand side at the top aren't indented, as a shadow would be.

Nullig
Post Reply

Return to “Layout and Design (CSS & HTML)”