Alpha - Shadow Effekt einfügen

siL3NcE · 3. Februar 2021

Hallo Zusammen!

Aktuell bin ich dabei das Alpha Design mit Schatteneffekten auszustatten. Das klappt in den meisten Fällen auch relativ problemlos.

Dazu habe ich auch einige Beispiele mit Quellcode mal mit angefügt. Nur bei dem Wichtigsten Vorhaben klappt es leider nicht, siehe weiter unten.

Beispiele:

Code

#pageHeaderContent {
    -webkit-box-shadow: 10px 10px 15px 5px rgba(0,0,0,0.3);
    -moz-box-shadow: 10px 15px 26px 5px rgba(0,0,0,0.3);
    box-shadow: 10px 10px 15px 5px rgba(0,0,0,0.3);
}

Code

.mainMenu .boxMenu .boxMenuDepth1 {
    -webkit-box-shadow: 10px 10px 15px 5px rgba(0,0,0,0.26);
    -moz-box-shadow: 10px 15px 26px 5px rgba(0,0,0,0.26);
    box-shadow: 10px 10px 15px 5px rgba(0,0,0,0.26);
}

Code

/* Infoboxes */

.warning,
.success,
.error,
.info:not(.cookiePolicyNotice) {
    border-radius: $borderRadius;
}

.innerError {
    background-color: $wcfStatusErrorBackground;
    color: $wcfStatusErrorText;
    -webkit-box-shadow: 10px 10px 15px 5px rgba(0,0,0,0.26);
    -moz-box-shadow: 10px 15px 26px 5px rgba(0,0,0,0.26);
    box-shadow: 10px 10px 15px 5px rgba(0,0,0,0.26);
}

.innerError:before {
    border-color: transparent transparent $wcfStatusErrorBackground;
}

.warning {
    background: linear-gradient($wcfStatusWarningBackground, darken($wcfStatusWarningBackground,5%));
    box-shadow: 0 1px 0 transparentize($wcfStatusWarningBorder,0.25) inset;
    -webkit-box-shadow: 10px 10px 15px 5px rgba(0,0,0,0.26);
    -moz-box-shadow: 10px 15px 26px 5px rgba(0,0,0,0.26);
    box-shadow: 10px 10px 15px 5px rgba(0,0,0,0.26);
}

.success {
    background: linear-gradient($wcfStatusSuccessBackground, darken($wcfStatusSuccessBackground,5%));
    box-shadow: 0 1px 0 transparentize($wcfStatusSuccessBorder,0.25) inset;
    -webkit-box-shadow: 10px 10px 15px 5px rgba(0,0,0,0.26);
    -moz-box-shadow: 10px 15px 26px 5px rgba(0,0,0,0.26);
    box-shadow: 10px 10px 15px 5px rgba(0,0,0,0.26);
}

.error {
    background: linear-gradient($wcfStatusErrorBackground, darken($wcfStatusErrorBackground,5%));
    box-shadow: 0 1px 0 transparentize($wcfStatusErrorBorder,0.25) inset;
    -webkit-box-shadow: 10px 10px 15px 5px rgba(0,0,0,0.26);
    -moz-box-shadow: 10px 15px 26px 5px rgba(0,0,0,0.26);
    box-shadow: 10px 10px 15px 5px rgba(0,0,0,0.26);
}

.info {
    background: linear-gradient($wcfStatusInfoBackground, darken($wcfStatusInfoBackground,5%));
    box-shadow: 0 1px 0 transparentize($wcfStatusInfoBorder,0.25) inset;
    -webkit-box-shadow: 10px 10px 15px 5px rgba(0,0,0,0.26);
    -moz-box-shadow: 10px 15px 26px 5px rgba(0,0,0,0.26);
    box-shadow: 10px 10px 15px 5px rgba(0,0,0,0.26);
}

Alles anzeigen

Bis hier hin klappt noch alles problemlos...

Aber sobald ich versuche den Shadow-Effekt vom PageHeaderWrapper bis zum Footer darzustellen fangen die Probleme an.

Für die bessere Sichtbarkeit habe ich den Schatten erstmal grün gefärbt. Der Schatten wird zwar rechts von oben bis unten dargestellt, jedoch soll dieser direkt nach dem dunkelgrauen Footer enden und dort auch einen Schatten nach unten werfen. Aktuell geht dieser noch am Footer vorbei und ich bin da echt am verzweifeln. Den eigentlichen Wunsch der Schattenposition habe ich nochmal auf dem nachfolgenden 3. Bild in rot dargestellt.

Meine Vorgehensweise:

Template "header"

Code

<div id="pageContainer" class="pageContainer">
    {event name='beforePageHeader'}
    
    {include file='pageHeader'}
    <div class="shadowCry"> <!-- aktuell an dieser Position, fängt mein "DIV-Element" an -->
    {event name='afterPageHeader'}

    {hascontent}

Template "header"

Smarty

    {hascontent}
        <div id="pageFooterCopyright" class="pageFooterCopyright">
            <div class="layoutBoundary">
                {content}
                    {event name='footerContents'}
                    
                    {if ENABLE_BENCHMARK}{include file='benchmark'}{/if}
                    
                    {include file='pageFooterCopyright'}

                    {include file='footerNote'}

                    {if MODULE_WCF_AD && $__disableAds|empty}
                        {@$__wcf->getAdHandler()->getAds('com.woltlab.wcf.footer.bottom')}
                    {/if}
                {/content}
            </div>
        </div>
    {/hascontent}
</footer>
</div><!-- aktuell an dieser Position, hört mein "DIV-Element" auf -->

Alles anzeigen

CSS-Settings ergänzt mit "shadowCry"

Code

.shadowCry {
    z-index:0;
    -webkit-box-shadow: 10px -5px 15px 5px rgba(0,0,0,0.3);
    -moz-box-shadow: 10px -5px 15px 5px rgba(0,0,0,0.3);
    box-shadow: 10px -5px 15px 5px rgba(0,0,0,0.3);
}

Ich hoffe, das mir ein HTML/CSS Experte hier weiterhelfen kann

Viele Grüße

siL3NcE

siL3NcE · 8. Februar 2021

kann geschlossen werden, hab's mittlerweile hinbekommen.

Bibini · 8. Februar 2021

Zitat von siL3NcE

kann geschlossen werden, hab's mittlerweile hinbekommen.

nett wäre, wenn du dann auch den CSS Code oder so posten könntest, wie du es gemacht hast

da hier scheinbar keiner so wirklich helfen konnte, würde es ggf jemanden interessieren, der das ebenfalls ändern möchte und hier nachliest

siL3NcE · 8. Februar 2021

Zitat von Bibini

nett wäre, wenn du dann auch den CSS Code oder so posten könntest, wie du es gemacht hast

da hier scheinbar keiner so wirklich helfen konnte, würde es ggf jemanden interessieren, der das ebenfalls ändern möchte und hier nachliest

klar doch

Ich habe unten den Abstand von 60px ausgemessen und diesen Wert in den CSS Einstellungen gesucht. Ich wurde fündig und habe diesen durch 0px ersetzt und in meiner eigenen Klasse "shadowCry" habe ich die 60px ergänzt. Hatte mich stundenlang zuvor mit margin, padding, border und alles mögliche näher beschäftigt.

#pageFooter von 60px auf 0px setzen

Code

@media only screen and (min-width: 1025px) {

    /* Footer */

    #pageFooter {
        margin-bottom: 0px;
    }

}

Eigene Klasse

Code

.shadowCry {
    z-index:0;
    -webkit-box-shadow: 10px 10px 15px 5px rgba(0,0,0,0.3);
    -moz-box-shadow: 10px 10px 15px 5px rgba(0,0,0,0.3);
    box-shadow: 10px 10px 15px 5px rgba(0,0,0,0.3);
    
    margin-bottom: 60px;
}

DropdownMenu (Kontrollzentrum etc.)

Code

.interactiveDropdown {
    -webkit-box-shadow: 10px 0px 15px 5px rgba(0,0,0,0.26);
    -moz-box-shadow: 10px 0px 15px 5px rgba(0,0,0,0.26);
    box-shadow: 10px 0px 15px 5px rgba(0,0,0,0.26);
}

Menü oben

Code

#pageHeaderWrapper.fixed {
    -webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.3);
        }

#pageHeaderWrapper {
    z-index:0;
    -webkit-box-shadow: 10px 0px 15px 5px rgba(0,0,0,0.3);
    -moz-box-shadow: 10px 0px 15px 5px rgba(0,0,0,0.3);
    box-shadow: 10px 0px 15px 5px rgba(0,0,0,0.3);
}

Alles anzeigen

siL3NcE · 8. Februar 2021

Wenn sich das jemand live anschauen möchte, kann er sich das gerne auf meiner Webseite anschauen.

Link ist im Profil

Bibini · 8. Februar 2021

sieht gut aus

Alpha - Shadow Effekt einfügen

Tags

cls-design

Informationen

Demoinstallationen

Hilfe