Páginas

▼

01 julio 2011

CSS3: Cambiar color de fondo dinámicamente

Ahora seguimos creando estas animaciones con CSS3 puro. En la categoría de CSS3 puedes ver todas las nuevas propiedades que tiene la tercera versión del CSS. Esta vez veremos como cambiar el color de fondo de cualquier elemento de nuestra página web. Aqui el ejemplo:
Texto de ejemplo
Muy pocos sitios web utilizaban este tipo de efectos con Javascript, debido a la dificultad del Javascript para crear este tipo de efectos. Por lo que con la facilidad para aplicarlo con CSS se espera que se difunda por muchos sitios web.Fondo Dinámico

La propiedad que cambia dinámicamente el color de fondo es de nuevo CSS3:transition, que es la misma que utilizamos para girar elementos, animar los enlaces y también para agrandar imágenes o texto, todo al pasar el mouse.

El código CSS es el siguiente: 
.backAnim{
display:block;
text-align:center;
background:gray;
-webkit-transition:background 1s ease-out;
-moz-transition:background 1s ease-out;
-o-transition:background 1s ease-out;
-ms-transition:background 1s ease-out;
transition:background 1s ease-out;
}
.backAnim:hover{
background:blue;
}

En donde:

gray: Es el color inicial, puedes cambiarlo por cualquier color.

blue: Es al color que cambia cuando pasa el cursor por encima del elemento que queramos. Puedes cambiarlo por cualquier color.

1s, se repite varias veces, por la compatibilidad de varios navegadores. Es el tiempo que tarda para cambiar el color de fondo. Puedes cambiarlo por el tiempo que desees anotándolo en segundos

Ahora solo debemos instalarlo en el blog de la siguiente manera:

[1]Entramos al panel de Diseño>Edicion HTML>Sin expandir plantillas de artilugios

[2]Buscar con 
Ctrl+F
: 
]]></b:skin>


[3] Justo antes de 
]]></b:skin>
pegar el código CSS3, quedará algo así:
.backAnim{
display:block;
text-align:center;
background:gray;
-webkit-transition:background 1s ease-out;
-moz-transition:background 1s ease-out;
-o-transition:background 1s ease-out;
-ms-transition:background 1s ease-out;
transition:background 1s ease-out;
}
.backAnim:hover{
background:blue;
}
]]></b:skin>
 Ahora en donde quieras colocar este buen efecto, tendrás que modificar el elemento de la siguiente manera:
Antes
<div>Elemento de tu sitio web</div>
 
<p>Parrafo con texto</p>
Despues
<div class="backAnim">Elemento de tu sitio web</div>
 
<p class="backAnim">Parrafo con texto</p>





Es solo cuestión de imaginación, podemos colocar este efecto a nuestro gadget de "Archivo del Blog", puedes echar un vistazo a mi gadget "Explora la Web" y pasa el mouse por encima. El CSS que utilizé es el siguiente: 
#BlogArchive1_ArchiveList li{ /*EFECTO*/
-webkit-transition:background .7s ease-out;
-moz-transition:background .7s ease-out;
-o-transition:background .7s ease-out;
-ms-transition:background .7s ease-out;
transition:background .7s ease-out;
}
#BlogArchive1_ArchiveList li:hover{ /*AÑO*/
  background:black !important;
}
#BlogArchive1_ArchiveList li li:hover{ /*MES*/
  background:red !important;
}
#BlogArchive1_ArchiveList li li li:hover{ /*ENTRADA*/
  background:green !important;
}
Están feos los colores que uso, pero próximamente crearé una entrada para personalizar el "Archivo del blog" con todo el poder de CSS3 puro y duro!! En la que utilizaré ya en práctica girar elementos, animar los enlaces y agrandar imágenes o texto esperenlo :P

Si te gusto, si hay cometí algún error, si te aburre comenta!!

a la/s

6 comentarios:

  1. José GDF7/02/2011 03:33:00 a.m.

    Si quieres que sea medio segundo, ¿cómo lo pones? ¿0.5s? ¿O de otra manera?

    Un saludo.

    ResponderBorrar
  2. Unknown7/02/2011 05:45:00 a.m.

    José GDF, hola!

    Exactamente para medio segundo pones .5s esta sencillo ¿no? ;D

    suerte!

    ResponderBorrar
  3. Anónimo7/15/2011 03:56:00 p.m.

    y si lo q quiero es q el fondo cambie imagenes cada cierto tiempo... me refiero al body

    ResponderBorrar
  4. Unknown7/18/2011 07:05:00 p.m.

    Anónimo, mm solo funciona con colores de momento. Para cambiar el color del body solo cambia el .backAnim por la palabra body

    Saludos!

    ResponderBorrar
  5. Artemisa7/19/2011 04:20:00 p.m.

    wow esto es justo lo que necesitaba, pero como soy una patosa por mas que intento no consigo ponerlo para que en puesto de que cambie el gadget entero (comentarios por ejemplo) que cambie cada comentario individualmente al pasar el mouse.
    Podrias echarme una manita con esto

    ResponderBorrar
  6. Unknown8/03/2011 10:23:00 p.m.

    Artemisa, claro que si, cambia el ".backAnim" del código de arriba por "div#comments div", claro que sin las comillas. Suerte!!

    ResponderBorrar

Si necesitas ayuda mas personalizada deja un <a href='URL'>ENLACE</a> hacia tu blog.