domingo, 24 de noviembre de 2013

Crea tus cajas Informativas tipo menú animadas con CSS3


En este tutorial veremos como hacer unas elegantes cajas informativas tipo menú con HTML y animadas con CSS3, seguimos dando tips para que cada día avancemos y profundicemos mas en el mundo del diseño y desarrollo web, esta vez con algunas técnicas CSS3 para conseguir resultados agradables a la vista.
Esto es lo que vamos a lograr:
Sin mas, comencemos.

EL HTML

1
2
3
4
5
6
7
8
9
<div class="homeBox">
   <div class="caja1">
       <div class = "imagen"><img src = "images/1.png"></div>
      <h2>PROYECTO-1</h2>
      <div class = "descripcion">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit..</div>
      <div class="leermas"><a href="#">Leer Mas..</a></div>
   </div>
</div>
Ok, cada cuadro o caja lo vamos a contener mediante un div llamado “caja1″, dentro tenemos una imagen contenida por un div con clase “imagen”, luego el titulo lo hacemos con “h2″, la descripción la tenemos igualmente en un div llamado “descripcion”, y por ultimo el leer mas que también lo tenemos en un div con clase “leermas”. Algo más o menos así:
distribuccion-div

EL CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
.homeBox {
    position: relative;
    float: left;
    display: block;
}
.homeBox .caja1 {
    text-align: center;
    overflow: hidden;
    background-image: linear-gradient(bottom, #F3F3F3 100%, #FAFAFA 0%);
    background-image: -o-linear-gradient(bottom, #F3F3F3 100%, #FAFAFA 0%);
    background-image: -moz-linear-gradient(bottom, #F3F3F3 100%, #FAFAFA 0%);
    background-image: -webkit-linear-gradient(bottom, #F3F3F3 100%, #FAFAFA 0%);
    background-image: -ms-linear-gradient(bottom, #F3F3F3 100%, #FAFAFA 0%);
    background-image: -webkit-gradient( linear, left bottom, left top, color-stop(1, #F3F3F3), color-stop(0, #FAFAFA) );
    border: 1px solid #E1E1E1;
    -moz-box-shadow: 0px 1px 0px #ecebeb;
    -webkit-box-shadow: 0px 1px 0px #ecebeb;
    height: 261px;
    width: 228px;
    margin-right: 10px;
    -webkit-transition: background 0.5s linear;
    -moz-transition: background 0.5s linear;
    -o-transition: background 0.5s linear;
    transition: background 0.5s linear;
}
.homeBox .caja1 div {
    padding: 10px;
}
.homeBox .caja1:hover{
    background:#252525;
}
.homebox, damos los estilos para posicionar la caja madre para contener a una o mas box.

.homebox .caja1, estilos para la caja, alineamos el texto, damos un degradado, damos las dimensiones y aplicamos una transición al cambiar el background.
.homeBox .caja1:hover, cambiamos el color de background cuando nos posicionamos sobre la caja.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
.homeBox .caja1 .imagen {
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
.homeBox .caja1:hover .imagen {
    position: relative;
    -webkit-animation: animacion-desde-arriba 350ms ease;
    -moz-animation: animacion-desde-arriba 350ms ease;
    -ms-animation: animacion-desde-arriba 350ms ease;
}
.homeBox .caja1 h2 {
    color: #4B4A4A;
    font-family: trebuchet ms;
    letter-spacing: -1px;
    margin: 0 0 10px 0;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
.homeBox .caja1:hover h2 {
    position: relative;
    color:#EAEAEA;
    -webkit-animation: animacion-desde-arriba 200ms ease;
    -moz-animation: animacion-desde-arriba 200ms ease;
    -ms-animation: animacion-desde-arriba 200ms ease;
}
.homeBox .caja1 .descripcion {
    color: #4B4A4A;
    font-family: Times New Roman;
    margin: 0 0 10px 0;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
.homeBox .caja1:hover .descripcion {
    position: relative;
    color:#EAEAEA;
    -webkit-animation:animacion-desde-abajo 500ms ease-in-out;
    -moz-animation: animacion-desde-abajo 500ms ease-in-out;
    -ms-animation: animacion-desde-abajo 500ms ease-in-out;
}
div.leermas a {
    background: #ccc;
    font-family: trebuchet ms;
    letter-spacing: -1px;
    padding: 7px;
    text-decoration: none;
    color: #fff;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.7);
}
div.leermas a:hover {
    color: #333333;
    box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.7) inset;
}
.homeBox .caja1 .imagen, damos una transición para el cambio que va a tener esta imagen.

.homeBox .caja1:hover .imagen, le damos una posición relativa y aplicamos los parámetros para su animación , la animación para esta se llamara animacion-desde-arriba que crearemos después.
.homeBox .caja1 h2, estilos para el h2 que esta dentro de la caja.
.homeBox .caja1:hover h2, estilos que se le aplicaran al h2 en el estado hover, igualmente le aplicamos la misma animación anterior animación-desde-arriba pero va a hacer mas rápido ya que dura 200ms.
.homeBox .caja1 .descripcion, estilos al texto de descripción que tiene la caja.
.homeBox .caja1:hover .descripcion, estilos que se aplican en el estado hover, aplicamos la respectiva animación, pero esta es diferente, esta se llama animacion-desde-abajo por que vendrá desde abajo, mas adelante la haremos.
div.leermas a, estilos al enlace del leer más.
div.leermas a:hover, estilos aplicado en su estado de hover.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
@-webkit-keyframes animacion-desde-arriba {
    from {
        top: -600px;
    }
    to {
        top: auto;
    }
}
@-moz-keyframes animacion-desde-arriba {
    from {
        -moz-transform: translateY(-600%);
    }
    to {
        -moz-transform: translateY(0%);
    }
}
@-ms-keyframes animacion-desde-arriba {
    from {
        -ms-transform: translateY(-600%);
    }
    to {
        -ms-transform: translateY(0%);
    }
}
@-webkit-keyframes animacion-desde-abajo{
    from {
        bottom: -400px;
    }
    to {
        top: auto;
    }
@-moz-keyframes animacion-desde-abajo {
    from {
        -moz-transform: translateY(400%);
    }
    to {
        -moz-transform: translateY(0%);
    }
}
@-ms-keyframes animacion-desde-abajo{
    from {
        -ms-transform: translateY(400%);
    }
    to {
        -ms-transform: translateY(0%);
    }
}



@-moz-keyframes animacion-desde-arriba {
    from {
        -moz-transform: translateY(-600%);
    }
    to {
        -moz-transform: translateY(0%);
    }

keyframes animacion-desde-arriba y keyframes animacion-desde-abajo, animaciones por keyframes que aplicamos a los diferentes elementos que tendrán interactividad en la caja, lo que hacemos es cambiar de posición cuando esta se aplique, que generalmente pasara cuando este situado sobre el elemento, en animacion-desde-arriba hacemos es darle una posición Y negativa para que haga la animación desde arriba (-600% o -600px) y se situé en su posición original. Y para keyframes animacion-desde-abajo hacemos lo mismo pero esta vez aparecerá desde abajo (bottom o 400%). Y aplicamos los respectivos sufijos para cada navegador moderno que soporta esta propiedad.

Fuente:enlace

  "Desarrolla tus ideas con los Cursos, Diplomados y Maestría en Uneweb www.uneweb.edu.ve"

Publicado por en
Etiquetas: ,

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)

Entradas populares