- This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
Viewing 4 posts - 1 through 4 (of 4 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Working on a project, I have the following sass mixin:
@mixin boxshadow {
box-shadow: 0 1px 2px darken($brand-color, 20%);
}
This is great where the box shadow is sitting on the $brand-color background.
But what if I wanted to use that same mixin where the the background color is not $brand-color. Is there another way that I could set that up so that it just darkens the color that the shadow is “sitting” on—kind of like multiply or darken in Photoshop?
Thanks!
@mixin boxshadow($h: 0px, $v: 1px, $b:2px, $brand-color: rgba(0,0,0,.25)){
-webkit-box-shadow : $h $v $b $brand-color;
-moz-box-shadow : $h $v $b $brand-color;
box-shadow : $h $v $b $brand-color;
}
Using it, like so:
div{
@include boxshadow(0px,1px,2px,rgba(green,0.4));
}
If you don’t specify any options and use the mixin as `@include boxshadow()` default styles defined in the mixin will be applied.
If you ever want a box-shadow mixin able to accept and output multiple shadows, I just made one:
@mixin shadow($list) {
$res: null;
@each $s in $list { $res: $res, unquote($s); }
@include experimental(box-shadow, $res, -moz, -webkit, not -o, not -ms, not -khtml, official);
}
div {
@include shadow( (“inset 0 1px 1px red”, “2px 2px black”) );
}
Good one @HugoGiraudel