diff --git a/README.md b/README.md index 9db6319..541cfe6 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ and pairing with smart people at Hashrocket. For a steady stream of TILs, [sign up for my newsletter](https://tinyletter.com/jbranchaud). -_870 TILs and counting..._ +_871 TILs and counting..._ --- @@ -94,6 +94,7 @@ _870 TILs and counting..._ - [Add Fab Icons To Your Site With FontAwesome 5](css/add-fab-icons-to-your-site-with-fontawesome-5.md) - [Animate Smoothly Between Two Background Colors](css/animate-smoothly-between-two-background-colors.md) +- [Apply Multiple Box Shadows To Single Element](css/apply-multiple-box-shadows-to-single-element.md) - [Apply Styles To The Last Child Of A Specific Type](css/apply-styles-to-the-last-child-of-a-specific-type.md) - [Dry Up SCSS With Mixins](css/dry-up-scss-with-mixins.md) - [Lighten And Darken With CSS Brightness Filter](css/lighten-and-darken-with-css-brightness-filter.md) diff --git a/css/apply-multiple-box-shadows-to-single-element.md b/css/apply-multiple-box-shadows-to-single-element.md new file mode 100644 index 0000000..ea3e0c7 --- /dev/null +++ b/css/apply-multiple-box-shadows-to-single-element.md @@ -0,0 +1,26 @@ +# Apply Multiple Box Shadows To Single Element + +Multiple box-shadows can be applied to the same DOM element. The `box-shadow` +property accepts a comma-separated list of `box-shadow` directives. + +Here is a pretty nasty looking example from the [MDN +docs](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow#Syntax): + +```css +/* Any number of shadows, separated by commas */ +box-shadow: 3px 3px red, -1em 0 0.4em olive; +``` + +Here is a more practical [example](https://codepen.io/jbranchaud/pen/GRReaxo): + +```css +box-shadow: 0 0 0 2px #4caf50, + 0 3px 5px 0 rgba(0,0,0,0.5); +``` + +This gives the effect of a solid border with some shadow for depth. + +Multiple shadows has [pretty robust browser +support](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow#Browser_compatibility). + +[source](https://stackoverflow.com/questions/8556604/is-there-a-way-to-use-two-css3-box-shadows-on-one-element/8556627)