Una manera molt senzilla de girar els elements d’una pàgina web: només cal aplicar uns quants estils CSS. La familiarització amb aquesta lliçó us permetrà col·locar un ventilador de cartes desplegat, fulles caigudes disperses o fotos elegants en un àlbum de la pàgina. La lliçó conté un exemple d’implementació d’un àlbum de fotos i té en compte la solució per a tots els navegadors moderns.
És necessari
Quatre fotos de fins a 450 px d'ample
Instruccions
Pas 1
Aquest exemple se centrarà en la creació d’una pàgina d’àlbum elegant amb fotos girades.
He preparat per endavant imatges (amplada 400 px) amb adreces:
En el futur, assignarem identificadors a les imatges segons els seus noms.
Pas 2
En primer lloc, prepararem un bloc per al nostre àlbum de fotos mitjançant l'etiqueta div, i també hi afegirem fotos mitjançant l'etiqueta img (cada imatge ha d'estar inclosa en la seva pròpia etiqueta div), com aquesta:
Tingueu en compte que hem assignat un identificador al bloc -. Mitjançant l’identificador, podem fer referència al bloc mitjançant css.
Pas 3
A continuació, heu d’establir els estils css al bloc. Llista d'estils: "posició: relativa;" - definirà l’origen des de la cantonada superior esquerra del nostre bloc; "marge: 50 px automàtic;" - establirà la sagnia del nostre bloc "50 px" per sobre i per sota de la resta del contingut de la pàgina, així com establir la sagnia automàtica a la dreta i a l'esquerra, alineant així el nostre bloc al centre; "ample: 900 px; alçada: 650 px;" - definirà l'amplada a 900 px i l'alçada a 650 px, respectivament.
La llista d'estils especificada s'ha de col·locar d'aquesta manera:
#photo_page {
posició: relativa;
marge: 0 automàtic;
amplada: 900 px;
alçada: 650 px;
text-align: centre;
}
Tingueu en compte l'ús de "#photo_page": així es fa referència a l'identificador del bloc.
Pas 4
Ara assignarem estils generals per a cada imatge dins del bloc photo_page. Es tracta de cantonades arrodonides, vora gris, fons blanc, encoixinat i ombra.
Això crearà un efecte fotogràfic:
#photo_page img {
radi de la vora: 7 px;
vora: 1 px gris sòlid;
fons: #ffffff;
encoixinat: 10 px;
caixa-ombra: 2px 2px 10px # 697898;
}
Tingueu en compte l'ús de "#photo_page img": es referirà a totes les imatges del bloc photo_page
Pas 5
També és important afegir un estil curt com aquest:
#photo_page div {
flotador: esquerra;
}
Redueix tots els blocs del bloc photo_page a l'esquerra.
Pas 6
La fase intermèdia de la lliçó ja s'ha completat. Si el vostre treball és similar a la imatge de la captura de pantalla, no us heu equivocat i podeu passar al següent pas.
Pas 7
Ara tornem a girar les fotos publicades. Per a això necessitem l'estil de transformació. De moment, en la seva forma pura, no s’utilitza, sinó només amb un prefix per a cada navegador al principi, així:
-webkit-transform: rotar (valor);
-moz-transform: rotar (valor);
-o-transformar: rotar (valor);
Aquest és l'estil de rotació dels navegadors: Google Chrome, Mazilla, Opera (respectivament). En lloc de la paraula "valor", inserirem un número amb deg al final, així:
90 graus: gireu 90 graus en sentit horari.
-5 graus: gireu -5 graus en sentit antihorari.
Etc.
Pas 8
Estil de la foto foto_1:
# foto_1 {
-webkit-transform: rotar (5 graus);
-moz-transformar: girar (5 graus);
-o-transformar: girar (5 graus);
}
La primera imatge es gira 5 graus.
Pas 9
Estil de la foto photo_2:
# foto_2 {
-webkit-transform: rotar (-3deg);
-moz-transform: rotar (-3deg);
-o-transformar: girar (-3deg);
}
La segona imatge gira -3 graus.
Pas 10
Estil de la foto photo_3:
# foto_3 {
-webkit-transform: rotar (-2deg);
-moz-transform: rotar (-2deg);
-o-transformar: girar (-2 graus);
}
La tercera imatge es gira -2 graus.
Pas 11
Estil de la foto photo_4:
# foto_4 {
-webkit-transform: rotar (8 graus);
-moz-transform: rotar (8 graus);
-o-transformar: girar (8 graus);
}
La quarta imatge gira 8 graus.
Pas 12
Vegem com es pot corregir la posició de les imatges. Per exemple, voleu compensar la primera imatge 20 px per la part superior i 10 px per l'esquerra. En aquest cas, heu d’utilitzar l’estil de marge. Aquí teniu la forma correcta d’utilitzar-lo per al nostre cas:
# foto_1 {
marge: 20px -10px -20px 10px;
-webkit-transform: rotar (5 graus);
-moz-transformar: girar (5 graus);
-o-transformar: girar (5 graus);
}
Tingueu en compte que el primer valor de l’estil és el marge superior; el segon és el sagnat de la dreta; el tercer és un sagnat des de baix; quart - sagnat esquerre.
Important: en el nostre cas, el marge inferior és igual al valor negatiu del marge superior. Si veieu l'espai en blanc a sota de la imatge de la pàgina, proveu de sagnar la part inferior de la imatge encara més negativament.
Pas 13
El treball està complet, proporciono una captura de pantalla (tenint en compte el canvi en el sagnat de la primera imatge descrita al pas 12).
Afegiu un estil de sagnat a les imatges que no estiguin en la vostra posició.
