I have 9 differently colored buttons (red, orange, yellow, green, blue, purple, pink, off-white and slate) and I was wondering if it was possible to manipulate and alter only the color of the text-shadow CSS property for these buttons, while keeping the other values the same?
For example, I have two different classes; one is for buttons with 11px font size and the other is for 14px font size (standard across my website):
.button-11 {
font-size: 0.8em;
border-width: 0.09091em;
border-style: solid;
padding: 0 0.90909em;
text-shadow: 0.09091em 0.09091em 0 rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 -0.09091em rgba(255, 255, 255, 0.3) inset;
-moz-box-shadow: 0 -0.09091em rgba(255, 255, 255, 0.3) inset;
box-shadow: 0 -0.09091em rgba(255, 255, 255, 0.3) inset;
}
.button-14 {
border-width: 0.07143em;
border-style: solid;
padding: 0 0.71429em;
text-shadow: 0.07143em 0.07143em 0 rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 -0.07143em rgba(255, 255, 255, 0.3) inset;
-moz-box-shadow: 0 -0.07143em rgba(255, 255, 255, 0.3) inset;
box-shadow: 0 -0.07143em rgba(255, 255, 255, 0.3) inset;
}
For those unaware, I have two separate classes because each font size requires different values for the borders and text shadow, since I'm using the em measurement - 0.09em equates to 1px at font size 11px, and 0.07em equates to 1px at font size 14px.
So, in order to cut down on the CSS file size, it would help greatly if I could simply change the color of the text-shadow CSS properties without having to include the other values.
Does anyone know if this is possible?
Thank you.
Answer
Unfortunately, no: it seems (according to the specification) that there is no box-shadow-color property.
The above left intact, though it was addressing the wrong properties; to address the question, though it seems that the same point is true of the text-shadow property, with the text-shadow-color similarly unsupported (and non-existent in the specification).
No comments:
Post a Comment