Be the first user to complete this post
|Add to List
How to set a box shadow on left or right only or just on a single slide
Recently I wanted to create a container which only had a shadow on one edge - the top edge. Here's a simple approach to achieve it with pure css syntax. Check out the jsfiddle for the css classes written in the handy scss syntax.
TLDR, Here's a JSFIDDLE with the SCSS classes.
The key ingredient here is the negative value of the 'spread-radius' property, negative values of which cause the shadow to shrink. This shrinking, in combination with the offset, gives an appearance that the shadow is only on one edge of the box.
The interesting thing is that box shadow allows multiple shadows, separated by a comma. You can combine that to have shadows in multiple directions.
/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 0 -5px 5px -5px black;
box-shadow: 0px 5px 5px -5px black, 0px -5px 5px -5px black;
- A github gist
- css: margin does not work
- position: relative
- css - circular profile pictures
- css : center element vertically and horizontally
- css - vertically align text
- css - align text to an image vertically
- Applying floats and clearfix to block elements