.nebulashadow

Usage

CSS

.nebulashadow.TYPE

Parameters

TYPE
(Optional) (String) A variation of the shadow to use
Default: None

Parameter Notes

TYPE is simply a second class that is used to determine what type of shadow to apply.

These include:

floating
bulging
curling
hovering
anchored-right
anchored-left

Inner shadows can be used, too (with some types from above):

inner-top
inner-bottom

Request or provide clarification »

Examples

Regular shadow

HTML

<div class="nebulashadow curling">Example</div>

Regular inner shadow

HTML

<div class="nebulashadow inner-top inner-bottom">Example</div>

Demo

Nebula Frame and Nebula Shadow

Nebula Frame with no params

floating

bulging

curling

hovering

anchored-right

anchored-left

floating above

bulging above below

Inner Nebula Shadow

Nebula Shadow using "Inner-Top" and "Inner-Bottom"

Additional Notes

Shadows are pseudo :before and :after elements and their z-index is set to -1 so if they are applied on top of a background image, they will end up behind the background.

Source File

Located in /assets/scss/partials/_helpers.scss on line 9.

CSS

.nebulashadow {position: relative;
    &.floating {
        &::after {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 17px 25px -15px rgb(0 0 0 / 40%); z-index: -1; pointer-events: none;}
        &.above {
            &::before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 -17px 25px -15px rgb(0 0 0 / 40%); z-index: -1; pointer-events: none;}
        }
    }

    &.bulging {
        &::after {content: ""; position: absolute; left: 0; right: 0; bottom: -13px; width: 96%; height: 30px; margin: 0 auto; background: rgb(0 0 0 / 40%); filter: blur(25px); border-radius: 50%; transform: scaleY(.3); z-index: -1; pointer-events: none;}
        &.above {
            &::before {content: ""; position: absolute; left: 0; right: 0; top: -13px; width: 96%; height: 30px; margin: 0 auto; background: rgb(0 0 0 / 40%); filter: blur(25px); border-radius: 50%; transform:scaleY(.3); z-index: -1; pointer-events: none;}
        }
    }

    &.curling {//This can not appear above.
        &::before {content: ""; position: absolute; bottom: 4px; left: 10px; height: 20px; width: 70%; background: rgb(0 0 0 / 40%); filter: blur(6px); transform: rotate(-3deg); z-index: -1; pointer-events: none;}
        &::after {content: ""; position: absolute; bottom: 4px; right: 10px; height: 20px; width: 70%; background: rgb(0 0 0 / 40%); filter: blur(6px); transform: rotate(3deg); z-index: -1; pointer-events: none;}
    }

    &.hovering {
        &::after {content: ""; position: absolute; left: 0; right: 0; bottom: -30px; width: 98%; height: 30px; margin: 0 auto; background: rgb(0 0 0 / 15%); filter: blur(15px); border-radius: 50%; transform:scaleY(.2); z-index: -1; pointer-events: none;}
        &.above {
            &::before {content: ""; position: absolute; left: 0; right: 0; top: -30px; width: 98%; height: 30px; margin: 0 auto; background: rgb(0 0 0 / 15%); filter: blur(15px); border-radius: 50%; transform:scaleY(.2); z-index: -1; pointer-events: none;}
        }
    }

    &.anchored-right {
        &::after {content: ""; position: absolute; bottom: 0; left: 10px; height: 20px; width: 92%; background: rgb(0 0 0 / 40%); filter: blur(6px); transform: rotate(-2deg); z-index: -1; pointer-events: none;}
        &.above {
            &::before {content: ""; position: absolute; top: 0; left: 10px; height: 20px; width: 92%; background: rgb(0 0 0 / 40%); filter: blur(6px); transform: rotate(2deg); z-index: -1; pointer-events: none;}
        }
    }

    &.anchored-left {
        &::after {content: ""; position: absolute; bottom: 0; right: 10px; height: 20px; width: 92%; background: rgb(0 0 0 / 40%); filter: blur(6px); transform: rotate(2deg); z-index: -1; pointer-events: none;}
        &.above {
            &::before {content: ""; position: absolute; top: 0; right: 10px; height: 20px; width: 92%; background: rgb(0 0 0 / 40%); filter: blur(6px); transform: rotate(-2deg); z-index: -1; pointer-events: none;}
        }
    }

    &.above {
        &::after {display: none;}
    }

    &.below {
        &::after {display: block;}
    }

    &.inner-top {box-shadow: inset 0 17px 25px -15px rgb(0 0 0 / 40%);}
    &.inner-bottom {box-shadow: inset 0 -17px 25px -15px rgb(0 0 0 / 40%);}
    &.inner-top.inner-bottom {box-shadow: inset 0 17px 25px -15px rgb(0 0 0 / 40%), inset 0 -17px 25px -15px rgb(0 0 0 / 40%);}
}

Override

To override or disable this, simply write a more specific selector (or as a last resort use an inline style or an !important tag) with your own properties.

CSS

#more-specific .selector {border: 1px solid green;}

Menu