Nous allons ajouter des bordures autour de nos miniatures et agrandissements pour donner du cachet à notre diaporama.
Un peu de maths
Il serait maladroit de se lancer sans réfléchir. Voici quelques questions à se poser…
Où va venir se mettre la bordure si j'applique ceci ?
Code : CSS | #diaporama img {
…
border:2px solid black;
}
|
Réponse :
Secret (cliquez pour afficher)Autour de chaque image, la bordure ajoute de la largeur et de la hauteur.
Il faut donc prendre une décision. Est-ce qu'on veut que l'ajout de bordures vienne augmenter la taille de notre diaporama ou est-il préférable de modifier la taille de nos miniatures de sorte que la taille du diaporama ne change pas ?
Je préfère pour ma part ne pas modifier la taille du diaporama. Pour l'instant ça ne changerait pas grand-chose, mais dans la partie II ça aura son importance. Nous allons donc redimensionner les miniatures !
Pour une bordure de 2 pixels, de combien de pixels faudra-t-il réduire la largeur et la hauteur des miniatures pour que le total image + bordures tienne dans l'espace actuel de nos miniatures ?
Réponse :
Secret (cliquez pour afficher)La nouvelle largeur est égale à la largeur actuelle de la miniature sans bordures moins le double de la largeur de la bordure.
C'est-à-dire que si on a une largeur de miniature de 50 pixels et qu'on décide d'ajouter une bordure de 2 pixels, il faudra donner aux miniatures une largeur de 50 moins 2 × 2, soit 46 pixels.
Pourquoi deux fois la bordure ?
Bah parce que la bordure se retrouve deux fois dans la largeur, et de même pour la hauteur !
Une bordure dans le diaporama
Donc, pour appliquer une bordure de 2 pixels, on fera ainsi :
Code : CSS | #diaporama img {…
width:46px;
height:46px;
border:2px solid black;
}
|
Mais ça ne suffit pas !
Le cas de l'agrandissement
Si nous laissons les choses telles qu'elles sont, nous aurons mal fait notre travail. En haut et à gauche, tout va bien. Mais en bas et à droite, c'est loin d'être parfait !
Si on met des bordures, il faut qu'elles soient égales partout, sinon ça ne fait pas joli.
Et en appliquant une bordure aux miniatures, on réduit la zone de l'agrandissement puisque celui-ci aussi doit être réduit pour accueillir des bordures (toutes les images ont reçu des bordures, même nos agrandissements).
Il faut donc réduire l'agrandissement de 4 pixels également en hauteur et en largeur :
Code : CSS | #diaporama div img:hover + .grande {
width:396px;
height:396px;
}
|
Voilà qui est mieux.
Encore quelques détails
Tout à l'air de bien aller dans notre diaporama… jusqu'à ce qu'on décide d'attribuer une couleur de fond au diaporama différente de celle de
body :
Code : CSS | #diaporama {
…
background-color:white;
}
#diaporama img {
…
border:2px solid white;
}
|
Promenez votre curseur sur les miniatures et regardez la bordure entre les miniatures, puis entre les miniatures et les agrandissements. Il y a partout 4 pixels. Mais entre les miniatures et l'extérieur de diaporama, il n'y en a que 2 !
Cela est dû au fait que les miniatures, entre elles, ont doublé la largeur de la bordure, alors qu'elles n'avaient personne avec qui doubler la bordure sur les bords du diaporama.
Modifions donc la bordure du diaporama :
Code : CSS | #diaporama {
…
background-color:white;
border:2px solid white;
}
|
C'est bien, mais maintenant, notre diaporama mesure 4 pixels de plus, il n'est donc plus exactement centré.
Code : CSS | #diaporama {
…
margin-left:-252px; /* On retire 2 pixels de décalage horizontal */
margin-top:-252px; /* Et encore 2 pixels de décalage vertical */
}
|
Là, c'est mieux !
Mais ce n'est pas encore fini…
Modifiez la couleur du centre :
Code : CSS | #diaporama .centre {
…
background-color:black;
}
|
En bougeant le curseur entre l'extérieur du diaporama et les miniatures, vous vous apercevrez qu'il lui manque de la bordure au centre…
Et si on lui ajoute de la bordure, il faut réduire ses dimensions, sinon le diaporama va déborder !
Code : CSS | #diaporama .centre {
…
width:396px;
height:396px;
border:2px solid white;
}
|
Voilà, il fallait faire tout cela pour bien comprendre le mécanisme des bordures dans notre diaporama. Si ça vous embête, n'en mettez pas, mais nous y reviendrons de toute manière dans cette partie et aussi dans la suivante. C'était pour vous garder captivés que je vous ai donné beaucoup de liens, j'espère n'avoir perdu personne en route !
Récapitulatif sur les bordures
Pour bien terminer sur les bordures, et pour que vous puissiez vous y référer plus tard, voici un récapitulatif des actions à mener pour bien appliquer une bordure dans notre diaporama. Avec des commentaires, des formules passe-partout, tout ça…
[ b ] représente la bordure dans les formules et doit être remplacée par le nombre de pixels qu'on a décidé d'appliquer. Ce nombre doit être constant tout au long du code. Une bordure de 2 pixels aux images puis de 3 pixels au reste romprait l'équilibre et l'esthétique du diaporama.
Il faut bien comprendre aussi qu'une bordure de 1 pixel, si toutes les consignes sont respectées, résultera en une bordure de 2 pixels entre tous les éléments. La quantité de pixels donnée sera toujours doublée, c'est la nature de notre diaporama et les règles du CSS qui le veulent, on ne peut rien y changer.
Code : 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 | #diaporama {
position:absolute;
width:500px;
left:50%;
margin-left:-252px; /* On retire la bordure en plus pour garder notre diaporama centré [ - largeur / 2 - b ] */
height:500px;
top:50%;
margin-top:-252px; /* On retire la bordure en plus pour garder notre diaporama centré [ - hauteur / 2 - b ] */
border:2px solid white; /* On applique la bordure qui sera doublée [ b ] */
}
#diaporama div img:hover + .grande {
display:inline;
position:absolute;
width:396px; /* Il faut réduire la taille de nos agrandissements de [ largeur - 2 b ] */
left:50%;
margin-left:-200px;
height:396px; /* Il faut réduire la taille de nos agrandissements de [ hauteur - 2 b ] */
top:50%;
margin-top:-200px;
z-index:1;
}
#diaporama img {
float:left;
width:46px; /* Il faut retirer deux fois la bordure [ largeur - 2 b ] */
height:46px; /* Il faut retirer deux fois la bordure [ hauteur - 2 b ] */
border:2px solid white; /* On applique la bordure (qui sera doublée) sur TOUTES nos images [ b ] */
}
#diaporama .centre {
float:left;
width:396px; /* Il faut retirer deux fois la bordure du centre [ largeur - 2 b ] */
height:396px; /* Il faut retirer deux fois la bordure du centre [ hauteur - 2 b ] */
border:2px solid white; /* Bordure (elle sera doublée) [ b ] */
}
|
Je n'ai mentionné que les sélecteurs concernés par les bordures en leur enlevant tout ce qui n'était pas nécessaire, comme les propriétés border-radius et opacity.
Ceux qui souhaiteraient récupérer les codes HTML et CSS de certains exemples peuvent le faire avec un clic droit sur la page → Afficher le code source.
Ça y est cette fois c'est fini ! Toutes les dimensions qui n'ont pas été commentées ne seront pas modifiées par le fait d'avoir ajouté une bordure, quelle que soit sa largeur.
Customisons notre diaporama… (2/2)
Durée d'étude :
1
heure
C'est parti !
Trouvez une formation
Suggestions
Flux RSS News
Twitter
Facebook
Google+