Hosting Discussion

Hosting Discussion (
-   Website Development & Design (
-   -   How do they do that? (

Exciter 10-11-2009 02:07 PM

How do they do that?
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 10-11-2009 04:18 PM

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 10-19-2009 09:25 AM

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 10-23-2009 06:41 PM

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 11-07-2009 08:02 PM

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.


martin1 11-18-2009 06:24 AM

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 11-18-2009 09:23 AM


Originally Posted by energizedit (Post 116905)
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.


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 11-20-2009 11:02 AM

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.

All times are GMT -6. The time now is 09:30 PM.

Powered by vBulletin® Version 3.6.8
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.1.0