Fondo Nevado con CSS3

Posteado el 03. Oct, 2012 por tuto in Desarrollo Web, HTML y CSS, HTML5

En esta ocasión vamos a ver como podemos hacer de la manera más sencilla un fondo nevado que podemos aplicar a nuestras web utilizando CSS3.

Primero vamos a crear un HTML que contenga el siguiente código, considero que no es necesario explicarlo ya que no contiene nada fuera de lo común.’

De este código cabe destacar que no hemos utilizado imágenes para generar los copos de nieve, simplemente hemos colocado el código HTML que nos muestra el símbolo copo.

Code block

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<html>
<head>
   <title>Fondo Nevado CSS3 -  Tutoriales en la Web</title> 
<link rel="stylesheet" href="nieve.css" type="text/css"> 
</head>
 
<body>
<div id="container">
 
<div id="snow" class="snow">   
   <div class="copos f1">?</div> 
   <div class="copos f2">?</div> 
   <div class="copos f3">?</div> 
   <div class="copos f4">?</div> 
</div> 
<div id="ground"></div> 
 
</div>
 
</body>
</html>

Creamos un documento CSS llamado nieve.css dentro del cual vamos a pegar el siguiente código CSS.

Code block

#container{      
   background: #666 url(images/fondo-nieve.jpg) no-repeat;
   width: 400px;
   height: 300px;      
   position: relative;   
}

#container tiene un tamaño determinado y una imagen la cual luego podemos sustituir.

A continuación damos propiedades al conjunto de la nieve en general y luego a cada copo en particular.

Code block

@-webkit-keyframes nieve{
   from {top: -10px;}
   to {top: 450px;}
}
 
@-webkit-keyframes copos{
    0% { -webkit-transform: rotate(-180deg) translate(0px, 0px);}
    100% { -webkit-transform: rotate(180deg) translate(10px, 75px);}
}

Con el primero decidimos que los copos vayan de la parte superior a la inferior, del tal forma que parezca que aparecen por arriba y desaparecen por abajo.

En el segundo lo que le decimos es que cada copo va ir girando haciendo una semicircunferencia, saliendo el copo desde 10px para finalizar en 75px.

Una vez que tenemos ya nuestros fotogramas clave nos queda darle propiedades a nuestras animaciones. Para ello creamos un estilo para las animaciones nieve y copos y a parte, una serie de estilos para cada copo en particular. Aquí, como en el ejercicio anterior, podemos crear todos los copos que necesitemos.

Code block

#snow div {
   position: absolute;
   top: -40px;
   -webkit-animation-name: nieve, copos;
   -webkit-animation-iteration-count: infinite; 
   -webkit-animation-direction: normal; 
   -webkit-animation-timing-function: ease-in;
}
.copos {
   color: #fff;
   font-size: 1em;
   position: absolute;   
}
.copos.f1 {
   left: 40px;
   -webkit-animation-duration: 5s;   
}
.copos.f2 {
   font-size: 1.8em;
   left: 120px;
   -webkit-animation-duration: 7s;   
}
.copos.f3 {
   left: 200px;
   -webkit-animation-duration: 8s;   
}
.copos.f4 {
   font-size: 1.5em;
   left: 280px;
   -webkit-animation-duration: 6s;   
}

Listo con esto ya tenemos nuestro efecto de copos de nieve.

Fondo nevado con CSS3

Articulos relacionados:

Tags: css3, html5

Una respuesta para “Fondo Nevado con CSS3”

Bitacoras.com

03. Oct, 2012

Información Bitacoras.com…

Valora en Bitacoras.com: En esta ocasión vamos a ver como podemos hacer de la manera más sencilla un fondo nevado que podemos aplicar a nuestras web utilizando CSS3. Primero vamos a crear un HTML que contenga el siguiente código, considero que no ……

Tutoriales en la Web