Gabi: Schatten möglich bei divs per css?

Hallo!
Ich habe eine Frage. Ich habe einen zentrierten Container erstellt.
Jetzt würde ich gerne wissen ob es möglich ist, diesem Container
für border-left und border-right einen Schatten auf den "body" fallend per CSS zu spendieren? border-right: 1px shade solid black;
klappt nicht.

Wenn nicht, wie ist sowas dann möglich??? Bitte um Rücksichtnahme, und vielleicht für dumme, ich habe vor ein paar Tagen erst angefangen :=)

CSS-Code

body {
 margin: 0;
 padding: 0;
 height: 100%;
 font: 85% arial,hevetica, sans-serif;
 background-color: #B8C899;
 text-align: center;
}

.container {
 margin-left: auto;
 margin-right: auto;
 text-align: left;
 width: 700px;
 height: 100%;
 background-color: #F2EDCB;
 border-right: 1px solid black;
 border-left: 1px solid black;
}

Hoffe es kann mir jemand weiter helfen.

Liebe Grüße
Gabriele

  1. grds. gibt es da mehrere Möglichkeiten, die nicht unbedingt alle
    für jeden Browser geeignet sind, spontan dazu fällt mir ein

    dann schau mir hier nach (Englischkenntnisse vonnöten)
    http://alistapart.com/articles/cssdropshadows/

    oder generell bei google z.B. mit "shadow css"

    MfG
    Micha

  2. Tag Gabi.

    Jetzt würde ich gerne wissen ob es möglich ist, diesem Container für border-left und border-right einen Schatten auf den "body" fallend per CSS zu spendieren?

    Du kannst es IE-only realisieren: CSS-Filter, browserübergreifend fiele mir nur die Variante ein, unter das Div ein anderes Div so zu platzieren, dass es wie ein Schatten aussieht. Dabei hilft dir die CSS-Eigenschaft z-index. Aber vielleicht fällt jemandem noch was besseres ein.

    [dsf 3.6]
    Siechfred

    --
    »Sie kochten heimlich mit Wasser und tranken öffentlich Wein.«
  3. Hallo!

    Tach Gabi.

    Jetzt würde ich gerne wissen ob es möglich ist, diesem Container
    für border-left und border-right einen Schatten auf den "body" fallend per CSS zu spendieren? border-right: 1px shade solid black;
    klappt nicht.

    Wäre auch ein komischer Schatten, weil er oben rechts und unten links bündig wäre.

    Aber wie wär's hiermit:

    <html>
    <head>
    <title>Guckst Du!</title>
    <meta name="author" content="Ich">
    <meta name="generator" content="Zweifingeradlersuchsystem">
    <style type="text/css">
    body {
     background:gold}
    #schatten,#objekt {
     position:absolute;
     width:50%;
     height:50%;
     -moz-border-radius:12px;
    }
    #schatten {
     top:27%;
     left:26%;
     background:darkred;
     -moz-opacity:0.5;
     filter:Alpha(opacity=50);
    }
    #objekt {
     top:25%;
     left:25%;
     border:2px outset springgreen;
     background:green;
    }
    </style>
    <script type="text/javascript">
    function ChangeBG() {
     with (document.getElementsByTagName('body')[0].style)
      {if (backgroundColor == 'darkslategray') backgroundColor = 'gold'
       else backgroundColor = 'darkslategray'
      }
     return false
    }
    </script>
    <noscript></noscript>
    </head>
    <body>
     <div id="schatten"></div>
     <div id="objekt">
       <a href="#" onclick="ChangeBG()">Hintergrundfarbe ändern</a>
     </div>
    </body>
    </html>

    Liebe Grüße
    Gabriele

    Alles Liebe auch!
    HTV