silverorange labs

Comments

Comments are locked. No additional comments may be posted.

David July -

I am curious if there is a way to include in the DIV attributes a top border. After changing the background to a lighter color I saw that the border for the top is absent. I have played around with the code but have not been able to figure it out. Any suggestions? Thanks!

David July -

Even better: the modification works on one part of the site, but not another. Now I am really confused!

Dunstan -

Well done fella :o)

I did the same thing, but using an image:
http://www.1976design.com/blog/archive/2003/11/14/shadows/

A few other people came up with the same idea around the same time.

RMCox -

Hey thanks, this is great. I used a semi-transparent .png as the background for extra seemingly suspended in space action: backgroud:url("/images/shadow.png");

Sadly, the transparency _doesn't_ work in IE (it uses the correct base color of the image, however) so you'll need Mozilla (http://www.mozilla.org/) or Safari (Mac only) to see the full effect.

Daniel Von Fange -

If you change the second div in the style-sheet to

.shadowbox > div {

you can have additional div's inside the shadow box...

(This is written of the top of my head, I may be wrong.)

Rob M -

A minor tweak, this:

To make it look more as if the shadow has a blurred edge, just add a slightly lighter border to the .shadowbox class.

This way, you get a content box with a two-colour shadow.
Enjoy.

My code:

.shadowbox {
background: #dfdfdf;
border: 1px solid #f5f5f5;
position: relative;
top: 3px;
left: 3px;
}
.shadowbox div {
background: #fff;
border: 1px solid #000;
color: #ff0000;
padding: 5px 10px;
position: relative;
top: -3px;
left: -3px;
}

armadda -

it's appplicable for making image shadow?

jarrod -

To David July: We ran into the same problem on a recent project. Wrapping the contents of the inner DIV element inside paragraph tags seemed to restore the top border. Hope this helps.

Amelia -

hmm is not working with FireFox.

Nick Burka -

Amelia - it works fine for me in Firefox (0.9, and it worked in 0.8 too)

Dr. Cheap -

Totally awesome! Adds dimension to a page, and saved me a ton of work. I love the HTML/CSS code used ... simple is A Good Thing(tm).

Dylan Bennett -

Looks great. But when I try to select text starting from the paragraph above the box and then down to the paragraph below the box, as soon as my mouse hits the div, it launches me down the page, making me select WAY more than intended. I'm using FF 1.0 for my browser.

Daniel Burka -

Dylan Bennett: I'm able to replicate your issue in Firefox 1.0. Very weird. I even experimented quickly with it in a seperate html file with nothing else that could cause that effect and it happens. Hmm, have to file a Bug report on Bugzilla I suppose... unless someone's got an idea why the simple html/css in this example would cause it.

Arun -

I was looking at a site that showed how to do the sidebar div's with gradient shading. Have not been able to find it since. Would it be possible to show me how it's done using CSS?

Thanks, any help is appreciated.

Arun.

pajak online -

is it aplicable with anchor tag only without div?

Jason Clawson -

Nice and simple. Cool! I wish CSS3 was supported. It makes me cry when I think about how easy my life would be with CSS3.