Solved

html div shadow effect

Posted on 2010-08-14
7
827 Views
Last Modified: 2012-05-10
I am creating a div for the entire content of my web page to be centred.

I would like to create a shadow effect on the div border. How can I achieve this., Please help. thanks
0
Comment
Question by:TrialUser
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
7 Comments
 
LVL 4

Expert Comment

by:koolin
ID: 33438801
Best way is to probably put a wrapper div around that div and give it a image background that has the shadow effect.

You can't do it direct with CSS because not all browsers support it.

Here some example code and a link to example image below

div.bgMid is the wrapper div which includes a repeating (on the Y axis - vertical) background which serves as the shadow or fade for the inside div.

The the included image and code I was forcing the inside div to a width of 980px as that matches the wrapper background image.
div.bgMid {  width: 100%; margin: 0 auto; clear:both; background: url(images/bg_mid.png) repeat-y center center ; }

Open in new window

bg-mid.png
0
 
LVL 4

Expert Comment

by:koolin
ID: 33438805
eh wth here is the site I did that all for so you can see a full finished demo.

http://www.spmlearning.com/
0
 
LVL 9

Expert Comment

by:Snarfles
ID: 33440602
What you can do for ie browser is use this code

filter: glow(color=#000000,strength=3);

For real browsers you can use

text-shadow:0 0 5px #000000, -1px -1px 5px #000000;

This can be applied to div elements.
0
SharePoint Admin?

Enable Your Employees To Focus On The Core With Intuitive Onscreen Guidance That is With You At The Moment of Need.

 

Author Comment

by:TrialUser
ID: 33441056
Koolin:

Thanks for your response. DO you mean, there will be two divs nested?
I created two divs, it seems like the shadow div, is not wrapping around the main content div. what am i missng here? please help. thanks a ton again

<div class="shadow">
    <p>shadow</p><div class="page">
    <p>page</p>
    </div>
    </div>

body  
{
    background: #b6b7bc;
    font-size: .80em;
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    margin: 0px;
    padding: 0px;
    color: #696969;
}

div.page
{
    width: 960px;
    background-color: #fff;
    margin: 0px auto 0px auto;
    border: 0px solid #496077;
}

div.Shadow
{  
      margin: 0 auto;
      clear:both;
      background: url(images/grayshadow.png) repeat-y center center ;
}
0
 
LVL 9

Assisted Solution

by:Snarfles
Snarfles earned 100 total points
ID: 33441095
Hi
Sorry I misread your question a bit.

You could try adding a dropshadow like this

http://www.webtoolkit.info/demo/css-drop-shadow

Instructions here

http://www.webtoolkit.info/css-drop-shadow.html

Just experiment with the border widths.

Cheers

Luke
0
 
LVL 4

Accepted Solution

by:
koolin earned 400 total points
ID: 33441331
Hey, see demo code below.  Only 2 changes I made was using the fade image I had "bg-mid.png" instead of your shadow one, and then the width of the page div to 980 to match the fade image.

If its still showing weird for you post a screenshot so I can see what is happening.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        body
        {
            background: #b6b7bc;
            font-size: .80em;
            font-family: "Helvetica Neue" , "Lucida Grande" , "Segoe UI" , Arial, Helvetica, Verdana, sans-serif;
            margin: 0px;
            padding: 0px;
            color: #696969;
        }
        
        div.page
        {
            width: 980px;
            background-color: #fff;
            margin: 0px auto 0px auto;
            border: 0px solid #496077;
        }
        
        div.Shadow
        {
            margin: 0 auto;
            clear: both;
            background: url(images/bg-mid.png) repeat-y center center;
        }
    </style>
</head>
<body>
    <div class="Shadow">
        <div class="page">
            Content<br />
            <br />
            <br />
            Content<br />
            <br />
            <br />
        </div>
    </div>
</body>
</html>

Open in new window

0
 

Author Closing Comment

by:TrialUser
ID: 33441748
Thanks a ton for your help. It works great. thanks
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
White space in figure / img 4 22
ASP.net Moving Visual Studio 2015 project to 2017 2 42
c#, datatable, aspx 4 27
toggle content 12 29
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

730 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question