lighten - Cambiar dinámicamente el color a más claro o más oscuro por porcentaje de CSS(Javascript)
lighten css (21)
Tenemos una gran aplicación 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 mediante el código hexadecimal que agrega el archivo CSS, pero nuestro sitio permite al usuario decidir qué colores desean 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 redcuing it
}
¿Hay alguna forma de reducir un color en porcentaje?
Ahora puedes hacer esto con los filtros CSS. El soporte es dudoso, pero a medida que la especificación se siga implementando y limpiando, esto será realmente útil.
.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 algunas lecturas sobre los diversos filtros que puede usar: http://code.tutsplus.com/tutorials/say-hello-to-webkit-filters--net-23318
Actualizar
Esto parece ser cada vez más upvotes a medida que los filtros se abren camino en la corriente principal. Aquí está la compatibilidad actual: http://caniuse.com/#feat=css-filters
En MENOS, usarías las siguientes variables:
@primary-color: #999;
@primary-color-lighter: lighten(@primary-color, 20%);
Esto tomaría la primera variable y la aligeraría en un 20% (o cualquier otro porcentaje). En este ejemplo, terminarías con un color más claro: #ccc
Encontré una clase de PHP que me permitió hacer este lado del servidor. Acabo de imprimir un estilo de color CSS en línea para lo que necesito para ser más claro / más oscuro. Funciona genial.
http://www.barelyfitz.com/projects/csscolor/
(tenga en cuenta que la clase utiliza PEAR para errores de lanzamiento, pero no quería incluir PEAR solo para modificar los colores, así que simplemente eliminé todas las referencias de PEAR)
Lo convertí en una clase estática con métodos estáticos para poder llamar a las funciones "aclarar" y "oscurecer" directamente sin crear un nuevo objeto.
Uso de la muestra:
$original_color = ''E58D8D'';
$lighter_color = Css::lighten($original_color, .7);
$darker_color = Css::darken($original_color, .7);
Escribí un plugin para jquery que tenía este mismo problema. Tomo el color como una propiedad, o el color establecido de la propiedad css que quieren, y lo ejecuto a través de algunos cálculos. Hexado a RGB, luego multiplique el porcentaje de compensación, luego devuelva un nuevo valor. Déjame saber si quieres un ejemplo.
Hay "opacidad" que hará que el fondo brille a través de:
opacity: 0.5;
Pero no estoy seguro de que esto es lo que quieres decir. Definir "reducir color": ¿Hacer transparente? ¿O añadir blanco?
Los colores HSL proporcionan una respuesta, un valor de color HSL se especifica con: hsl (matiz [0,255],% de saturación,% de luminosidad).
HSL es compatible con IE9 +, Firefox, Chrome, Safari y en Opera 10+
a
{
color:hsl(240,65%,50%);
}
a.lighter
{
color:hsl(240,65%,75%);
}
No directamente, no. Pero puede usar un sitio, como colorschemedesigner.com , que le dará su color base y luego le dará los códigos hex y rgb para diferentes rangos de su color base.
Una vez que encuentro mis combinaciones de colores para mi sitio, coloco los códigos hexadecimales de los colores y los nombro dentro de una sección de comentarios en la parte superior de mi hoja de estilo.
Algunos otros generadores de esquema de color incluyen:
Para css llamado color ''blue'', hay ''lightblue''
Para ''verde'', hay ''lightgreen''
Para ''gris'', hay ''lightgrey''
Para ''amarillo'', hay ''lightyellow''
Intente navegar por esta lista de colores llamada css para obtener más información: http://www.w3schools.com/CSS/css_colornames.asp
Parece que jPaq ( http://jpaq.org/ ) es el reemplazo para JXtension. La ventaja de usar jPaq es el hecho de que solo puede descargar lo que necesita en lugar de la biblioteca de JavaScript completa. Aquí hay un enlace a la página de descarga solo para la clase de Color: http://jpaq.org/download/1.0.0.1008 .
Podría usar RGBa (''a'' siendo transparencia alfa), pero aún no está ampliamente soportado. Sin embargo, lo será, por lo que podría usarlo ahora y agregar un recurso alternativo:
a:link {
color: rgb(0,0,255);
}
a:link.lighter {
color: rgb(128,128,255); /* This gets applied only in browsers that don''t apply the rgba line */
}
a:link.lighter { /* This comes after the previous line, so has priority in supporting browsers */
color: rgba(0,0,255,0.5); /* last value is transparency */
}
Puede usar una biblioteca de JavaScript como JXtension que le da al usuario la posibilidad de hacer un color más claro o más oscuro. Si desea encontrar documentación para esta nueva biblioteca, haga clic aquí . También puedes usar JXtension para combinar un color con otro.
Puedes usar un poco de javascript para calcular el color más oscuro y más claro utilizando el rgb ().
Fiddle : No es realmente agradable, pero es solo para ilustrar.
Lo que esencialmente hace es establecer un color y selecciona 20 colores con la misma cantidad (en comparación con otros) de rgb solo con 10 separados.
for (var i=-10; i < $(''.row:eq(0) .block'').length/2 ; i++) {
var r = 91;
var g = 192;
var b = 222;
$(''.row:eq(1) .block:eq(''+(i+10)+'')'').css(''background'' , color(r+(i*10),g+(i*10),b+ (i*10)) );
};
Que yo sepa, no hay manera de que puedas hacer esto en CSS.
Pero creo que un poco de lógica del lado del servidor podría hacer fácilmente lo que sugieres. Las hojas de estilo CSS son normalmente activos estáticos, pero no hay ninguna razón para que no puedan ser generadas dinámicamente por el código del lado del servidor. Su script del lado del servidor:
- Compruebe un parámetro de URL para determinar el usuario y, por lo tanto, el color elegido por el usuario. Use un parámetro de URL en lugar de una variable de sesión para que aún pueda guardar el CSS.
- Divide el color en sus componentes rojo, verde y azul.
- Incrementa cada uno de los tres componentes en una cantidad establecida. Experimenta con esto para obtener los resultados que buscas.
- Generar CSS incorporando el nuevo color.
Los enlaces a esta página de generación de CSS se verían como:
<link rel="stylesheet" href="http://yoursite.com/custom.ashx?user=1231">
Si no usa la extensión .css, asegúrese de configurar el tipo MIME correctamente para que el navegador sepa interpretar el archivo como CSS.
(Tenga en cuenta que para hacer los colores más claros debe aumentar cada uno de los valores RGB)
Reuniéndolo todo, una solución de tabla realizada exclusivamente con DIV y CSS, inténtelo;) El navegador debería admitir los colores RGBA ...
<head>
<style>
.colored-div-table {
display: table;
table-layout: fixed;
}
.colored-div-table #col {
display: table-column;
}
.colored-div-table #col:nth-child(odd) {
}
.colored-div-table #col:nth-child(even) {
}
.colored-div-table #col:nth-child(1){
background-color: lightblue;
width: 50px !important;
}
.colored-div-table #col:nth-child(2){
background-color: lightyellow;
width: 200px !important;
}
.colored-div-table #col:nth-child(3){
background-color: lightcyan;
width: 50px !important;
}
.colored-div-table #row {
display: table-row;
}
.colored-div-table #row div {
display: table-cell;
}
.colored-div-table #row div:nth-child(1) {
}
.colored-div-table #row div:nth-child(2) {
}
.colored-div-table #row div:nth-child(3) {
}
.colored-div-table #row:nth-child(odd) {
background-color: rgba(0,0,0,0.1)
}
.colored-div-table #row:nth-child(even) {
}
</style>
</head>
<body>
<div id="divtable" class="colored-div-table">
<div id="col"></div>
<div id="col"></div>
<div id="col"></div>
<div id="row">
<div>First Line</div><div>FL C2</div><div>FL C3></div>
</div>
<div id="row">
<div>Second Line</div><div>SL C2</div><div>SL C3></div>
</div>
<div id="row">
<div>Third Line</div><div>TL C2</div><div>TL C3></div>
</div>
<div id="row">
<div>Forth Line</div><div>FL C2</div><div>FL C3></div>
</div>
<div id="row">
<div>Fifth Line</div><div>FL C2</div><div>FL C3></div>
</div>
<div id="row">
<div>Sixth Line</div><div>SL C2</div><div>SL C3></div>
</div>
<div id="row">
<div>Seventh Line</div><div>SL C2</div><div>SL C3></div>
</div>
<div id="row">
<div>Eight Line</div><div>EL C2</div><div>EL C3></div>
</div>
<div id="row">
<div>Nineth Line</div><div>NL C2</div><div>NL C3></div>
</div>
<div id="row">
<div>Tenth Line</div><div>TL C2</div><div>TL C3></div>
</div>
</div>
</body>
Sé que es tarde, pero podría usar una envoltura para sus botones y cambiar el nivel de opacidad de la función de color rgba, como se dijo en otras respuestas pero sin un ejemplo explícito.
Aquí hay una pluma:
https://codepen.io/aronkof/pen/WzGmjR
#wrapper {
width: 50vw;
height: 50vh;
background-color: #AAA;
margin: 20px auto;
border-radius: 5px;
display: grid;
place-items: center;
}
.btn-wrap {
background-color: #000;
display: inline-block;
}
button {
transition: all 0.6s linear;
background-color: rgba(0, 255, 0, 1);
border: none;
outline: none;
color: #fff;
padding: 50px;
font-weight: 700;
font-size: 2em;
}
button:hover {
background-color: rgba(0, 255, 0, .5);
}
<div id="wrapper">
<div class="btn-wrap">
<button class="btn">HEY!</buutton>
</div>
</div>
Si decide utilizar http://compass-style.org/ , un framework css basado en sass, proporciona funciones sass darken() y lighten() muy útiles para generar css dinámicamente. esta muy limpio
@import compass/utilities
$link_color: #bb8f8f
a
color: $link_color
a:visited
color: $link_color
a:hover
color: darken($link_color,10)
genera
a {
color: #bb8f8f;
}
a:visited {
color: #bb8f8f;
}
a:hover {
color: #a86f6f;
}
Si quieres un color más oscuro, puedes usar rgba black con baja opacidad:
rgba(0,0,0,0.3)
Para un uso más ligero blanco:
rgba(255,255,255,0.3).
Tratar:
a {
color: hsl(240, 100%, 50%);
}
a:hover {
color: hsl(240, 100%, 70%);
}
Una respuesta simple es usar un PNG blanco transparente al 50% sobre el color:
div {
background-color:red;
}
div:hover {
background-image:url(''lighten.png'');
}
Donde lighten.png es un PNG de un relleno blanco con 50% de transparencia.
Ver mi comentario sobre la respuesta de Ctford.
Pensaría que la forma más fácil de aclarar un color sería tomar cada uno de los componentes RGB, agregarlos a 0xff y dividirlos por 2. Si eso no da los resultados exactos que desea, tome 0xff menos el valor actual multiplicado por una constante y luego agregar de nuevo al valor actual. Por ejemplo, si desea cambiar 1/3 del camino hacia el blanco, tome (0xff - current) / 3 + current.
Tendrías que jugar con él para ver qué resultados obtuviste. Me preocuparía que con esta fórmula simple, un factor lo suficientemente grande como para que los colores oscuros se desvanezcan puede hacer que los colores claros se vuelvan completamente blancos, mientras que un factor lo suficientemente pequeño como para hacer que los colores claros se aclaren un poco, los colores oscuros no sean lo suficientemente claros.
Sin embargo, creo que recorrer una fracción de la distancia al blanco es más prometedor que un número fijo de pasos.