Cambie dinámicamente el color a más claro o más oscuro por porcentaje CSS
Tenemos una aplicación grande en el sitio y tenemos algunos enlaces que son, digamos, de color azul como los enlaces azules en este sitio. Ahora quiero hacer algunos otros enlaces, pero con un color más claro. Obviamente, puedo hacerlo simplemente agregando el código hexadecimal en el archivo CSS, pero nuestro sitio permite al usuario decidir qué colores quiere para su perfil/sitio personalizado (como Twitter).
Entonces mi pregunta es: ¿podemos reducir el color en porcentaje?
Digamos que el siguiente código es CSS:
a {
color: blue;
}
a.lighter {
color: -50%; /* obviously not correct way, but just an idea */
}
O
a.lighter {
color: blue -50%; /* again not correct, but another example of setting color and then reducing it */
}
¿Hay alguna manera de reducir un color en un porcentaje?
Puede hacer esto con filtros CSS en todos los navegadores modernos (consulte la tabla de compatibilidad de Caniuse ).
.button {
color: #ff0000;
}
/* note: 100% is baseline so 85% is slightly darker,
20% would be significantly darker */
.button:hover {
filter: brightness(85%);
}<button class="button">Foo lorem ipsum</button>Aquí hay más lecturas de CSS Tricks sobre los distintos filtros que puede usar: https://css-tricks.com/almanac/properties/f/filter/
Todos los navegadores modernos tienen filtersoporte 100% desde enero de 2020 . Incluso UC Browser para Android (en lugar de Chrome, en los teléfonos de $80) lo admite.
a {
/* a nice, modern blue for links */
color: #118bee;
}
a:active {
/* Darken on click by 15% (down to 85%) */
filter: brightness(0.85);
}
Además, puede controlar esto dinámicamente con variables CSS, que son compatibles con la mayoría de los navegadores desde octubre de 2017 (excluyendo QQ):
:root {
--color: #118bee;
--hover-brightness: 1.2;
}
a {
color: var(--color);
}
a:active {
/* Darken on click */
filter: brightness(var(--hover-brightness));
}
No es mi proyecto, pero es genial verlo para ver un ejemplo del mundo real de lo fantástico que puede ser el CSS moderno. Consulte: MVP.css.
Respuesta original
Si estás usando una pila que te permite usar Sass o Less , puedes usar la lightenfunción:
$linkcolour: #0000FF;
a {
color: $linkcolour;
}
a.lighter {
color: lighten($linkcolour, 50%);
}
También está darkenel que hace lo mismo, pero en sentido contrario.
