Comunidad de diseño web y desarrollo en internet online

Interpolación color (fade) en CSS

Foros de discusión > Javascript y jQuery

Citar            
MensajeEscrito el 01 Mar 2008 11:54 am
Buenas, quería saber cómo se hace la interpolación de colores (parecido a Flash) en CSS. Me imagino que no se puede, lo que necesito es alguna función de javascript para hacerlo. Gracias.

Por mcapu

181 de clabLevel



Genero:Masculino  

Envíale un mensaje privado    

firefox
Citar            
MensajeEscrito el 01 Mar 2008 01:20 pm
Esto es lo que buscas.
Chau ^^

Por CarlosRuminott

1000 de clabLevel

6 tutoriales

 

Envíale un mensaje privado    

Mdz, Arg

firefox
Citar            
MensajeEscrito el 01 Mar 2008 01:42 pm

CarlosRuminott escribió:

Esto es lo que buscas.
Chau ^^

Em... cómo se usa jQuery en este caso?
:o

Lo más parecido que he visto... es mediante CSS, así.
Pero es interpolación de un solo tono (más conocido como "degradado").

Para interpolar entre dos colores... habria que pasar por javascript... pero eso lo haría pesadísimo.
¿Qué querrías hacer concretamente?


PD: ahora que lo pienso... tb se podría hacer "degradado" entre dos tonos distintos... sólo con que la imagen de fondo, fuera en color, en lugar de B/N...

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Envíale un mensaje privado    

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox
Citar            
MensajeEscrito el 01 Mar 2008 02:00 pm
Al final le he metido el jQuery para hacer el fade. Funciona bien. Otra cosa que no encuentro por ningún lado es insertar una función javascript dentro de css. Quiero que al "evento" :hover se ejecute una función, que es la que lo hace cambiar de color. Esto es para no tener que meterlo en cada vínculo. Gracias de nuevo.

Por mcapu

181 de clabLevel



Genero:Masculino  

Envíale un mensaje privado    

firefox
Citar            
MensajeEscrito el 01 Mar 2008 07:32 pm
No puedes ejecutar Javascript desde css, tanto por razones de seguridad como de usabilidad. Lo que puedes hacer es uso de los magnificos selectores de jQuery:

Código :

$(document).ready( function(){
   $("a").mouseover( function(){
      hacerFuncion( this );
   });
   $("a").mouseout( function(){
      deshacerFuncion( this );
   });
});

Con eso, cada vez que se entre o salga del area de un <a>, se ejecutará la funcion que quieras.

Un saludo ;)

Por Lunatic Lycanthrop

Claber

1203 de clabLevel

7 tutoriales

1 ejemplo

Genero:Masculino  

Envíale un mensaje privado    

The dark places where wolves access internet with 46,6 kbps

firefox
Citar            
MensajeEscrito el 02 Mar 2008 02:28 pm
¿hola?
¿Alguien tendría a bien explicarme qué tiene que ver
la interpolación de colores (parecido a Flash)
con el jQuery?

Ju... mi no entender...
¿Puedes poner una URL donde ver cómo lo has resuelto?

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Envíale un mensaje privado    

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox
Citar            
MensajeEscrito el 02 Mar 2008 04:00 pm
Pues lo hice poniendo dos imágenes y haciendo un fade en una de ellas. Lo que pasa es que tardaba bastante en cargar y lo cambié por una librería parecida a jQuery, mootools. Además te deja hacer un montón de efectos. Si quieres ver lo que quería hacer exactamente, es el menú de la derecha:
[/url]http://mcapu.webcindario.com/wordpress/[/url]

Por mcapu

181 de clabLevel



Genero:Masculino  

Envíale un mensaje privado    

firefox
Citar            
MensajeEscrito el 02 Mar 2008 04:02 pm

Por mcapu

181 de clabLevel



Genero:Masculino  

Envíale un mensaje privado    

firefox
Citar            
MensajeEscrito el 03 Mar 2008 02:34 am
Bua!!
Acaso te refieres a un "efecto" de fade-in/fade-out?
Esq... eso está, por ejemplo... aquí

...
pero como decías "interpolar"
¿no te entendí?

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Envíale un mensaje privado    

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox
Citar            
MensajeEscrito el 03 Mar 2008 06:48 pm
Buenas de nuevo. Tengo este código en javascript, sirve para hacer el fade de color. Lo que quiero ahora (está hecho con Mootools) es obtener el color actual de un elemento para así después volver a ese color y no a otro. Me explico mejor: quiero saber que es rojo para cambiar el color a blanco y que, cuando el ratón se vaya, vuelva a rojo y no a verde o se quede en blanco.

Código :

color=function(elque, colorfondo, color){   

   elque.each(function(element) {
   
        coloranterior= //algo que no sé
        colorfondoanterior= //más de lo mismo
   var fx = new Fx.Styles(element, {duration:300, wait:false});
       
   element.addEvent('mouseenter', function(){
         fx.start({
            'background-color': colorfondo,
            'color': color,
      });   
   });   
    
   element.addEvent('mouseleave', function(){
         fx.start({
            'background-color': colorfondoanterior,
            'color': coloranterior
      });
   });
    
});

};

Por mcapu

181 de clabLevel



Genero:Masculino  

Envíale un mensaje privado    

firefox
Citar            
MensajeEscrito el 03 Mar 2008 06:49 pm
Y gracias, Rizome ^^ .

Por mcapu

181 de clabLevel



Genero:Masculino  

Envíale un mensaje privado    

firefox
Citar            
MensajeEscrito el 03 Mar 2008 07:37 pm
ehm...

//ambas propiedades han de ser definidas explicitamente antes de usarlas por vez primera.
elemento.style.backgroundColor //devuelve el color de fondo actual de un elemento.
elemento.style.color //devuelve el color actual de un elemento.


¿esta vez sí te entendí bien?

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Envíale un mensaje privado    

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox
Citar            
MensajeEscrito el 03 Mar 2008 08:13 pm
Esta vez sí :D . ¿Lo que quieres decir con que han de ser definidas explícitamente es que debo incluirlas en el javascript? ¿No sirven los CSS? Gracias otra vez.

Por mcapu

181 de clabLevel



Genero:Masculino  

Envíale un mensaje privado    

firefox
Citar            
MensajeEscrito el 03 Mar 2008 11:29 pm
Por lo que creo haber probado, es que si pones:
<style>
.clase{propiedad1;}
</style>
<elemento1 class="clase" />
<elemento2 style="propiedad2;" />
Cuando luego llames:
javascript:elemento1.style.propiedad1; -> aparece como "undefined"
javascript:elemento2.style.propiedad2; -> aparece apropiadamente "definida"

Aquí tienes un ejemplo:

Código :

<html>
<head>
<title>CSS y JSP</title>
<script language=JavaScript1.2>
window.onload=function(){alert('elemento1: '+document.getElementById('elemento1').style.color+';\nelemento2: '+document.getElementById('elemento2').style.color+';')};
</script>
<style>
.clase{color:blue;}
</style>
<head>
<body>
<font class="clase" id="elemento1">a</font>
<font style="color:red;" id="elemento2">b</font>
</body>
</html>


Así que con "explicitamente", me refería a que tiene que ser definida desde el xHTML, mediante los atributos "style" (evidentemente, tb valdría hacerlo desde JSP, pero sería algo inapropiado (en un principio) )
Lo que al parecer no funciona (de cara a luego pedir el valor del atributo mediante JSP), es definir el estilo mediante hojas de CSS (clases, ID, pseudoclases... etc)

(aunque imagino que habrá algún "parche" a lo que digo, desde luego, parece que la "solución", no es inmediata)

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Envíale un mensaje privado    

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox
Citar            
MensajeEscrito el 04 Mar 2008 01:38 am
Si decides seguir con jQuery (lo que te recomiendo ;) ) podrás usar un plugin de esta librería, que te permite hacer interpolaciones de color de una manera muy sencilla.

Puedes verlo aca: http://plugins.jquery.com/project/color

Un saludo

Por Lunatic Lycanthrop

Claber

1203 de clabLevel

7 tutoriales

1 ejemplo

Genero:Masculino  

Envíale un mensaje privado    

The dark places where wolves access internet with 46,6 kbps

firefox
Citar            
MensajeEscrito el 04 Mar 2008 07:00 pm
Después de mucho tiempo, di con ello. Lo encontré en
http://www.telefonica.net/web2/blas-mar/leercss.html#
Pero vaya trabajo que me ha dado.

Código :

function buscarPropiedad(selector,propi) {
  if (document.all)
    miRegla = document.styleSheets[0].rules;
   
  else
    miRegla = document.styleSheets[0].cssRules;
     
  for (i=0; reg=miRegla[i]; i++){
    if (miRegla[i].selectorText.toLowerCase() == selector.toLowerCase() ){
      return miRegla[i].style[propi];
     }
   }
}


Lo que consigues con esta función es leer la hoja de CSS. Ahora hay que llamarla bien:

Código :

colorRGB=buscarPropiedad(elque[0].className, 'color');
coloranterior=colorRGB.rgbToHex();//porque, si no, mootools da error


Con esto ya me funciona:cool:. Gracias a todos ^^

Por mcapu

181 de clabLevel



Genero:Masculino  

Envíale un mensaje privado    

firefox
Citar            
MensajeEscrito el 05 Mar 2008 12:54 pm

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Envíale un mensaje privado    

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox
Foros de discusión > Javascript y jQuery

   Página 1 de 1

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.