Schatten / Verlauf um eine Box definieren - ich kriegs bisher nicht hin

    Aus einem vorhandenen Template habe ich abgeguckt, wie ich einen Schatten erhalte und hab den noch in der Breite, dem Verlauf und der Farbe angepasst:

    Code
        box-shadow:0 4px 4px 0 rgba(0,0,255,0.2),0 4px 6px 0 rgba(0,0,255,0.18);
    border-radius: 6px;
    padding: 0.1em 1em 0.2em 1em;

    Schon bei der Anpassung der Breite der Schatten und Verläufe stellte ich fest, dass ich gar nicht nachvollziehen kann, was welche Werte beeinflussen. Es erscheint mir einfach unklar, obwohl ich z.B. bei W3CSS versucht hatte, mich schlau zu machen. Also schreibe ich lieber, was ich denn bewirken möchte:

    • Die obigen Schattendefinitionen sollen nur einen Schatten nach rechts und unten erzeugen.
    • Ergänzen möchte ich diese Schatten so, dass oben und links ein weißer Rand ohne Verlauf entsteht, so als ob Licht auf einer Kante reflektiert wird.

    Gibt mir bitte jemand einen CSS-Schnippsel dafür?

    Ach ja, ich hab's schon versucht, indem ich zu Anfang der o.g. Definitionen eingefügt hatte:

    Code
    border-top: 2px solid #fff;
border-left: 2px solid #fff;

    Leider macht er mir auch die beiden weißen Ränder herum immer noch Schatten, ist also noch keine Lösung.

    Sorry, die Test-Website ist inhaltlich in einem Zustand, in dem ich den Link nicht geben möchte.

    In deinem Beispiel sehe ich unten eine orange und links weißlich erscheinende Linie am Bildrand. Beim Hover erhält das Bild links, unten und rechts einen Schatten mit Verlauf. Oben bleibt es dabei, dass keine Linie oder Schatten auftritt.

    Ich möchte keinen Hover-Effekt sondern rein statisch, dass nur ein Schatten am linken und unteren Rand der Box erzeugt wird und eine 1px Linie weiß am oberen und linken Rand, wobei dann grundsätzlich links und oben kein Schatten erscheinen darf.

    Was ist an meiner Beschreibung unklar, sodass du ein Beispiel / Link brauchst?

    Mit Orange sehe ich dort nix - ist auch nix angegeben. Du kannst es in jsfiddle auch selbst probieren und verändern.


    bei box-shadow sind die ersten beiden Angaben die X und Y Koordinaten (X = rechts/links, Y = oben/unten). Damit richtest Du den Schatten aus und kannst entsprechend beeinflussen wo dieser erscheinen soll. Wenn er nur rechts erscheinen soll, dann muss die erste Angabe über 0 sein = Abhängig von der Stärke des Schatten. Gibts Du einen Minus-Wert an, wandert der Schatten nach links.


    Den Hover-Effekt habe ich nur, damit man die Unterschiede mit / ohne Schatten sehen kann. Du kannst es auch direkt anwenden.

    Wenn man die Lösung hat, dann muss man nur noch das passende Problem finden.

    Bin gerade selbst drauf gekommen:

    der erste Pixelwert gibt den Offset des Schatten nach rechts und der zweite den nach unten an. Der dritte Pixelwert gibt den Durchmesser des Blur-Effekt an und der vierte Wert... ?


    In meinem Code ging es dem Erfinder des Code wohl darum, bei einer kleinen Breite des Schattens einen weicheren Verlauf hinzubekommen, indem er zwei Definitionen sich überlagern lässt.


    Da auch noch die gewählte Transparenz und zusätzlich auch die Farbintensität dabei eine Rolle spielt, bleibt nur, das Ganze auszuprobieren.


    Jedenfalls hab ich es geschafft, die weißen Linien zu setzen, ohne Schatten und die erwünschten Schatten haben jetzt einen leicht bläulichen Stich, der auf der eigentlich in warmen Farbtönen gehaltenen Website etwas Geheimnisvolles oder Spannendes geben mag.


    Hier mein Code jetzt:

    Code
    box-shadow:2px 2px 3px 0px rgba(0,0,250,0.15), 3px 3px 6px 0px rgba(0,0,250,0.15);
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-radius: 6px;

    Danke für deine Unterstützung!