I'm playing with a bunch of elements where I'm transitioning the box-shadow on :hover.
The problem is, I just need to change the color of the box-shadow. But every time I do this, I have to write the whole box-shadow rule as there's no box-shadow-color property in CSS.
Is there a more logical way of doing this?
I think a box-shadow-color property is very needed.
Don't take this the wrong way, but if a half dozen to dozen extra characters and ^C^V is too hard, maybe you shouldn't be writing HTML/CSS... Hell I'm not sure it would even be less characters.... take @Kleo's example removing the selectors so we can see the number of characters as a line.
box-shadow:1px 1px 25px; color:#000; color:#F00;
box-shadow:1px 1px 25px #000; box-shadow:1px 1px 24px #F00;
REALLY? That's "so hard" you need a separate property? Of course if it WERE a separate property, guess what?!?
box-shadow:1px 1px 25px #000; box-shadow:1px 1px 24px #F00;
box-shadow:1px 1px 25px #000; box-shadow-color: #F00;
Again, if a half dozen characters at best. ^C^V is your friend! It's so close as to make no-never-mind!
Admittedly, I say the same thing about that preprocessor SCSS asshat nonsense; usually it means someone is being too lazy to type, or simply failing to grasp how to use selectors properly in the first place.
Hey, i found this one awesome website you'll def want to check shnb.io it got a pretty easy-to-use box-shadow code generator Good luck
TL;DR
CSS variables(when they are fully supported) is the way to go. Or if you're using a CSS preprocessor, you can use variables for colors there.
Explanation
There's no property as box-shadow-color, nor will ever be. For a simple reason that you can use multiple colors in box-shadow.
So writing something like this is totally valid:
box-shadow: 3px 3px red, -1em 0 0.4em black;
box-shadow can get pretty complex this way, so a box-shadow-color property won't make sense here (more: developer.mozilla.org/en/docs/Web/CSS/box-shadow).
If you want to emulate the color change behaviour without writing a new rule though, you can resort to using CSS variables(as @Kleo mentioned). The support is a problem, but that would get better with time.
A logical approach towards doing this now would be using a CSS preprocessor with variables for colors. Otherwise, traditional approach works just fine.
There is no official spec for changing only the color of the box shadow. There is though a simple way to simulate this behavior. Based on the w3 spec, if not explicitly set, the box-shadow property will take the color value, meaning you can do something like this:
.box-shadow {
width: 30px;
height: 30px;
box-shadow: 1px 1px 25px;
color: #000;
}
.box-shadow:hover {
color: #ff0000;
}
Here is a demo of the example - box-shadow hover.
Another way of doing this is to use CSS Variables. Your code will look something like that:
.box-shadow {
--box-shadow-color: #000; /* Declaring the variable */
width: 30px;
height: 30px;
box-shadow: 1px 1px 25px var(--box-shadow-color); /* Calling the variable */
}
.box-shadow:hover {
--box-shadow-color: #ff0000; /* Changing the value of the variable */
}
Keep in mind that currently the support for CSS variables is really poor.
box shadow takes 5 parameters and the last one is color
some-stuff__u {
box-shadow:8px 8px 8px 8px blue;
}
Jason Knight
The less code you use, the less there is to break
Misael Taveras
#JSDev. Coffee :3 @taverasmisael anywhere else.
It's always an option to use SASS, LESS, or the preprocessor with the flavor you like the most, and create box-shadow-button mixin that only takes as parameter the color, and output all the other boring stuffs so you don't have to copy paste all the styles