En este nuevo ejercicio o tutorial vamos a seguir viendo y a seguir practicando el uso de las propiedades de CSS3, la dinámica es ver un poco lo que podemos hacer con el poderosoCSS3.
En este ejercicio veremos como mostrar información oculta en un banner animado utilizando CSS3 y algunas de sus propiedades y así simularemos un efecto buen efecto 3D.
Esto es lo que vamos a conseguir:
Si vistes el demo te habrás dado cuenta que el efecto es agradable y realista por lo menos en los buenos navegadores y que lo podemos usar para muchas cosas. Así que vamos a comenzar.
El HTML
|
|
<div class="caja">
<div class="item">
<img src="imagenes/8.jpg" />
<span class="informacion">
<strong>Compass</strong>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.
<a href="http://compass-style.org/">www.compass-style.org/</a>
</span>
</div>
</div>
|
Este HTML básicamente es la estructura de una caja en la que haremos el efecto con el CSS. Tenemos un div con clase “caja” padre dentro tenemos el contenedor con clase “item” dentro tenemos la imagen que se muestra por default y después en un span tenemos el resto de la información a mostrar.
Seguimos Con 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
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
|
.caja {
display: inline-block;
width: 310px;
height: 100px;
vertical-align: top;
margin: 1em 1.5em 2em 0;
cursor: pointer;
position: relative;
font-family: Tahoma, Arial;
-webkit-perspective: 4000px;
-moz-perspective: 4000px;
-ms-perspective: 4000px;
-o-perspective: 4000px;
perspective: 4000px;
}
.item {
height: 100px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: -webkit-transform .6s;
-moz-transition: -moz-transform .6s;
-ms-transition: -ms-transform .6s;
-o-transition: -o-transform .6s;
transition: transform .6s;
}
.item:hover {
-webkit-transform: translateZ(-50px) rotateX(95deg);
-moz-transform: translateZ(-50px) rotateX(95deg);
-ms-transform: translateZ(-50px) rotateX(95deg);
-o-transform: translateZ(-50px) rotateX(95deg);
transform: translateZ(-50px) rotateX(95deg);
}
.item:hover img {
box-shadow: none;
border-radius: 15px;
}
.item:hover .informacion {
box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
border-radius: 3px;
}
.item img {
display: block;
position: absolute;
top: 0;
border-radius: 3px;
box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
-webkit-transform: translateZ(50px);
-moz-transform: translateZ(50px);
-ms-transform: translateZ(50px);
-o-transform: translateZ(50px);
transform: translateZ(50px);
-webkit-transition: all .6s;
-moz-transition: all .6s;
-ms-transition: all .6s;
-o-transition: all .6s;
transition: all .6s;
}
.item .informacion {
display: block;
position: absolute;
top: 0;
height: 80px;
width: 290px;
text-align: left;
border-radius: 15px;
padding: 10px;
font-size: 12px;
text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
box-shadow: none;
background: rgb(236,241,244);
-webkit-transform: rotateX(-90deg) translateZ(50px);
-moz-transform: rotateX(-90deg) translateZ(50px);
-ms-transform: rotateX(-90deg) translateZ(50px);
-o-transform: rotateX(-90deg) translateZ(50px);
transform: rotateX(-90deg) translateZ(50px);
-webkit-transition: all .6s;
-moz-transition: all .6s;
-ms-transition: all .6s;
-o-transition: all .6s;
transition: all .6s;
}
.informacion strong {
border-bottom: 1px solid #CCCCCC;
display: block;
font-size: 18px;
margin: 0 0 4px;
padding: 2px 0;
text-align: center;
}
.informacion a {
color: #013354;
display: block;
font-family: 'Prosto One',cursive;
font-size: 13px;
text-align: center;
text-decoration: none;
}
.informacion a:hover {
color: #2698CE;
}
|
Muy bien, si has trabajado con las transformaciones en CSS3 el código anterior te resultara fácil y familiar, si no es así te lo voy a resumirlo un poco.
Con el .caja lo que hacemos es ubicar la caja, posicionarla, en mi caso quiero una al lado de otra por eso le doy inline-block, altura y anchura, márgenes y vertical-align, esto es para su posicionamiento en la escena, y de perspectiva 4000px.
Luego en el .tem le damos una altura de 100px y damos el como valor de transform preserve-3d para inducir a su condición 3d y una transición a la transformación que se hará cuando este en el estado :hover que tendrá una translación en el eje z de -50px y una rotación en el eje x de 95 grados. Esto hace que la animación ya tenga efecto 3d.
Posteriormente aplicamos algunos estilos a la imagen que se nos muestra por defecto en el elemento con clase ítem, a este también aplicamos la transformación en el eje z de 500px para hacerla independiente a la del ítem.
Luego con los estilos de .tem .informacion mostramos el resto de información cuando hacemos hover sobre la imagen y esta haga el efecto de 3d, igual añadimos altura, fondo etc..
Por ultimo damos estilos a el elemento strong que esta dentro de la información que se trata del titulo, al enlace que esta en la información y también en su estado hover.
El CSS va con los diferentes prefijos de navegadores para la nuevas propiedades CSS3 para los que están con los navegadores desactualizados.
Y eso es todo, espero que te sirva de algo este ejercicio. Nos vemos en otro tutorial.
Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros
No hay comentarios:
Publicar un comentario