Responsive Foundation 6.0.0

Sidebar

Utilities » Mixins Box ShadowLink

Since: 1.0.0 New Issue

A mixin for box-shadow. Takes care of browser prefixes for you. You should always use this mixin when writing box-shadow rules to ensure you're compatible with the browsers we support. Supports multiple shadows, just use the same syntax as you would CSS.

More info at MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

Examples

Create a large, subtle shadow to help a callout stand out against a complicated background, like a background photo.
			.feature-callout {
					@include box-shadow( 0px 0px 40px 0px rgba( 0, 0, 0, 0.25 ) );
				}
		
Create a fancy button with an inset highlight and a shadow around it to help it stand out on a background.
			.fancy-button {
					@include box-shadow(
						inset 0 2px 0px rgba( 255, 255, 255, 0.25 ),
						0px 0px 10px 0px rgba( 0, 0, 0, 0.25 )
					);
				}
		
Source: _mixins.scss, line 127 View Source