CODEWITHSUNDEEP
htmlcssborder
Matt
Matt

Reputation: 2896

HTML/CSS "shadow" border?

I tried looking in Chrome's Inspect Element, but I could not find out how this page here [ http://www.mousehuntgame.com/ ] makes a shadow type border? On either side of the middle box [with all the page content], it fades to a darker blue, creating a shadow effect.

I want to use that for my website. What's the code? Is it CSS? Thanks!

Upvotes: 2

Views: 36051

Answers (5)

kammy
kammy

Reputation: 352

This Css code will give solid border to division and Shadow, as used in the page in your link. 

 -moz-border-radius: 20px;
    -khtml-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    overflow:hidden;
    background:#F6E7B9;
    -webkit-box-shadow:0 0 4em rgb(4,6,5);
    -moz-box-shadow:0 0 3em rgb(6,7,8);
    box-shadow:0 0 1em rgb(5,9,2);
    border:20px solid skyblue;
    font-family:Verdana, Geneva, sans-serif;
enter image description here

Upvotes: 2

robx
robx

Reputation: 3123

if you want CSS3 you can style your text with 

text-shadow: red 2px 2px 2px;

do box shadow with

-moz-box-shadow: 6px 6px 5px #CCC;
-webkit-box-shadow: 6px 6px 5px #CCC;
box-shadow: 6px 6px 5px #CCC;

for simplicity of background gradients you can use this site http://gradients.glrzad.com/

Upvotes: 4

thirtydot
thirtydot

Reputation: 228292

They're using an image:

(it's actually 1px high, I just stretched it here for clarity)

You could do it with CSS3's box-shadow, see here for a rough example: http://jsfiddle.net/B9Uyj/1/

To make box-shadow work in older versions of IE, you can use CSS3 PIE. (It already works in IE9)

An image would be the easiest option here.

Upvotes: 5

iosfreak
iosfreak

Reputation: 5238

I believe they are doing it with the images. Search 'active' and check out all their stuff in this stylesheet: http://www.mousehuntgame.com/css/en/tabbarview.css?v=98&t=1294342331

Upvotes: 0

Marty
Marty

Reputation: 39466

I normally set the background-image of a container to be a whatever x 10 pixel image which would be 20 pixels on each side worth of shadow, and then repeat vertically. Assuming your whitespace is 960px wide with 20px each side of shadow, use:

<div class="box">
     content
</div>

CSS:

div.box
{
     background: url(image-with-shadow.png) repeat-y;
     padding: 0 20px;
     width: 960px;
}

Here's an example of an image to use: http://projectavian.com/repeat.png

Upvotes: 1

Related Questions