/sass/recipes/shadow/drop/_flying.scss
Sass | 34 lines | 26 code | 2 blank | 6 comment | 0 complexity | 7c1e54830e68df342818402e77baf57a MD5 | raw file
1/**
2 * Drop shadow flying
3 *
4 * @thanks Geoffrey Crofte @geoffrey_crofte
5 * @link http://www.creativejuiz.fr/trytotry/css3-box-shadow-after-before/
6 */
7@mixin drop-shadow-flying(
8 $box-shadow-radius: 30px,
9 $color: #000,
10 $distance: 1em,
11 $height: 2px
12)
13{
14 position: relative;
15
16 &:before,
17 &:after
18 {
19 content: " ";
20 position: absolute;
21 z-index: -2;
22 bottom: -$distance;
23 }
24
25 &:after
26 {
27 left: 8%;
28 width: 84%;
29 height: $height;
30 background: rgba(#000, .3);
31 @include border-radius(#{50%} / #{1px});
32 @include box-shadow(0 $height $box-shadow-radius/2 rgba(#000, .2), 0 $height $box-shadow-radius rgba(#000, .15));
33 }
34}