Reputation: 176
I have the following code:
.reviewed {
background-color: rgba(228, 225, 219, 1);
}
.deleted {
background-color: red;
}
<table>
<tr>
<td>№</td>
<td>Name</td>
</tr>
<tr class="reviewed">
<td>1</td>
<td>Ivan</td>
</tr>
<tr>
<td>2</td>
<td>Andrey</td>
</tr>
</table>
How can I make it so that when both the classes .deleted
and .reviewed
are set on an element the background-color
of .deleted
takes into account the background-color
of .reviewed
?
When using the two classes the color should be darker than if it was just using the class .deleted
.
Upvotes: 10
Views: 36863
Reputation: 272446
If you are using a CSS preprocessor e.g. SASS/LESS you can simply define two color variables and use color mixing functions to generate the third color.
$color1: rgba(228, 225, 219, 1);
$color2: red;
.reviewed {
background-color: $color1;
}
.deleted {
background-color: $color2;
}
.reviewed.deleted {
background-color: mix($color1, $color2);
}
Upvotes: 1
Reputation: 14183
In this instance background-blend-mode: mulitply;
can give you the desired effect of darkening the background-color
of .deleted
.
The following changes are required:
background-color:rgba(228, 225, 219, 1);
to background-image: linear-gradient(0deg, rgba(228, 225, 219, 1), rgba(228, 225, 219, 1));
in .reviewed
. This will give .reviewed
the same background colour but will enable background-blend-mode
to work with the background-color
set on .deleted
background-blend-mode: multiply;
to .deleted
to enable the background colour to blend with the "background image" set on .reviewed
.reviewed {
background-image: linear-gradient(0deg, rgba(228, 225, 219, 1), rgba(228, 225, 219, 1));
}
.deleted {
background-blend-mode: multiply;
background-color: red;
}
<table>
<tr>
<td>Number</td>
<td>Name</td>
</tr>
<tr class="reviewed">
<td>1</td>
<td>Reviewed</td>
</tr>
<tr class="reviewed deleted">
<td>2</td>
<td>Reviewed and deleted</td>
</tr>
<tr class="deleted">
<td>3</td>
<td>Deleted</td>
</tr>
</table>
The advantage to this is that you don't have to specify a third colour as the calculation is done by CSS. The disadvantage is the there is currently no support for this in IE or Edge.
background-blend-mode
is supported by Firefox, Chrome and partially supported by Safari. http://caniuse.com/#feat=css-backgroundblendmode
Upvotes: 10
Reputation: 4758
.reviewed {
background-color:rgba(228, 225, 219, 1);
}
.deleted {
background-color:red;
}
.reviewed.deleted {
background-color:/*use color code for something dark red*/
}
.reviewed.deleted
means the element having class reviewed
anddeleted
Upvotes: 5
Reputation: 148
you can set the css background to a gradient and produce a similiar effect as in photoshop
example gradient
background-image: -webkit-linear-gradient(to bottom right, red, rgba(255,0,0,0));
background-image: -ms-linear-gradient(to bottom right, red, rgba(255,0,0,0));
background-image: -o-linear-gradient(to bottom right, red, rgba(255,0,0,0));
background-image: -moz-linear-gradient(to bottom right, red, rgba(255,0,0,0));
Upvotes: 2