Foros del Web » Creando para Internet » CSS »

¿es posible? incrementar el color de un componente

Estas en el tema de ¿es posible? incrementar el color de un componente en el foro de CSS en Foros del Web. Hola a todos, quiero hacer una cosa que no se si es posible, imaginense de que tengo este div Código HTML: <div id= "midiv" style= ...
  #1 (permalink)  
Antiguo 25/11/2013, 08:14
 
Fecha de Ingreso: enero-2011
Mensajes: 88
Antigüedad: 13 años, 6 meses
Puntos: 1
¿es posible? incrementar el color de un componente

Hola a todos,

quiero hacer una cosa que no se si es posible,

imaginense de que tengo este div

Código HTML:
<div id="midiv" style="background-color: #113422">este es mi div</div> 
lo que quiro hacer es que cuando pasa algun evento oscurecer el div de este modo
  • color_del_div = color_del_div + 5;

teniendo jquery importado he probado esto pero no funciona.
Código HTML:
var color = $('#midiv').css('background-color');
$('#midiv').css('background-color', color + 5);


no se como si se podría hacer con less.

¿Se puede hacer algo así?

Gracias, un saludo.
  #2 (permalink)  
Antiguo 25/11/2013, 09:58
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años
Puntos: 2114
Respuesta: ¿es posible? incrementar el color de un componente

Supongo que habrá en less, igual que hay en Sass, alguna función tipo darken() para oscurecer algún color.
Pero los lenguajes de preprocesado se compilan normalmente, así que si quieres hacerlo mediante CSS, pues tendrás que crear esa clase y añadirla mediante JavaScript en lugar de cambiar los estilos.

Algo así:

Código CSS:
Ver original
  1. #midiv {
  2.   backround-color: #ff0000;
  3.   &.oscuro {
  4.     background-color: darken(#ff0000);
  5.   }
  6. }

Mejor hacerlo así con una función que ya tenga less a crear algo propio ya que oscurecer o aclarar un color es más complejo que un + 5.
  #3 (permalink)  
Antiguo 25/11/2013, 11:57
 
Fecha de Ingreso: mayo-2013
Mensajes: 207
Antigüedad: 11 años, 1 mes
Puntos: 31
Respuesta: ¿es posible? incrementar el color de un componente

Tengo una duda con respecto a
Cita:
color_del_div = color_del_div + 5;
¿Qué daría tu ejemplo con color #113422 al oscurecerlo con el +5?
  #4 (permalink)  
Antiguo 25/11/2013, 12:48
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años
Puntos: 2114
Respuesta: ¿es posible? incrementar el color de un componente

Cita:
Iniciado por alzacon Ver Mensaje
Tengo una duda con respecto a

¿Qué daría tu ejemplo con color #113422 al oscurecerlo con el +5?
Daría lo mismo que:

Código Javascript:
Ver original
  1. var = "hola" + 5;
  #5 (permalink)  
Antiguo 25/11/2013, 13:52
 
Fecha de Ingreso: mayo-2013
Mensajes: 207
Antigüedad: 11 años, 1 mes
Puntos: 31
Respuesta: ¿es posible? incrementar el color de un componente

Cita:
Iniciado por pzin Ver Mensaje
Daría lo mismo que:

Código Javascript:
Ver original
  1. var = "hola" + 5;
La respuesta ya la sabía, por eso no le funciona. Pero saber su respuesta ayuda a conocer porque ha querido plantear esa solución erronea a su "problema".
  #6 (permalink)  
Antiguo 26/11/2013, 01:18
 
Fecha de Ingreso: noviembre-2013
Ubicación: Hermosillo, sonora, mexico
Mensajes: 4
Antigüedad: 10 años, 7 meses
Puntos: 0
Respuesta: ¿es posible? incrementar el color de un componente

Lo mejor como ya comentaban no es añadirle +5 al color, si no asignarle un color en hexadecimal (#ffffff), en este caso tu eliges el color lo que para ti es mas "oscuro", y modificas el css de la clase o id. Yo lo haria de la siguiente manera:

Jquery:
Código:
$('#midiv').tuevento(function(){
			$(this).css({"backgroud":"#6CA8F2"});
});
personalmente te aconsejaria buscar el color base y el color "oscurecido" y hacerlo asi de sencillo, estoy casi seguro que debe existir un metodo como mencionan pero si te urge trabaja con lo que sabes y lo que funciona.

te recomiendo ampliamente en todo tipo de codigo que hagas prueba y verifica que te lanza cada get (en su casa cada cosa que hagas) que utlizas para saber como modificarlo o usarlo, usa mucho el alert(caso jquery) por ejemplo en tu caso obtiene rgba 0,0,0,0 lo cual no es un numero para sumarle 5.

Saludos y espero haberte ayudado o encuentres pronto alguna solucion de tu gusto.

Etiquetas: aumentar, background-color, incrementar, less
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:41.