You are here
Crea un efecto coverflow con CSS Sin categoría 

Crea un efecto coverflow con CSS


El efecto Coverflow es muy conocido y es usado en muchas situaciones, este efecto es normal verlo en la web usando jQuery, flash u otro lenguaje y en varias aplicaciones, en este tutorial vamos a hacer este ejercicio y crearemos este efecto coverflow, para esto utilzaremos una lista de html y usando las bondades de CSS lo conseguiremos facilmente, en este tutorial vamos a usar Transiciones, transformaciones y perspectivas de Css3.
Esto es lo que vamos a conseguir en este tutorial:

efecto-coverflow-css

El html

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
<ul>
   <li>
      <img alt=”Joomla” src=”logo-joomla.jpg”>
      <p>Joomla</p>
      <a class=”boton” href=”http://www.joomla.org” target=”_blank”>Visitar</a>
   </li>
   <li>
      <img alt=”Blogger” src=”logo-blogger.jpg”>
      <p>Blogger</p>
      <a class=”boton” href=”http://www.blogger.com” target=”_blank”>Visitar</a>
   </li>
   <li>
      <img alt=”Wordpress” src=”logo-wordpress.jpg”>
      <p>Wordpress</p>
      <a class=”boton” href=”http://es.wordpress.org” target=”_blank”>Visitar</a>
   </li>
   <li>
      <img alt=”Drupal” src=”logo-drupal.jpg”>
      <p>Drupal</p>
      <a class=”boton” href=”https://drupal.org/‎” target=”_blank”>Visitar</a>
   </li>
   <li>
      <img width=”100″ height=”100″ alt=”Vbulletin” src=”logo-vbull.jpg”>
      <p>Vbulletin</p>
      <a class=”boton” href=”http://www.vbulletin.com” target=”_blank”>Visitar</a>
   </li>
</ul>
Únicamente necesitaremos una lista desordenada <ul>, dentro de sus respectivos ítems <li> tenemos las imágenes, un párrafo <p> y el botón para visitar el vinculo deseado.
efecto-coverflow-1

El css

Damos las dimensiones a la lista altura y anchura y aplicamos una perspectiva de 500px, y centramos la lista en el documento con el margin.
1
2
3
4
5
6
7
8
9
10
ul {
    height: 160px;
    margin: 60px auto;
    perspective: 500px;
    -webkit-perspective: 500px;
    -moz-perspective: 500px;
    -ms-perspective: 500px;
    -o-perspective: 500px;
    width: 525px;
}
Aplicamos color a los item de la lista que serán las cajas, los mostramos uno al lado del otro con inline-block, margin y box-sizing, aplicamos una transformación en el eje Y de 45º y una transición para dar la elegancia al evento cada propiedad con sus prefijos de autores, por si algo pasa e igual le damos un alto a las cajas y padding.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
ul li {
    background-color: #222;
    display: inline-block;
    margin-right: -25px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    height: 165px;
    list-style: none;
    text-align: center;
    transform: rotateY(45deg);
    -webkit-transform: rotateY(45deg);
    -moz-transform: rotateY(45deg);
    -o-transform: rotateY(45deg);
    transition: all ease .5s;
    -webkit-transition: all ease .5s;
    -moz-transition: all ease .5s;
    -o-transition: all ease .5s;
    padding: 10px;
    position: relative;
    width: 112px;
    z-index: 50;
}
Estilos para el párrafo que esta dentro de las cajas.
1
2
3
4
5
li p {
    color:#ddd;
    font-size: .9em;
    margin: 4px 0 13px;
}
efecto-coverflow2
Estilos para el botón que lleva a los detalles del producto,  aplicamos el fondo del botón en el estado inactivo y otras opciones para lograr la apariencia de botones en Css, por ultimo aplicamos una transición al color de fondo para cuando cambie de estado  y aplicamos los estilos para el estado hover.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
ul li a.boton {
    background-color: #222222;
    border-radius: 2px 2px 2px 2px;
    bottom: 5px;
    color: #FFFFFF;
    font-size: 1em;
    padding: 0.5em;
    right: 5px;
    text-align: center;
    text-decoration: none;
    transition: background-color 1s ease 0s;
    -webkit-transition: background-color 1s ease 0s;
    -moz-transition: background-color 1s ease 0s;
    -o-transition: background-color 1s ease 0s;
}
ul li a.boton:hover {
   color: #222222;
}
Damos un ancho a la imagen que se encuentra dentro de la caja y la altura será relativa a su anchura.
1
2
3
4
ul li img {
    height: auto !important;
    width: 93px !important;
}
efecto-coverflow-css3
Ahora nos referimos a los ítems de la lista y su comportamiento tanto en el estado pasivo como en el hover, utilizamos la pseudo class nth-child, first-childlast-child para aplicar las rotaciones y posiciones adecuada, también aplicamos estilos al botón que tenemos como enlace.
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
ul li:nth-child(3) {
    background-color: #222222;
    transform: rotateY(0deg) scale(1.22);
    -webkit-transform: rotateY(0deg) scale(1.22);
    -moz-transform: rotateY(0deg) scale(1.22);
    -o-transform: rotateY(0deg) scale(1.22);
    z-index: 55;
}
 ul li:nth-child(3) a.boton {
    background-color: #0099CC;
}
 ul li:nth-child(3) ~ li {
    transform: rotateY(-45deg);
    -webkit-transform: rotateY(-45deg);
    -ms-transform: rotateY(-45deg);
    -o-transform: rotateY(-45deg);
    -moz-transform: rotateY(-45deg);
}
 ul li:last-child,  ul li:first-child {
    z-index: 45;
}
 ul:hover li:not(:hover) {
    background-color: #111111;
    transform: rotateY(45deg);
    -webkit-transform: rotateY(45deg);
    -o-transform: rotateY(45deg);
    -moz-transform: rotateY(45deg);
    -ms-transform: rotateY(45deg);
}
 ul:hover li a.boton {
    background-color: #222222;
}
 ul li:hover,  ul li:first-child:hover,  ul li:nth-child(3) ~ li:hover {
     background-color: #222;
     transform: rotateY(0) scale(1.22);
     -webkit-transform: rotateY(0) scale(1.22);
     -moz-transform: rotateY(0) scale(1.22);
     -ms-transform: rotateY(0) scale(1.22);
     -o-transform: rotateY(0) scale(1.22);
     z-index: 60;
}
 ul:hover li:hover a.boton {
    background-color: #0099CC;
}
 ul:hover li:hover ~ li {
    transform: rotateY(-45deg);
    -webkit-transform: rotateY(-45deg);
    -ms-transform: rotateY(-45deg);
    -o-transform: rotateY(-45deg);
    -moz-transform: rotateY(-45deg);
}
efecto-coverflow-css4
– See more at: http://www.tutosytips.com/efecto-coverflow-con-css/#sthash.8CYFoOro.dpuf
Fuente:enlace

Related posts

Comments

Leave a Comment


*