Ptite_Perle
A les clefs du forum
Je tiens le trousseau de clefs du forum
Fondatrice Messages : 5859 Venue : 27/06/2009 Je suis : Age : 60 Je vie à : Lyon Humeur : Bonne humeur Mes Points : 120741 Galerie HTML et CSS3 | | Coucou LE CODE HTML Nous allons commencer pour créer une page HTML simple qui contiendra les balises : - Code:
-
-<html></html> -<head></head> -<body></body> Bien sûr les balises et sont à mettre à l'intérieur de la balise Dans la balise , nous mettrons la balise qui contiendra le titre de notre page et un lien pour le fichier CSS qui nous verrons après. Vous devriez avoir donc ceci pour le moment. - Code:
-
<doctype Html> <html> <head> <title>Galerie d'image</title> <link href="style.css" type="text/css" /> </head> <body>
</body> </html>
Dans le corps de la page, c'est-à-dire, entre les balises , nous allons créer une div qui contiendra les vignettes de vos images et dont son id se nommera "thumb". A l'interieur de cette div, nous allons mettre les liens de nos images, qui seront également dans une div. Vos images seront entourées d'une balise lien avec l'attribut href qui contiendra l'id de votre image. - Code:
-
<ul id="main_photo"> <li><img src="img_0.jpg" alt="0" id="0"></li> <li><img src="img_1.jpg" alt="1" id="1"></li> <li><img src="img_2.jpg" alt="2" id="2"></li> <li><img src="img_3.jpg" alt="3" id="3"></li> <li><img src="img_4.jpg" alt="4" id="4"></li> <li><img src="img_5.jpg" alt="5" id="5"></li> </ul>
LE CODE CSSLe code CSS permet de mettre en forme notre galerie d'image qui sans le style CSS, elle ne serait qu'une suite de vos photos. 1/ L'image principale Commençons par enlever le style liste avec "liste-style:none;" ainsi que les marges et mettons une position absolue. - Code:
-
ul, li { list-style=none; margin: 0; position: absolute; }
Occupons-nous ensuite de la balise . Nous allons lui indiquer une largeur, une hauteur, les marges (top et left) et lui mettre une position relative
- Code:
-
ul#main_photo { width:600px; height:450px; margin-top:180px; margin-left:400; position:relative; }
Pour les images qui se trouvent dans , on va leur apppliquer une opacité de 0, une largeur de 600pixels ainsi qu'une transition. Les marges seront en auto.
- Code:
-
ul#main_photo img { opacity:0; width:600px; margin:auto; -moz-transition:opacity 1s ease-in-out; -webkit-transition:opacity 1s ease-in-out; -o-transition:opacity 1s ease-in-out; transition: opacity 1s ease-in-out; }
Il faut également appliquer un style à l'image ciblée.
- Code:
-
ul#main_photo img:target { opacity:1; } 2/ Les vignettes Ici nous allons mettre en forme les vignettes, . Cette auront une hauteur de 20% et une largeur de 100% Sa position sera fixe et sera suivi de top 0 et left 0 afin que vos vignettes soient sur le haut de votre page. J'ai également ajouté une ligne en bas pour séparer les vignettes de la photo principale. - Code:
-
div#thumb{ height:20%; width:100%; position:fixed; top:0; left:0; border-bottom:1px solid #ccc; }
Pour ce qui concerne la c'est ce qui va centrer les vignettes dans votre page. Cette aura une largeur de 70%, le texte sera au centre et les marges en auto. - Code:
-
div#thumb_center{ width:70%; margin:auto; text-align:center; } Nous allons mis les vignettes dans un cadre que nous allons aussi mettre en forme. Le padding et la marge sera de 5px, la largeur de 14%, le texte aligné au centre. - Code:
-
div#cadre { padding:5px; width: 14%; text-align:center; margin:5px; float:left; }
Maintenant, nous allons mettre un effet de survol sur les vignettes. Tout d'abord il faut commencer par la position de non survol et ensuite faire l'effet de survol. - Code:
-
div#cadre img { width: 100%; opacity:0.7; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } div#cadre img:hover { opacity:1; -moz-transform:scale(1.2); -o-transform:scale(1.2); -webkit-transform:scale(1.2); transform:scale(1.2); padding:0px; z-index:3; }
|
| |