Skip to Content
Menu

.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.

Was this page helpful? Yes No


    A feedback message is required to submit this form.


    Please check that you have entered a valid email address.

    Enter your email address if you would like a response.

    Thank you for your feedback!

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