Dynamically change color to lighter or darker by percentage CSS
All modern browsers have had 100% filter
support since January 2020. Even UC Browser for Android (instead of Chrome, on the $80 phones) supports it.
a {
/* a nice, modern blue for links */
color: #118bee;
}
a:active {
/* Darken on click by 15% (down to 85%) */
filter: brightness(0.85);
}
Additionally, you can control this dynamically with CSS variables, which have been supported by most browsers since October 2017 (excluding QQ):
:root {
--color: #118bee;
--hover-brightness: 1.2;
}
a {
color: var(--color);
}
a:active {
/* Darken on click */
filter: brightness(var(--hover-brightness));
}
Not my project, but one that's great to look at for a real-world example of how great modern CSS can be, check out: MVP.css
Original Answer
If you're using a stack which lets you use Sass or Less, you can use the lighten
function:
$linkcolour: #0000FF;
a {
color: $linkcolour;
}
a.lighter {
color: lighten($linkcolour, 50%);
}
There's also darken
which does the same, but in the opposite direction.
Make the hovered element go darker, but all the other elements go lighter
You don't need jquery for this, it can be done with css. Try the code below, it will give you a good idea how to make what you want.
.box { background-color: blue; height: 50px; width: 50px; margin: 10px; opacity: 0.6;}
.wrap:hover .box:hover { opacity: 0.9;}
.wrap:hover .box:not(:hover) { opacity: 0.4;}
<div class="wrap"> <div class="box a"></div> <div class="box b"></div> <div class="box c"></div> <div class="box d"></div></div>
How to make a colour darker if light, or lighter if dark in LESS
I think the question was correctly identified as a duplicate, but for the sake of answering it correctly, here is the right answer (based on seven-phases-max's answer):
contrast(@color-input, lighten(@color-input, 10%), darken(@color-input, 10%));
You can see a working example here.
You can read more about the contrast function here.
How can I make the color of an element more dark on :hover?
You could use hsla instead of hex-colors.
example:
button{ background-color: hsla(356, 98%, 46%, 1);}
button:hover { background-color: hsla(356, 98%, 26%, 1);}
<button>button</button>
Lighten individual background-color with hover by scss - how?
Use a mixin, like so:
.block1 {
.backgroundsetup($color1);
}
.block2 {
.backgroundsetup($color2);
}
.backgroundsetup($color, $amt: 40%) {
background-color: $color;
&:hover {
background-color: lighten($color, $amt);
}
}
Related Topics
Merge Two Json/Javascript Arrays in to One Array
Why Does Prettier Not Format Code in VS Code
How to I Retrieve Last Part of Url and Use It in HTML
How to Change the State Correctly (Read-Only Error)
How to Change Background Color of a Row on Checkbox Selection
Prevent Particular Child Element from Firing Parent'S Mouseover Event in Jquery
Javascript Function (Input Date Bigger Than Today Date)
Invalid Attempt to Spread Non-Iterable Instance
How to Implement Ping/Pong Request for Websocket Connection Alive in JavaScript
Multiply and Sum Input Values Created Dynamically in Jquery
How to Increment a Number After Every 1 Second Using JavaScript
Generate a Weighted Random Number
Get the Value of Datepicker on Change in Jquery
If Check Box Checked Disable Other, If Unchecked Enable All in React
To Check If a String Is Alphanumeric in JavaScript
Get Count of True Values in Json With JavaScript