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:
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.
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;} |
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;} |
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-child, last-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);} |
- See more at: http://www.tutosytips.com/efecto-coverflow-con-css/#sthash.8CYFoOro.dpuf
Fuente:enlace
No hay comentarios:
Publicar un comentario