Skip to Content

.nebulashadow

Adds different types of CSS shadows to elements.

CSS February 22, 2017

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.

Note: This function contains 1 to-do comment.

CSS
.nebulashadow {position: relative;
    &.floating {
        &:after {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 17px 25px -15px rgba(0, 0, 0, 0.4); 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 rgba(0, 0, 0, 0.4); 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: rgba(0, 0, 0, 0.4); 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: rgba(0, 0, 0, 0.4); 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: rgba(0, 0, 0, 0.4); 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: rgba(0, 0, 0, 0.4); 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: rgba(0, 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: rgba(0, 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: rgba(0, 0, 0, 0.4); 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: rgba(0, 0, 0, 0.4); 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: rgba(0, 0, 0, 0.4); 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: rgba(0, 0, 0, 0.4); 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 rgba(0, 0, 0, 0.4);}
    &.inner-bottom {box-shadow: inset 0 -17px 25px -15px rgba(0, 0, 0, 0.4);}
    &.inner-top.inner-bottom {box-shadow: inset 0 17px 25px -15px rgba(0, 0, 0, 0.4), inset 0 -17px 25px -15px rgba(0, 0, 0, 0.4);}

    .ie &,
    .microsoft_edge & { //@TODO "Nebula" 0: When IE and Edge support filter, modify this.
        &:after {display: none;}
        &:before {display: none;}
    }
}

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;}