• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Für einen div-Container mehrere Box-Shadow definieren?

G

gaplex

Mitglied
Hallo Leute,
gibt es einen Trick mehrere verschiedene
Code: 
box-shadow
für einen Div-Container zu definieren?

Hintergrund: Wenn der Bereich, der mit einem Schatten versehen werden soll, auf unterschiedlichen Hintergründen liegt wird es Problematisch. Definiert man den Schatten zu hell, leuchtet er auf dem dunklen Hintergrund, ist er zu dunkel sieht man ihn gar nicht mehr.

boxshadow.jpg

Ich habe jetzt keine Möglichkeit gefunden unterschiedliche Shadows bis Höhe X zu bestimmen, aber vielleicht habt ihr ja einen Tipp / Trick für mich?

Danke!
 
Zumindest einen einfachen Workaround, für den Fall, dass sich der oben liegende Container nicht aus dem Bereich des schwarzen Balkens verschiebt.

Erstelle statt eines Containers einfach drei. Einen kleinen, der im dunklen und einen größeren, der im hellen Bereich liegt. Diese erhalten Box-Shadows mit unterschiedlichen Werten. Anschließend positionierst du den großen Container direkt über den beiden kleineren. Ohne Shadow.

Bei einem flexiblen Layout wäre so etwas auch möglich, würde aber einen Ansatz mit JavaScript und eventuelle Media Queries voraussetzen.
 
Mit ineinander liegenden Elementen ginge das (jedes Element einen anderen Schatten, mit padding Abstand zwischen den Elementen erreichen, so dass Schatten wirkt). Mit CSS alleine imho nicht.
 
Tronjer schrieb:
Erstelle statt eines Containers einfach drei. Einen kleinen, der im dunklen und einen größeren, der im hellen Bereich liegt. Diese erhalten Box-Shadows mit unterschiedlichen Werten. Anschließend positionierst du den großen Container direkt über den beiden kleineren. Ohne Shadow.
Zum Vergrößern anklicken....

Genau das habe ich schon probiert. Problem: Es ist quasi unmöglich einen sauberen Übergang des Schattens von dem oberen Container auf den des unteren Container hinzubekommen. Den beim oben Container endet der Schatten und beim unteren beginnt er und das sieht man.
 
Unmöglich nicht, aber wohl nur auf Umwegen. Ich habe jetzt auch überlegen müssen.

HTML: 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />

    <style type="text/css">
    #box1, #box2, #box3 {
        background: #fff;
        margin: 0 auto;
        position: relative;
        width: 200px;
    }
    #box1, #box3 {
        height: 100px;
    }
    #box1 {
        box-shadow: 0 0 5px 3px #0000ff;
    }
    #box2 {
        height: 8px;
        z-index: 2;
    }
    #box3 {
        box-shadow: 0 0 5px 3px #ff0000;
    }
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
</body>
</html>
 
Dann korrigiere die Werte noch etwas. Setze den Blur-Effekt herunter, vergrößere #box2 oder verschiebe #box3 mit einem negativen margin.
 
Hier noch mal eine verbesserte Version. Erstellt für FF auf dem Mac. Das sind vielleicht nicht 100%, aber es kommt dem ziemlich nahe.

HTML: 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    
    <style type="text/css">
    * {
        margin: auto;
    }
    body {
        background: #ccc;
    }
    #box1 {
        width: 800px;
        height: 150px;
        background: #000;
    }
    #box2, #box4, #box5 {
        width: 500px;
        background: #fff;
    }
    #box2 {
        height: 160px;
        box-shadow: 0 0 10px 3px #fff;
        margin-top: -100px;
    }
    #box2, #box4 {
        border-radius: 8px;
    }
    #box3, #box4 {
        height: 400px;
    }
    #box3 {
        background: none repeat scroll 0 0#CCC;
        width: 100%;
        height: 400px;
        margin-top: -60px;
    }
    #box4 {
        box-shadow: 0 0 10px 3px #666;
        margin-top: -405px;
    }
    #box5 {
        height: 450px;
        margin-top: -460px;
    }
    #box6 {
        background: none repeat scroll 0 0#777;
        height: 445px;
        margin-top: -460px;
        width: 440px;
    }
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
    <div id="box4"></div>
    <div id="box5"></div>
    <div id="box6"></div>
</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben