Un moyen très simple de faire pivoter les éléments d'une page de site Web - il suffit d'appliquer quelques styles css. La familiarisation avec cette leçon vous permettra de placer un éventail de cartes dépliées, des feuilles mortes éparses ou des photos élégantes dans un album sur la page. La leçon contient un exemple de mise en œuvre d'un album photo et prend en compte la solution pour tous les navigateurs modernes.
Il est nécessaire
Quatre photos jusqu'à 450px de large
Instructions
Étape 1
Cet exemple se concentrera sur la création d'une page d'album élégante avec des photos pivotées.
J'ai préparé à l'avance des images (largeur 400px) avec des adresses:
À l'avenir, nous attribuerons des identifiants aux images en fonction de leurs noms.
Étape 2
Tout d'abord, nous allons préparer un bloc pour notre album photo à l'aide de la balise div, et y ajouter également des photos à l'aide de la balise img (chaque image doit être entourée de sa propre balise div), comme ceci:
Veuillez noter que nous avons attribué un identifiant au bloc -. Par l'identifiant, nous pouvons faire référence au bloc en utilisant css.
Étape 3
Ensuite, vous devez définir les styles CSS sur le bloc. Liste des styles: "position: relative;" - définira l'origine à partir du coin supérieur gauche de notre bloc; "marge: 50 pixels automatique; " - définira l'indentation de notre bloc "50px" au-dessus et en dessous du reste du contenu de la page, ainsi que définir l'indentation automatique à droite et à gauche, alignant ainsi notre bloc au centre; "largeur: 900 px; hauteur: 650 px;" - définira la largeur à 900px et la hauteur à 650px, respectivement.
La liste de styles spécifiée doit être placée de cette manière:
#photo_page {
position: relative;
marge: 0 automatique;
largeur: 900px;
hauteur: 650px;
text-align: centre;
}
Notez l'utilisation de "#photo_page" - c'est ainsi que nous nous référons à l'ID de bloc.
Étape 4
Nous allons maintenant attribuer des styles généraux à chaque image à l'intérieur du bloc photo_page. Ce sont des coins arrondis, une bordure grise, un fond blanc, un rembourrage et une ombre portée.
Cela créera un effet photographique:
#photo_page img {
rayon de bordure: 7px;
bordure: 1px gris uni;
arrière-plan: #ffffff;
rembourrage: 10px;
box-shadow: 2px 2px 10px # 697898;
}
Notez l'utilisation de "#photo_page img" - cela fera référence à toutes les images à l'intérieur du bloc photo_page
Étape 5
Il est également important d'ajouter un style court comme celui-ci:
#photo_page div {
flotteur: gauche;
}
Il réduit tous les blocs à l'intérieur du bloc photo_page vers la gauche.
Étape 6
L'étape intermédiaire de la leçon est maintenant terminée. Si votre travail est similaire à l'image de la capture d'écran, vous ne vous êtes pas trompé et vous pouvez passer à l'étape suivante.
Étape 7
Tournons-nous maintenant pour faire pivoter les photos publiées. Pour cela, nous avons besoin du style de transformation. Pour le moment, dans sa forme pure, il n'est pas utilisé, mais seulement avec un préfixe pour chaque navigateur au début, comme ceci:
-webkit-transform: rotation (valeur);
-moz-transform: rotation (valeur);
-o-transform: rotation (valeur);
C'est le style de rotation pour les navigateurs: Google Chrome, Mazilla, Opera (respectivement). Au lieu du mot "valeur", nous insérerons un nombre avec deg à la fin, comme ceci:
90deg - tournez à 90 degrés dans le sens des aiguilles d'une montre.
-5deg - rotation de -5 degrés dans le sens inverse des aiguilles d'une montre.
Etc.
Étape 8
Style pour la photo photo_1:
# photo_1 {
-webkit-transform: rotation (5 degrés);
-moz-transform: faire pivoter (5 degrés);
-o-transformer: faire pivoter (5deg);
}
La première image est tournée de 5 degrés.
Étape 9
Style pour la photo photo_2:
# photo_2 {
-webkit-transform: rotation (-3deg);
-moz-transform: rotation (-3deg);
-o-transform: rotation (-3deg);
}
La deuxième image est pivotée de -3 degrés.
Étape 10
Style pour la photo photo_3:
# photo_3 {
-webkit-transform: rotation (-2deg);
-moz-transform: faire pivoter (-2 degrés);
-o-transform: rotation (-2deg);
}
La troisième image est pivotée de -2 degrés.
Étape 11
Style pour la photo photo_4:
# photo_4 {
-webkit-transform: rotation (8deg);
-moz-transform: rotation (8 degrés);
-o-transform: rotation (8deg);
}
La quatrième image est tournée de 8 degrés.
Étape 12
Voyons comment vous pouvez corriger la position des images. Par exemple, vous souhaitez décaler la première image 20px du haut et 10px de la gauche. Dans ce cas, vous devez utiliser le style de marge. Voici la bonne façon de l'utiliser pour notre cas:
# photo_1 {
marge: 20px -10px -20px 10px;
-webkit-transform: rotation (5 degrés);
-moz-transform: faire pivoter (5 degrés);
-o-transformer: faire pivoter (5deg);
}
Veuillez noter que la première valeur du style est la marge supérieure; le second est le tiret vers la droite; le troisième est un tiret du bas; quatrième - retrait à gauche.
Important: dans notre cas, la marge inférieure est égale à la valeur négative de la marge supérieure. Si vous voyez un espace blanc sous l'image sur votre page, essayez de mettre le bas de l'image en retrait encore plus négativement.
Étape 13
Le travail est terminé, je fournis une capture d'écran (en tenant compte du changement d'indentation de la première image décrit à l'étape 12).
Ajoutez un style d'indentation à toutes les images qui ne sont pas en mesure de vous convenir.
