Inset-Box-Shadow nicht zu sehen...?!?

    Hallo,
    habe eine Joomla-Seite aufgesetzt, mit Joomla 3.7.4 und dem T3-Framework.
    Bilder in Artikeln sollen nun einen Schatten nach innen bekommen, doch leider wird dieser nicht angezeigt.
    Habe bereits versucht, den inset-Box-Shadow nicht auf das img-Tag direkt anzuwenden sondern auf das umgebende Div-Tag, doch leider auch da Fehlanzeige. Mache ich in diesem Fall aber das Div größer als das beinhaltete Bild selbst, also z.B. nach unten größer, ist der Innenschatten dort zu sehen...
    Mir scheint, als würden die Bilder immer vor dem Schatten stehen, selbst wenn der Schatten auf hierarchisch höhere Elemente angewendet wird und somit das Bild überlagern sollte...


    Hat jemand eine Idee, wie ich das lösen kann? Bin leider noch nicht so erfahren mit Joomla.


    LG

  • Zum hilfreichsten Beitrag springen

    Hallo Elwood,


    danke für deine Nachricht.
    Einen Link kann ich dir leider nicht geben, da ich die Seite mit XAMPP offline realisiere. Aber hier eine andere, die auch noch nicht offiziell und lang nicht fertig ist: Link
    Unten ist ein Bild, welches ich für dich mit einem roten Rahmen markiert habe. Dieses hat einen Innenschatten (box-shadow: 0 3px 5px red inset;). Diese Eigenschaft ist nicht überschrieben, wenn ich im "Element untersuchen"-Modus nachsehe. Du kannst es auch bei anderen Joomla-Installationen mal mit den Entwickler-Tools in deinem Browser testen. Das hab ich auch bei anderen Seiten gemacht. Der Innenschatten wird bei Bildern nicht angezeigt und bei umgebenden Elementen nur hinter dem Bild.


    Extensions habe ich leider keine gefunden, die das Problem lösen

    • Hilfreich

    Hallo,


    ein inset funktioniert bei einem img wohl nicht so einfach. Man muss es umgehen.
    Musst du mal testen:


    Habe im Beitrag einen html-Code eingefügt:


    Code
    <figure class="img box-shadow"><img src="images/image-frame.png" alt="" /></figure>


    In der CSS-datei dann dieses:


    Code
    .img {        position: relative;}.img:before {        content: "";        position: absolute;        z-index: 1;        top: 0;        left: 0;        width: 100%;        pointer-events: none;}.img.box-shadow:before {        height: 100%;        box-shadow: inset 0 0 1em red;}


    Musst du nun auf deine Seite umsetzen.


    Hier habe ich die Hilfe gefunden, 2. Beispiel:

    Code
    :before und box-shadow


    Hat bei mir funktioniert.