2 replies [Last post]
Wouthor
Offline
newbie
the Netherlands
Last seen: 16 years 36 weeks ago
the Netherlands
Joined: 2003-11-26
Posts: 7
Points: 0

hi people,

What is the best way to get a reaistic drop shadow? I'm trying to use this for my page.

I made a div with a shadow as a background and would like it to align to the right of the main container. but the content is always centered so the position of the shadow differs then..

The page is: http://www.2monksandamoose.com/index3.php
and the stylesheet is here: http://www.2monksandamoose.com/css/2maam2.css

thanks in advance

greetz,
Wouter

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 16 years 38 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

drop shadow

There is probably a few ways to do it, for example you could stretch that image you have out and make sure it is underneath using z-index.

I had a quick go using the following method, but it can be hard to follow someones elses code quickly.

.boxone { 
   margin-top: 10px; 
   margin-left: 15px; 
   color: red; 
   background-color: #DFDFDF; 
   height: 50px; 
   width: 200px; 
   text-align: center; 
} 

.boxtwo { 
   margin-top: -55px; 
   margin-left: 10px; 
   border: 1px solid black; 
   color: black; 
   background-color: white; 
   padding: 0.2em 0.2em; 
   height: 50px; 
   width: 200px; 
   text-align: center; 
} 

html

<div class="boxone"></div> 
<div class="two">This text is centered within box-two.</div>

Now I have not tested this for some time, also not against correct doc types.

The idea here is to create a grey box and then create a content box of the same size. You then use negative margins to pull the content box back up and over the grey box, leaving a few pixels of grey on right and bottom.

Regards
Day

The only way to learn is to do it yourself

Wouthor
Offline
newbie
the Netherlands
Last seen: 16 years 36 weeks ago
the Netherlands
Joined: 2003-11-26
Posts: 7
Points: 0

drop shadow

Laughing out loud ok thanks Daybreak! this is helpfull, I'll give it a try.

greetz