AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


1 résultat trouvé pour predefs

NyoTheNeko

Slideshow full CSS3 sans :target ! - Dim 13 Juil 2014 - 18:07

Rajouter les bulles d'informations


Il est donc temps de rajouter les bulles d'informations, cependant, je vous préviens tout de suite: c'est différent des infobulles, et en réalité, il ne faudrait pas avoir de liens ou de trucs qui nécessitent la souris, car dès que vous retirez votre souris de l'image et allez sur la bulle (même si elle est collée à l'image), si la souris n'est pas SUR l'image, alors la bulle disparaîtra. Pour les infobulles, allez voir mon autre tuto, sur ces dernières! Elles devraient donc être utilisées pour, par exemple, donner des informations sur le lien vers lequel ils mènent.

Le HTML


Il n'y a rien qui change dans le HTML de base, mais on va rajouter des choses. En effet, on va utiliser le fait que l'on ait apprit à utiliser le sélecteur ~ pour l'utilisr. Vous l'aurez deviné, nous donnerons à notre image (ou plutot notre lien qui entoure l'image), un "frère", qui ne sera autre que nos bulles.

Nous avions donc, pour chaque slide, ceci:
Code:
<div class="a_slide">
             <a href="#"><img class="left" src="http://i.imgur.com/SgVARN7.png" /></a>
         </div>


Nous allons donc rajouter une div de classe "info_slide" à la suite de chacun des liens. Cependant, en plus de cela, je vais rajouter un id pour chacun d'entre eux. En effet, plus tard, je voudrais avoir un mouvement "particulier" pour chacune des bulles: je voudrais qu'elle parte de la bouche du personnage sur l'image, jusqu'à une position quelconque sur les slides. Pour cette première bulle, je donne l'id "minato"
Code:
<div class="a_slide">
             <a href="#"><img class="left" src="http://i.imgur.com/SgVARN7.png" /></a>
            <div class="infos_slide" id="minato">
            </div>
         </div>

Maintenant, pour avoir la forme de bulle avec le petit triangle, je rajoute un div de classe "bubble". De plus, je donne une deuxième classe: bubble_left (ou bubble_right pour les bulles qui seront pour les personnages positionnés à droite). En effet, quand on met un espace dans les guillemets de l'attribut class, cela veut dire qu'il y a plusieurs classes. Donc class="bubble bubble_left" signifie que ce div est à la fois de la classe bubble et de la classe bubble_left. C'est très utile, et beaucoup utilisé sur FA, donc vous rencontrerez très souvent ce genre de notations Wink
Code:
<div class="a_slide">
             <a href="#"><img class="left" src="http://i.imgur.com/SgVARN7.png" /></a>
            <div class="infos_slide" id="minato">
               <div class="bubble bubble_left">               
               </div>
            </div>
         </div>


Maintenant, j'aimerais mettre au sein de mes bulles un titre, ainsi qu'un petit texte. Il me suffit alors de les ajouter avec les bonnes baises:
Code:
<div class="a_slide">
             <a href="#"><img class="left" src="http://i.imgur.com/SgVARN7.png" /></a>
            <div class="infos_slide" id="minato">
               <div class="bubble bubble_left">
                  <h1>
                      Titre
                  </h1>
                  <p>
                      Ceci est un petit texte court, pourquoi pas pour rapidement décrire ce qu'est le lien?
                  </p>
               </div>
            </div>
         </div>


Et voilà qui est fait!

Notez cependant que le texte ne doit pas dépasser la hauteur de la bulle! En effet, il ne sera pas possible de faire un overflow: auto, vu que la souris ne pourra pas aller sur la bulle sans que cette dernière ne disparaisse! Ici, je prévois donc que toutes les bulles auront la même taille, cependant, vous pouvez donner une id à chaque bulle pour changer sa taille dans le CSS!

Le CSS


Le CSS est donc ce qui va nous permettre de faire apparaitre et disparaitre cette petit bulle! Rien de très compliqué en réalité, mais je vais tout de même vous montrer tout le processus!

Donc en premier, on va commencer par le div qui a été rajouté en premier: infos_slide. Celui-ci n'a pas de couleur de fond, vu qu'il ne va que contenir la bulle. En effet, vu que je veux faire le petit triangle "comme si il parlait" il me faut absolument une bulle en absolue pour la cntenir, et c'est sur elle que se fera le mouvement. Cependant, je vais donner à chaque id individuellement le mouvement à faire, car je veux que chaque bulle ait un mouvement particulier: qu'il aille de la bouche du personnage à un endroit quelconque sur la PA. Cependant, vu que je veux que toutes les bulles aient la même taille, je fixe une taille précise!
Si je voulais que chaque bulle ait une taille spécifique, je devrais mettre la taille dans l'id spécifique (par exemple #minato), mais aussi utiliser cette id pour donner une taille à la bulle DANS l'id. Je donnerais un exemple plus tard.
Code:
/* Div qui va contenir la bulle */
.infos_slide {
  width: 200px;
  height: 100px;
  opacity: 0;
  visibility: hidden;
  transition: all ease 1s;
}

Vous remarquerez en plus de cela le visibility: hidden et l'opacity: 0; En effet, je ne veux pas que la bulle s'affiche tant qu'on ne passe pas la souris sur l'image! Cependant, avant de passer à l'affichage, je vais m'occuper des autres div que contient infos_slide, mais surtout, en tout premier, l'id!

Ici, je prends comme exemple l'id minato: je lui donne une certaine position absolue, qui correspond la bouche du personnage sur mon premier slide pour le côté en bas à gauche de ma bulle, vu que c'est là que j'aurais le petit triangle qui fera comme si Minato "parle"
Code:
/* Position normale de la bulle */
#minato {
  position: absolute;
  top: 70px;
  left: 160px;
}

Notez que chacune de mes id aura donc une position spéciale, mais que seul cela change! Si je voulais cependant que la bulle ait une taille spéciale, je devrais plutôt écrire ceci:
Code:
/* Position normale et taille de la bulle */
#minato {
  width: 300px;
  height: 500px;
  position: absolute;
  top: 70px;
  left: 160px;
}

Et retirer le width et le height dans infos_slide!

Maintenant pour la bulle! Rappelez-vous que nous avons deux classes: bubble et bubble_left ou bubble et bubble_right, selon quel côté est mon personnage. Minato étant à gauche, pour lui c'est bubble et bubble_left!

Commençons par bubble: cette classe va contenir tout ce qui est commun à TOUTES les bulles: la taille, la couleur de fond, les bords arrondis, etc.
Vous remarquerez aussi que bubble est en position: relative! C'est pour mettre ensuite le petit triangle pour parler.
Code:
/* Mise en forme générale des bulles */
.bubble {
  position: relative;
  width: 200px;
  height: 100px;
  background-color: white;
  border-radius: 10px;
}


Maintenant, si vous voulez avoir qu'une ou plusieurs caractéristiques soient différentes pour chaque bulle, il faudrait utiliser l'id d'info_slides pour changer cela, tout en supprimant les effets de .bubble (quitte à supprimer totalement la classe). Cependant, n'oubliez alors pas de le mettre pour chaque bulle!
Voilà ce qu'il faudrait faire:
Code:
/* Mise en forme de la bulle de minato */
#minato .bubble {
  width: 300px;
  height: 500px;
  background-color: grey;
}


Maintenant, mettons le petit triangle pour les bulles des perosnnages de gauche Pour cela, nous utilisons .bubble.bubble_left, cela indique que c'est tout objet de classe bubble ET bubble_left qui aura ceci! On en fera de même avec bubble_right, dont je donnerais le code sans explication plus tard!
Notez cependant que on le place TOUJOURS en bas à gaiche de la bulle! si vous voulez modifier ça, il faudra, encore une fois, utiliser l'id de la bulle comme plus tôt sans oublier l'espace entre l'id et les classes. En effet, les bulles ne sont PAS à la fois de l'id minato et de leurs classes, mais les FILLES de l'id minato! (j'ai exliqué plus tôt le principe de paternité, donc je m'étale as là-dessus!)

Bref, voici le code pour bubble_left:
Code:
/* Création du triangle vers la gauche pour les bulles */
.bubble.bubble_left:before {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  border-style: solid;
  border-color: transparent white;
  border-width: 15px 30px 15px 0;
  left: -30px;
  bottom: 10px;
}

.bubble.bubble_left:after {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  border-color: transparent #fff;
  border-width: 9px 21px 9px 0;
  left: -21px;
  bottom: 6px;
}

Ici, on utilise les pseudo-éléments :after et :before. Ce sotn des pseudo-éléments, car on ajoute "artificiellement" des objets/éléments avant (before) et après (after) l'élément qui est écrit avant les deux points (:). Ces pseudo-éléments doivent toujours avoir la balise "content: "" " dans leur CSS, ou alors rien ne s'affichera. Le content peut contenir un text qui s'affichera, ou alors rien du tout (donc laisser libre, sans espace, juste les guillemets): dans ce cas, ne s'affichera que le reste des données (bordure, couleur de fond, etc).
Ici, on les a tous deux mits en position absolue, pour pouvoir créer le petit triangle, à l'aide de border-width et border-color. C'est le display: block qui nous permet alors de faire comme si chacun étaient un div.


Voici donc le même code mais pour les bulles des personnages qui sont à droite grâce à bubble_right:
Code:
.bubble.bubble_right:before {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  border-style: solid;
  border-color: transparent white;
  border-width: 15px 0 15px 30px;
  right: -30px;
  bottom: 10px;
}

.bubble.bubble_right:after {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  border-color: transparent #fff;
  border-width: 9px 0 9px 21px;
  right: -21px;
  bottom: 6px;
}


En gros, on a échangé le left par le right et l'ordre des valeurs dans border-width! Rien de trop difficile: le code est presque le même! Wink

Maintenant qu'on a ça, parlons un peu de la façon d'afficher au passage de la souris sur l'image la bulle. D'abord, on va vouloir afficher infos_slide:
Code:
/* Apparition de la bulle */
.a_slide a:hover ~ .infos_slide {
  opacity: 1;
  visibility: visible;
  transition: all ease 1s;
}

Rien de compliqué: on change juste les valeurs dopacité de 0 à 1, et on rend la bulle visible avec visibility: visible
Cepndant, la partie difficile à comprendre est l'entête, où on utilise le sélecteur ~ comme plus tôt. Cependant, il est donc facile de comprendr eune fois qu'on a comprit le sélecteur: si un lien dans a_slide a la souris qui lui est passé dessus, alors le frère de class .infos_slide le plus porche aura ces propriétés. C'est donc très simple! Mais peut-être vous demandez-vous pourquoi je n'ai aps plutôt écrit .a_slide img:hover ~ .infos_slide ?
La répons est très simple: car ça ne marcherait pas! En effet, l'image n'a pas comme frère un info_slides: elle na d'ailleurs pas de frère du tout! Si par contre l'image n'était pas entourée d'un lien, ça marcherait superbement!
Mais alors, vous me direz, pourquoi est-ce que plus tôt cela marchait, vous me direz (rappel: c'était pour #slide1:checked ~ #slides .inner )? Tout simplement parce que les deux classes qui entourent le sélecteur ~ sont effectivement des frères, et c'est tout ce qu'on demande! En effet, on cherche bien un id slide1 qui est coché et a pour frère un id slides qui a lui-même un fils inner, et ce sera sur inner que se portent les modifications, vu que c'est le dernier dans la liste. En gros les deux classes qui entourent le sélecteur doivent être des éléments frères sinon ça ne marche pas.
J'espère que c'est assez clair, car cela peut être quelque chose de difficile à prendre en main et à comprendre les premières fois.


Maintenant que nous avons ceci, il est assez clair de comment le déplacement va se faire sur la bulle: on va utiliser le même sélecteur, mais sur la bulle qui est à la fois de la bonne id et de la bonne classe. Du coup, pour l'infos_slide d'id minato on aurait:
Code:
/* Déplacement de la bulle à l'apparition */
.a_slide a:hover ~ .infos_slide#minato {
  position: absolute;
  top: 20px;
  left: 360px;
}

Et voilà! Vous avez tout ce quil vous faut pour votre bulle et la faire apparaitre!

Mais peut-être vous demandez-vous encore comment j'ai fait l'intérieur, avec mon joli titre (h1) et mon petit paragraphe (p).

Pour les titres: rien de compliqué! Tout d'abord, j'annule tous les effets qui sotn déjà dans FA pour ne pas avoir de problèmes, et après, je leur donne quelques propriétés qui devraient vous êtres connues: couleur, couleur de fond, taille, police, etc. Bref, rien de bien sorcier! Le border.radius va d'ailleurs me permettre de suivre la forme de la bulle (bu que je ne peux pas mettre d'overflow: hidden, ou on ne verra pas le petit triangle...)
Code:
/* Mise en forme des titres dans la bulle */
.bubble h1 {
  /* Suppression des effets FA */
  display: block;
  margin: 0px;
  border-width: 0px;
  background: none;
  /* FIN  Suppression des effets FA */
  padding: 5px;
  width: auto;
  background-color: indianred;
  text-align: center;
  color: white;
  font-family: 'Georgia';
  font-size: 20pt;
  margin-bottom: 5px;
  border-radius: 10px 10px 0 0;
}


Pour les paragraphes: c'est le meme principe. On enlèves quelques trucs de FA qui sont déjà là de base, et ensuite, on met en forme. De plus, je donne une taille bien précise pour ne pas que ça ne sorte de la bulle et pas d'overflow: auto vu que la souris ne peut pas atteindre les bulles! J'ai donc un overflow: hidden juste pour faire sûr!
Code:
/* Mise en forme du texte dans la bulle */
.bubble p {
  /* Suppression des effets FA */
  margin: 0px;
  /* FIN  Suppression des effets FA */
  width: 90%;
  height: 65px;
  margin: auto;
  overflow: hidden;
  text-align: justify;
  font-size: 8pt;
  line-height: 10px;
}


Et voilà! Notre slideshow est terminé!
Cependant, si vous voulez mettre autre chose que juste ds images et des bulles dans votre slideshow, je vous conseille de lire ce qu'il suit!

Mettre autre chose dans son slideshow


Imaginons donc maintenant que je veux un slideshow où chaque slide a une image différente (pourquoi pas une image panoramique) et aussi des contenus en div. Il y a quelques changements à faire non? En gros quelque chose comme ça (mais ici, je n'ai fait que la première slide).

Le HTML


Pour le HTML, à vrai dire, pas grand chose ne change, si ce n'est que l'on va remplacer l'intérieur des slides (qui étaient que des images et une div de bulle je le rappelle) par plusieurs (ou même une seule) div et rajouter des id des slides. Mais allons par étape...

Tout d'abord, vous vous rappelez que notre slideshow "de base" avait ce code HTML:
Code:
<div id="slideshow">
      <input checked name="slideshow" id="slide1" type="radio" />
      <input name="slideshow" id="slide2" type="radio" />
      <input name="slideshow" id="slide3" type="radio" />
      <input name="slideshow" id="slide4" type="radio" />
      <input name="slideshow" id="slide5" type="radio" />
      <div id="slides">
              <div class="inner">
                    <div class="a_slide">
                    </div>
                    <div class="a_slide">
                    </div>
                    <div class="a_slide">
                    </div>
                    <div class="a_slide">
                    </div>
                    <div class="a_slide">
                    </div>
              </div>
      </div>
      <div id="controls">
              <label for="slide1"></label>
              <label for="slide2"></label>
              <label for="slide3"></label>
              <label for="slide4"></label>
              <label for="slide5"></label>
      </div>
</div>


Jusqu'ici, rien ne change. Je vais cependant ajouter un id à chaque slide, vu que je veux que chaque slide ait son propre fond!
Code:
                    <div class="a_slide" id="first">
                    </div>
                    <div class="a_slide" id="second">
                    </div>
                    <div class="a_slide" id="third">
                    </div>
                    <div class="a_slide" id="fourth">
                    </div>
                    <div class="a_slide" id="fifth">
                    </div>


Et maintenant, il suffit d'ajouter ce que je veux dedans! Je vais tout de même vous montrer ce que j'ai fait pour le premier slide. Tout d'abord, j'ai ajouté un titre:
Code:
                    <div class="a_slide" id="first">
            <h1>
                Bienvenue sur NOM DU FORUM
            </h1>
                    </div>


Ensuite, j'ai décidé de couper en deux parties: celle de droite (qui contiendra les prédéfinis) et celle de gauche, qui contiendra le contexte et le texte d'accueil:
Code:
                    <div class="a_slide" id="first">
            <h1>
                Bienvenue sur NOM DU FORUM
            </h1>
            <div id="gauche">
            <div>
            <div id="predefs">
            </div>
                    </div>


Et maintenant, dans la partie de gauche, j'ajoute l'accueil et le contexte:
Code:
                    <div class="a_slide" id="first">
            <h1>
                Bienvenue sur NOM DU FORUM
            </h1>
            <div id="gauche">
               <div id="accueil">
               </div>
               <div id="contexte">
               </div>
            <div>
            <div id="predefs">
            </div>
                    </div>


Et bien sûr je remplis tout ça avec les bons textes et images. Pour le contexte et l'accueil, je les entoure de la balise pour les paragraphes. Vous comprendrez dans le CSS très vite pourquoi!
Code:
         <div class="a_slide" id="first">
            
            <h1>
                Bienvenue sur NOM DU FORUM
            </h1>
            
            <div id="gauche">
               
               <div id="accueil">
                  
                  <p>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus egestas purus, vel posuere quam mattis et. Donec non lectus a nulla egestas dapibus nec a neque. Integer at ante semper, gravida lacus in, dapibus turpis. Curabitur mauris nibh, ultrices in aliquet in, placerat lobortis ligula. Cras eros nulla, faucibus at felis vitae, suscipit dapibus turpis. In laoreet mi eu pretium aliquam. Proin dapibus sem vitae mauris luctus dictum. Nullam libero est, lobortis id tincidunt scelerisque, rhoncus nec nulla. Integer cursus fringilla vestibulum.<br /><br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a lobortis magna, sed eleifend felis. Nam ac tincidunt risus. Suspendisse scelerisque, ipsum nec hendrerit dignissim, ligula dui molestie diam, at vestibulum augue felis non nisi. Fusce fermentum vestibulum enim sit amet fermentum. Praesent at dui nec dolor laoreet interdum. Proin sodales libero libero, id convallis nibh feugiat nec. Etiam pharetra ipsum vel nulla fermentum suscipit. Proin in lacinia leo. Fusce luctus justo non purus fermentum interdum.
                  </p>
                  
               </div>
               
               <div id="contexte">
                  
                  <p>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin volutpat ipsum sit amet nunc ultrices, eget tempor mauris auctor. Praesent egestas eros vitae pretium placerat. Nulla facilisi. Donec posuere pellentesque ligula a porttitor. Nunc vel iaculis risus, vel rutrum eros. Duis tincidunt facilisis felis, vitae suscipit nisi molestie vitae. Sed venenatis tristique est sed convallis.<br /><br /> Donec eu quam ullamcorper, bibendum velit sed, molestie metus. Sed et condimentum diam, id eleifend tellus. Proin vulputate ut odio commodo fringilla. Nullam odio lectus, egestas vitae mauris non, rhoncus pellentesque turpis. Praesent eu pulvinar risus. Nam egestas velit eget ornare malesuada. Sed lacinia sit amet est sit amet dapibus. Nulla facilisi.<br /><br /> In ultricies condimentum nunc, ac tempor metus viverra quis. Nullam sollicitudin ante vel ultrices molestie. Fusce eu auctor enim. Duis pulvinar est ut nibh convallis, in varius velit placerat. Praesent vulputate iaculis tellus, ac laoreet lacus tempor at. Vivamus aliquet porta diam semper blandit. Proin eu pretium sem, ut lobortis diam. Aliquam venenatis nisl sit amet lacinia blandit. Vestibulum sit amet augue iaculis, pulvinar tortor vel, rhoncus urna. Quisque molestie, massa eleifend condimentum volutpat, dolor lorem faucibus dui, at malesuada sem turpis ac lectus. Ut vehicula tempor lectus, et sodales felis faucibus non. Donec nec risus viverra, dapibus tellus elementum, feugiat sem. Nullam eleifend suscipit augue, vel lobortis neque consequat id. Sed tincidunt nec justo ut scelerisque.
                  </p>
                  
               </div>
               
            </div>
            
            <div id="predefs">
                <img src="http://img2.wikia.nocookie.net/__cb20120806022211/auburnhigh/images/thumb/4/44/Neko-boys-anime-animal-guys-3812411-468-700-2--1-.jpg/100px-0,468,0,468-Neko-boys-anime-animal-guys-3812411-468-700-2--1-.jpg" /> <img src="http://img2.wikia.nocookie.net/__cb20120806022211/auburnhigh/images/thumb/4/44/Neko-boys-anime-animal-guys-3812411-468-700-2--1-.jpg/100px-0,468,0,468-Neko-boys-anime-animal-guys-3812411-468-700-2--1-.jpg" /> <img src="http://img2.wikia.nocookie.net/__cb20120806022211/auburnhigh/images/thumb/4/44/Neko-boys-anime-animal-guys-3812411-468-700-2--1-.jpg/100px-0,468,0,468-Neko-boys-anime-animal-guys-3812411-468-700-2--1-.jpg" /> <img src="http://img2.wikia.nocookie.net/__cb20120806022211/auburnhigh/images/thumb/4/44/Neko-boys-anime-animal-guys-3812411-468-700-2--1-.jpg/100px-0,468,0,468-Neko-boys-anime-animal-guys-3812411-468-700-2--1-.jpg" /> <img src="http://img2.wikia.nocookie.net/__cb20120806022211/auburnhigh/images/thumb/4/44/Neko-boys-anime-animal-guys-3812411-468-700-2--1-.jpg/100px-0,468,0,468-Neko-boys-anime-animal-guys-3812411-468-700-2--1-.jpg" /> <img src="http://img2.wikia.nocookie.net/__cb20120806022211/auburnhigh/images/thumb/4/44/Neko-boys-anime-animal-guys-3812411-468-700-2--1-.jpg/100px-0,468,0,468-Neko-boys-anime-animal-guys-3812411-468-700-2--1-.jpg" /> <img src="http://img2.wikia.nocookie.net/__cb20120806022211/auburnhigh/images/thumb/4/44/Neko-boys-anime-animal-guys-3812411-468-700-2--1-.jpg/100px-0,468,0,468-Neko-boys-anime-animal-guys-3812411-468-700-2--1-.jpg" /> <img src="http://img2.wikia.nocookie.net/__cb20120806022211/auburnhigh/images/thumb/4/44/Neko-boys-anime-animal-guys-3812411-468-700-2--1-.jpg/100px-0,468,0,468-Neko-boys-anime-animal-guys-3812411-468-700-2--1-.jpg" />
            </div>
            
         </div>


Et voilà qui est terminé pour le HTML! Passons au CSS!

Le CSS


Encore une fois pour rappel, voici le CSS de base: remarquez cependant que j'ai SUPPRIMÉ le background-image de #slides, étant donné que je veux que chaque slide ait son image de fond!
Code:
/*************** DÉBUT PA ***************/
/* Permet de cacher les input (apparait sous forme radio sinon) */
#slideshow input {
  display: none;
}

/* Création du slideshow (contour) */
#slideshow {
  position: relative;
  width: 800px;
  height: 400px;
}

/* Conteneur de inner et de tous les slides, permet d'afficher un seul slide à la fois. */
#slides {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 800px;
  height: 400px;
  overflow: hidden;
}

/* Conteneur de tous les slides */
#slides .inner {
  width: 500%;
}

/* Mise en forme des slides */
#slides .a_slide {
  position: relative;
  width: 800px;
  height: 400px;
  float: left;
}

/* Déplacement des slides */
#slide1:checked ~ #slides .inner { margin-left:0; }
#slide2:checked ~ #slides .inner { margin-left:-100%; }
#slide3:checked ~ #slides .inner { margin-left:-200%; }
#slide4:checked ~ #slides .inner { margin-left:-300%; }
#slide5:checked ~ #slides .inner { margin-left:-400%; }

/* Mise ne place de l'élément contenant les flèches */
#controls {
  position: absolute;
  top: 45%;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 50px;
}

/* On met les labels à la bonne taille et on les cache */
#controls label {
  display: none;
  width: 50px;
  height: 50px;
  opacity: 0.3;
  transition: all ease-out 0.2s;
}

/* Effet au passage de la souris sur les flèches */
#controls label:hover {
  opacity: 0.8;
  transition: all ease-out 0.2s;
}

/* Mise en place de la flèche vers le slide suivant */
#slide1:checked ~ #controls label:nth-child(2),
#slide2:checked ~ #controls label:nth-child(3),
#slide3:checked ~ #controls label:nth-child(4),
#slide4:checked ~ #controls label:nth-child(5),
#slide5:checked ~ #controls label:nth-child(1) {
  background: url('http://csscience.com/responsiveslidercss3/next.png') no-repeat;
  float: right;
  margin: 0 -70px 0 0;
  display: block;
}

/* Mise en place de la flèche vers le slide précédent */
#slide1:checked ~ #controls label:nth-child(5),
#slide2:checked ~ #controls label:nth-child(1),
#slide3:checked ~ #controls label:nth-child(2),
#slide4:checked ~ #controls label:nth-child(3),
#slide5:checked ~ #controls label:nth-child(4) {
  background: url('http://csscience.com/responsiveslidercss3/prev.png') no-repeat;
  float: left;
  margin: 0 0 0 -70px;
  display: block;
}

/* Animation slides */
#slides .inner {
  -webkit-transform: translateZ(0);
  transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
}

/*************** FIN PA ***************/


Maintenant, il est temps d'ajouter les fond à chacun! Pour moi, ce n'est qu'une seule et même image, que je vais déplacer à l'aide du background-position. Et grâce au background-size dont nous avons parlé plus tôt, je vais le mettre à la bonne taille. Vu que j'ai 5 slides de 800px, cette bonne taille est de 4000px (5*8*100). Pour donc faire appel à ceci, je fais comme plus tôt: les slides à la fois de class a_slide et d'une certaine id auront ce fond. Si je fais cela, c'est au cas où ailleurs sur le forum, il y aurait un id first ou second, vu que ce sont des mots assez "usuels".
Code:
.a_slide#first {
  background-image: url('http://upload.wikimedia.org/wikipedia/commons/5/52/Mount_Ellinor,_Mount_Washington_Panorama.jpg');
  background-size: 4000px;
  background-position: 0px 0px;
}

.a_slide#second {
  background-image: url('http://upload.wikimedia.org/wikipedia/commons/5/52/Mount_Ellinor,_Mount_Washington_Panorama.jpg');
  background-size: 4000px;
  background-position: -800px 0;
}

.a_slide#third {
  background-image: url('http://upload.wikimedia.org/wikipedia/commons/5/52/Mount_Ellinor,_Mount_Washington_Panorama.jpg');
  background-size: 4000px;
  background-position: -1600px 0px;
}

.a_slide#fourth {
  background-image: url('http://upload.wikimedia.org/wikipedia/commons/5/52/Mount_Ellinor,_Mount_Washington_Panorama.jpg');
  background-size: 4000px;
  background-position: -2400px 0px;
}

.a_slide#fifth {
  background-image: url('http://upload.wikimedia.org/wikipedia/commons/5/52/Mount_Ellinor,_Mount_Washington_Panorama.jpg');
  background-size: 4000px;
  background-position: -3200px 0px;
}

Comme vous pouvez le voir, background-position prend bien sûr des pixels, et j'ai simplement ajouté 800 à chaque fois au premier nombre, qui est l'axe des x. Le deuxième représente l'axe des y.
L'image reste cependant la même, et le size aussi. J'aurais presque pu mettre à .a_slide le même background-image et background-size, et simplement modifier pour chaque id le background-position, mais pour ce tuto, j'ai préféré faire ainsi au cas où quelqu'un aurait prédécoupé le panorama, ou vraiment une image différente par slide!
Ensuite, vous pouvez noter que pour background-position j'ai une valeur négative. En effet, c'est pour que le background parte vers la gauche que je dois faire ça. Parce que le point 0 0 correspond au haut gauche de l'image. Or, l'axe des x part vers la droite, ce qui implique que des valeurs positives déplaceraient vers la droite l'image: ce n'est pas ce que nous voulons! On veut qu'elle "parte" à gauche au gré du défilement: il nous faut donc des valeurs négatives!


Et voilà! Vous avez donc une slideshow avec "un fond par slide"! Cependant, pour ce tuto ce n'est pas encore tout à fait terminé: comme promis, je vous montre comment j'ai fait l'intérieur de ce premier slide!

Commençons par le titre! Tout d'abord, j'ai retiré toutes les marges et donné une taille prédéterminée. En effet, je ne voulais pa que mon titre prenne trop de place, pour avoir de la place en dessous de lui et "coller" mes autres div à lui. Vu que les titres ont un overflow visible de base, ce n'est pas un problème ici: on verra le texte même s'il dépasse la hauteur souhaité! Sinon, je crois que le reste du code est tout à fait compréhensible (PS: notez que je n'ai pas supprimé tous les effets de FA ici, vu que ça ne gêne pas mon titre dans ce cas. Cependant, c'est une bonne pratique de le faire! J'ai juste eu la flemme à vrai dire.... faites pas comme moi je vous en prie!)
Code:
#first h1 {
  height: 30px;
  margin: 0px;
  widht: 100%;
  text-align: center;
  font-family: 'Georgia';
  font-size: 30pt;
}


Maintenant, il est temps de placer le div qui contiendra tout ce qui est à gauche, et celui des predefs. Tous deux seront mis côte-à-côte grâce à un display inline-block, et je leur donne une certaine taille et une marge pour qu'ils ne soient pas collés l'un à l'autre. #gauche n'aura pas de couleur de fond, mais #predefs oui vu que c'est un bloc "seul". De plus, j'ajouter un padding à predefs (ce qui m'oblige à raccourcir la hauteur, car padding+hauteur = hauteur réelle) car j'ai remarqué plus tard que les images étaient trop collées en haut.
Code:
#first #gauche {
  display: inline-block;
  vertical-align: top;
  width: 500px;
  height: 380px;
  margin: 10px;
}

#first #predefs {
  display: inline-block;
  vertical-align: top;
  width: 250px;
  height: 345px;
  margin: 10px;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  padding-top: 5px;
}

Vous remarquez également que je donne une transparence au fond de predefs, ce qui ne va pas affecter mon texte à l'intérieur!

Maintenant que c'est fait, je peux m'occuper des deux blocs dans #gauche. Ceux-ci auront plus ou moins les même caractéristiques que #predefs, mais le display: inline-block en moins et, bien sûr, avec une autre taille! Vous remarquerez que, pour cette dernière, j'ai d'ailleurs utilisé des pourcent. Ce n'est bien sûr pas obligatoire et vous auriez pu tout mettre en pixels, ou même, un pourcentage pour la largeur et des pixels pour la hauteur ou vice-versa!
Code:
#first #accueil {
  width: 100%;
  height: 30%;
  margin-bottom: 10px;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 20px;
}

#first #contexte {
  width: 100%;
  height: 60%;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 20px;
}


Maintenant que je me suis occupée de tous mes blocs, je vais m'occuper des paragraphes dans les deux de gauches. Je vais donc donner une certaine hauteur et une certaine largeur à ces paragraphes, ainsi que les centrer dans mes blocs: comme ça, j'aurais un joli overflow qui ne détruit pas la "rondeur" de mon bloc.
Code:
#accueil p {
  height: 90px;
  width: 90%;
  padding: 10px;
  text-align: justify;
  margin-top: 5px;
  overflow: auto;
}

#contexte p {
  height: 200px;
  width: 90%;
  padding: 10px;
  text-align: justify;
  margin-top: 5px;
  overflow: auto;
}

La hauteur est donc plus petite que le bloc, à cause du padding, mais aussi, pour laisser un joli espace.

Et enfin, je m'occupe des images de prédéfinis: je les veux rondes, et plus petites que 100px, avec une marge entre elles. Vous remarquerez cependant qu'ici, mes prédéfinis ne sont que des images. La plupart d'entre vous rajouteraient cependant des infobulles, ou au moins un lien autour de chaque image. Bien sûr, c'est possible, mais je ne l'ai pas fait ici, vu que j'ai un autre tuto sur les infobulles qui vous l'explique très bien et que ce n'est pas le propos!
Code:
#predefs img {
  display: inline-block;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  margin: 10px;
  margin-top: 5px;
  margin-bottom: 5px;
}

Donc un display: inline-block pour qu'elle ait des marges et soit tout de même côte-à-côte (vu que les éléments inline ne prennent pas de marges), le border-radius à 50% pour avoir un rond, et on force les images à être à 70px!


Et voilà, vous avez votre slideshow (ou presque vu qu'il vous manque encore les quatre autres slides, mais je vous fais confiance pour y arriver Wink )!
Ce fût long, mais j'espère assez compréhensible! Merci de votre attention et à bientôt!


Revenir en haut

La date/heure actuelle est Jeu 28 Mar 2024 - 20:22