Box Shadows

Box shadows can be applied to any element. The size of the shadow will be generated based on the height and width of the element. The wider the box the longer the shadow will appear. Box shadows can be applied over solid colors or images. However, two box shadows should not intersect as the overlapping shadows will darken and not match the brand

The boxshadow effect is applied by creating css generated content that has a linear-gradient background. These shadows are appended to the :before and the :after of the element where the .boxshadow css class is applied.

Please note that using a boxshadow on an element that contains a textshadow can be problematic if more complex nesting is not used.

CSS Code

This CSS rule is included automatically in the default UNM template.

.boxshadow {
   position:relative;
   overflow: visible !important;
}

.boxshadow:before, .boxshadow:after {
   content: " ";
   position: absolute;
   display: block;
   border: 0;
}
.boxshadow:before {
   top: 0;
   left: 100%;
   height: 100%;
   width: 0;
   padding-right: 100%;
   transform-origin: 0% 0%;
   transform: skew(0deg, 45deg);
   background: linear-gradient(to right, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
   box-shadow: 0px 1px 0px 0 rgba(0,0,0,.1);
}

.boxshadow:after {
   top: 100%;
   left: 0;
   width: 100%;
   height: 0;
   padding-top: 100%;
   transform-origin: 0% 0%;
   transform: skew(45deg, 0deg);
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
   box-shadow: 1px 0px 0px 0 rgba(0,0,0,.1);
}        
    

Examples