Comunidad de diseño web y desarrollo en internet online

BG Image Transition

Citar            
MensajeEscrito el 19 Ago 2011 03:05 pm
Buenas!
La consulta que tengo es la siguiente
Quiero hacer que mi logo aparesca en blanco y negro (un png de bg) y el hover que se haga una transición linear de 1 segundo al PNG color que tengo.

Como tendria que hacerlo... porque no se bien como ponerlo en la transition.

Saludos!

Por Kombul

35 de clabLevel



 

chrome
Citar            
MensajeEscrito el 19 Ago 2011 10:14 pm
Bueno, tienes que definir las 3 partes de una transición en la declaración: la propiedad que será "transicionada", la duración de la transición y cuán rápido sucede la transición a través del tiempo, en tu caso, la transición imagino que se hará sobre una imagen de fondo, y suponiendo que quieres una transición de medio segundo sería así:

Código :

transition- property:background;
transition-duration:0.5s;
transition-timing-function:linear;

Lo puedes abreviar de esta manera:

Código :

transition:background 0.5s linear;

Recuerda siempre poner los prefijos de todos los navegadores y luego al final de todo, la declaración lisa y llana,para asegurarte que se verá bien en todos:

Código :

-webkit-transition:
-moz-transition:
-o-transition:
transition:

ESpero que te sirva :)

Por Mechu

96 de clabLevel

1 tutorial

Genero:Femenino  

Diseño web

firefox
Citar            
MensajeEscrito el 19 Ago 2011 10:21 pm
me olvidaba: la transición la pones en el logo, no en el hover, así :

Código :

logo a{
background-image:logobyn.png;
transition:background 0.5s linear;
}
logo a:hover{
background-image:logo.png;
}

Por Mechu

96 de clabLevel

1 tutorial

Genero:Femenino  

Diseño web

firefox
Citar            
MensajeEscrito el 19 Ago 2011 10:58 pm
Kombul! otra vez yo, perdona, esto me pasa por apurada! lo cierto es que aún no se pueden hacer transiciones de imágenes. El cod que te pasé si te funcionará para transicionar el color de fondo, pero no podrás con el hacer una transición de una imagen de fondo a otra!
Dependiendo de como es el logo, supongamos que es cuadrado, tal vez lo puedas resolver agregando así mismo un color de fondo rgba por sobre el logo y modificando el alpha de ambos estados, de manera tal que puedas jugar con el apha...se entiende? quedaría como un fade in o fade out, pero no de blanco y negro a color...lamento no poder ayudarte exactamente con lo que necesitas, pero si tienes dudas con esto me dices saludos!

Por Mechu

96 de clabLevel

1 tutorial

Genero:Femenino  

Diseño web

firefox
Citar            
MensajeEscrito el 22 Ago 2011 12:27 am
Mechi, muchisimas gracias por tu interés y por preocuparte por mi problema.
Sin embargo... Vi webs que hacen transiciones de imagen blanco y negro a color...

Capaz que lo hacen con el método que me dijiste de rgba...
Probaré, de todas formas muchisimas gracias!

Saludos
Guille.

Por Kombul

35 de clabLevel



 

chrome

 

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