How do they do that?

[Exciter]

How do you get a shadow border around your website container or wrapper div?

Is it an image, or is that done using CSS?

I think this looks so cool and would love to use this on my sites as opposed to a regular border.

Thanks in advance.

 

[csn-uk]

this is often done with both images and CSS, for a drop shadow effect as in often the shadow used arround an object often making them apear 3D (ish) its done by CSS.

however say for example a graidient or a wave (light dark /light dark) type situation it is both CSS and an image where by you create the image and use css to position and repeat it across the page. (to avoid incompatability and reduce load times)

 

[Exciter]

Okay, thanks for the reply.

However, could you elaborate on exactly how, if you know.

I know a good bit of CSS, or so I would like to think.

Would you create a separate div(s) to achieve this look? Because for some reason faux css columns pop into my head.

 

[Fellow]

I have tried numerous times to accomplish that look however I fumble the coding somewhere along the way. I would love to know the CSS method so that I could practice or play with this some. No matter what I try I cannot accomplish that look.

 

[energizedit]

Here is the css you are looking for -moz-box-shadow:1px 1px 10px rgba(0, 0, 0, 0.3); A Google search will find what you need.

Mark

 

[martin1]

Re:

Hi, it's a so nice and good site ever. It's a really great and fantastic post here in this site. Thank you for the sharing of your ideas and information to all of us.

 

[siforek]

Here is the css you are looking for -moz-box-shadow:1px 1px 10px rgba(0, 0, 0, 0.3); A Google search will find what you need.

Mark

Unfortunately that method only works with Firefox and isn't valid CSS. While most people can get away with validation errors, it's crucial that things look the same in all major browsers. This is how I do it:

Use Photoshop or Illustrator to create the box w/shadow. Slice it up: top and bottom, and a 1px high image that repeats the middle vertically. Then using CSS you use the 1px high image for the div's background, and place the div's top & bottom backgrounds using either the divs above and below them or style an element like an <hr />

That's just how I have done it in the past. There's actually many articles and various methods online if you use your best friend; Google

 

[Exciter]

Siforek, I actually found a solution using css faux columns. I created an image in GIMP, created two faux columns and set them as the background using CSS.

It's so easy and too simple.