Tutoriales Ubuntu


Visto: 502 Views

Efecto fotos tiradas Css3

Sin título-1


Efecto fotos tiradas Css3

Sin título-1

Sin título-1

Hola amigos en este día les traigo este bonito efecto para nuestras fotos y es que me resulto bastante peculiar aun que el nombre no cuadra un tanto el efecto asi lo parece.

Es solo un despliegue de fotos al pasar el mouse sobre las imágenes un hover en css3 aun que no hay mucho por decir pues ya veré la forma de implementarlo en mi sitio para las galerías de imágenes.
Demo Descargar
Ahora paso a explicar el efecto

 

 

Primero esta 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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

<html>
<header>
<title>Fotos tiradas css3</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</header>
<body>
	<h1><a href="http://deknileech.info" title="Tutoriales Css" alt="Ir al inicio">Regresar al Sitio</a></h1>
<div id="content-rotate-two">
    <div class="photo-uno">
        <a href="#">
            <img src="img/img1.jpg">
        </a>
    </div>
    <div class="photo-dos" style="margin: 4px 0 0 4px;">
        <a href="#">
            <img src="img/img2.jpg">
        </a>
    </div>
    <div class="photo-tres" style="margin: 8px 0 0 8px;">
        <a href="#">
            <img src="img/img3.jpg">
        </a>
    </div>
    <div class="photo-cuatro" style="margin: 12px 0 0 12px;">
        <a href="#">
            <img src="img/img4.jpg">
        </a>
    </div>
    <div class="photo-cinco" style="margin: 16px 0 0 16px;">
        <a href="#">
            <img src="img/img5.jpg">
        </a>
    </div>
	<div class="photo-seis" style="margin: 20px 0 0 20px;">
        <a href="#">
            <img src="img/img6.jpg">
        </a>
    </div>
	<div class="photo-siete" style="margin: 24px 0 0 24px;">
        <a href="#">
            <img src="img/img7.jpg">
        </a>
    </div>
</div>
</html>

 
Y los estilos:

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
112

body {
    margin: 100px;
    padding: 30px 40px 85px 40px;
    text-align: center;
    font-family: Verdana;
    border: 1px dashed rgba(0,0,0,0.3);
    outline: 1px dashed #8DC63F;
}
 
h1 {
    font-size: 36px;
    margin-bottom: 100px;
    color: #8DC63F;
    text-shadow: 0 1px 0 rgba(0,0,0,0.5);
}
 
#content-rotate-two {
    height: 280px;
    margin: 50px auto;
    padding: 0 50px;
    position: relative;
    width: 280px;
}
.photo-uno, .photo-dos, .photo-tres, .photo-cuatro, .photo-cinco, .photo-seis, .photo-siete {
    -moz-transition: all 400ms ease;
    -ms-transition: all 400ms ease;
    -o-transition: all 400ms ease;
    -webkit-transition: all 400ms ease;
    transition: all 400ms ease;
    background-color: rgba(0, 0, 0, 0.3);
    float: left;
    padding: 1px;
    position: absolute;
}
.photo-uno img, .photo-dos img, .photo-tres img, .photo-cuatro img, .photo-cinco img , .photo-seis img , .photo-siete img{
    border: 5px solid #FFFFFF;
    height: 250px;
    width: 250px;
}
.photo-uno a, .photo-dos a, .photo-tres a, .photo-cuatro a, .photo-cinco a , .photo-seis a , .photo-siete a{
    display: block;
    line-height: 0;
}
 
#content-rotate-two:hover .photo-uno {
    -moz-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg));
    transform: rotate(-20deg);
    margin-left: -100px !important;
    margin-top: 20px !important;
}
 
#content-rotate-two:hover .photo-dos {
    -moz-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    transform: rotate(-10deg));
    margin-left: -50px !important;
    margin-top: 10px !important;
}
 
#content-rotate-two:hover .photo-tres {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    margin-left: 0 !important;
}
 
#content-rotate-two:hover .photo-cuatro {
    -moz-transform: rotate(15deg);
    -o-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    transform: rotate(15deg);
    margin-left: 50px !important;
    margin-top: 25px !important;
}
 
#content-rotate-two:hover .photo-cinco {
    -moz-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
    margin-left: 100px !important;
    margin-top: 50px !important;
}
 
#content-rotate-two:hover .photo-seis {
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    margin-left: 150px !important;
    margin-top: 75px !important;
}
 
#content-rotate-two:hover .photo-siete {
    -moz-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    -webkit-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
    margin-left: 200px !important;
    margin-top: 100px !important;
}

Para aplicar los efectos a las imágenes son mediante estos divs:

1
2

<div class="photo-X">
    </div>

Con la etiqueta <img> con la que llamamos las imágenes tambien le vamos aplicar el sig. estilo individual a cada uno con el atributo style. Aplicaremos lo que son los márgenes donde será el Margen de arriba, derecha, abajo e izquierda en este orden. En al primer imagen no aplicaremos los márgenes en la segunda y demás si el ejemplo de la segunda:

1
2
3
4
5

<div class="photo-dos" style="margin: 4px 0 0 4px;">
        <a href="#">
            <img src="img/img2.jpg">
        </a>
    </div>

Donde el margen de arriba es de 4px, derecha 0px, abajo 0px e izquierda 4px.

En este efecto a cada imagen le aplicaremos un margen de 4px a el margen derecha e izquierda  en autoincremento asi que con la segunda imagen son 4px con la tercera serán 8px en la cuarta serán 12px y asi sucesivamente.

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

<div class="photo-dos" style="margin: 4px 0 0 4px;">
        <a href="#">
            <img src="img/img2.jpg">
        </a>
    </div>
    <div class="photo-tres" style="margin: 8px 0 0 8px;">
        <a href="#">
            <img src="img/img3.jpg">
        </a>
    </div>
    <div class="photo-cuatro" style="margin: 12px 0 0 12px;">
        <a href="#">
            <img src="img/img4.jpg">
        </a>
    </div>
    <div class="photo-cinco" style="margin: 16px 0 0 16px;">
        <a href="#">
            <img src="img/img5.jpg">
        </a>
    </div>
	<div class="photo-seis" style="margin: 20px 0 0 20px;">
        <a href="#">
            <img src="img/img6.jpg">
        </a>
    </div>
	<div class="photo-siete" style="margin: 24px 0 0 24px;">
        <a href="#">
            <img src="img/img7.jpg">
        </a>
    </div>

Ahora pasaremos con lo que son los efectos hover al pasar el mouse sobre cada imagen.

Con la propiedad transform css3 y su función rotate es la que se encarga del efecto iniciando con un Angulo de -10 grados la primera imagen en autoincremento de 10 grados las primeras tres imágenes de la derecha de ahí serán 15 grados en autoincremento por las siguientes imágenes que se desplegaran a la derecha aun que pueden jugar con estos valores para hacer el efecto mas a su gusto.

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

#content-rotate-two:hover .photo-uno {
    -moz-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg));
    transform: rotate(-20deg);
    margin-left: -100px !important;
    margin-top: 20px !important;
}
 
#content-rotate-two:hover .photo-dos {
    -moz-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    transform: rotate(-10deg));
    margin-left: -50px !important;
    margin-top: 10px !important;
}
 
#content-rotate-two:hover .photo-tres {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    margin-left: 0 !important;
}
 
#content-rotate-two:hover .photo-cuatro {
    -moz-transform: rotate(15deg);
    -o-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    transform: rotate(15deg);
    margin-left: 50px !important;
    margin-top: 25px !important;
}
 
#content-rotate-two:hover .photo-cinco {
    -moz-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
    margin-left: 100px !important;
    margin-top: 50px !important;
}
 
#content-rotate-two:hover .photo-seis {
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    margin-left: 150px !important;
    margin-top: 75px !important;
}
 
#content-rotate-two:hover .photo-siete {
    -moz-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    -webkit-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
    margin-left: 200px !important;
    margin-top: 100px !important;
}

Demo Descargar

Fuente: http://css.zanime-mf.com/2012/06/efecto-acordeon-para-fotos-css3.html

css, Tutoriales CSSEtiquetas: , , , , , , , ,

Te recomendamos leer:


ubuntu-13.04-raring-ringtail-wallpaper-8
10 imágenes minimalistas de Ubuntu 13.04 Raring Ringtail

Nube de etiquetas con Css3
jsfiddle-logo1-300x300
jsFiddle editor online html ,css y JavaScript
sharingan-de-3-aspas-1339431199_full550
Sharingan animado con CSS3








otros llegaron buscando

nadie ha llega a esta pagina desde el buscador

Deja un comentario