Rappel du premier message :
Mais oui je vous bombarde de tutos! Maintenant, un petit tuto qui fait suite à mon tuto sur le slideshow, bien que je vais prendre tous les points dont j'ai parlé dans le tuto des slideshow. Donc pas de panique: je ne vous demande pas d'avoir lu quoi que ce soit avant de lire ce tuto!
Voici une rapide explication de comment le tuto est découpé: tout d'abord, je vais parler du principe général que j'utilise pour faire les onglets, pour vous expliquer rapidement comment ça marche. Ensuite, je passerais par un exemple pour montrer ce qu'on peut faire. Pour ce faire, je vais créer une fiche de présentation, car en effet, contrairement au Javascript qui n'est pas utilisable dans les messages, le CSS3, lui, l'est! Du coup je découperais la deuxième partie en deux: la première sur le HTML et la seconde sur le CSS!
J'espère que je serais assez claire dans ce tuto, mais en cas de doute, n'hésitez pas à utiliser la section des problèmes en codage!
Comme vous pouvez vous l'imaginer, mon but était ici de créer des ognlets similaires au Javascript, c'est à dire qu'on a pas à chaque fois un "nouveau lien" pour chaque onglet qu'on ouvre, contrairement aux :target. C'est pour ça qu'en écrivant sur le slideshow à l'aide des input et des labels, j'ai vite eu l'idée de l'adapter au principe des onglets.
Le principe est très simple, et pour cela, il faut que je vous explique deux choses: ce qu'est le sélecteur ~ et ce qu'est la pseudo-élément :checked! (Vous retrouverez la même explication dans mon tuto sur le slideshow, mais ici, elle est "en clair"
)
Et voilà, maintenant que vous connaissez ces deux petites choses, on peut commencer avec les choses sérieuses!
Tout d'abord, commençons donc avec une div tout simple, qui va entourer tout notre système d'onglets. C'est important, car cela nous permettra de facilement appeler par le CSS les input, si on ne veut pas mettre une class.
Ensuite, nous allons créer autant de input que nous voulons d'onglet, en leur donnant à chacun un id particulier. Je rappelle qu'un id est UNIQUE, donc ne doit pas se trouver ailleurs sur la page!
Pour vous donner un exemple, j'utilise déjà la fiche de présentation que je vais faire plus tard. Pour elle, j'ai cinq onglets, donc cinq input! Ils seront tous de type radio, et auront le même nom: la seule chose qui les différencie est l'id.
Maintenant: tout ce que vous ajoutez, mais surtout tout ce que vous voulez pouvoir change au click sur l'onglet doit se trouver en dessous des input. En effet, grâce au sélecteur que nous avons vu plus tôt, nous pourrons facilement choisir tout et n'importe quoi qui se trouve à la SUITE des input.
Du coup, je vous conseille toujours mettre les input tout en haut de votre conteneur principal d'onglets, le reste, même s'il ne change pas au gré des onglets, pourra être après: ça ne rajoute pas des lignes de CSS, ce n'est pas plus difficile, etc.
Bref, maintenant que nous avons nos input, nous devrions ajouter nos label. Les labels, ce sont les "boutons" qui vont nous permettre d'aller à un onglet à un autre. En effet, lorsqu'un label qui correspond à un input, est cliqué, eh bien c'est comme si on avait coché l'input correspondant. Cela vous rappelle quelque chose? Eh bien oui! C'est ce qui va nous permettre "d’appeler" le :checked dans le CSS!
Pour faire correspondre un lable à n input, il suffit de mettre dans l'attribut "for" du label, l'id de l'input correspondant.
Cependant, pour la pratique, vous devriez mettre tous les labels dans une seule et meme div d'une certaine classe, notamment si vous voulez leur donner à tous ne même allure lorsqu'ils sont actif, non actifs ou au passage de la souris!
Donc niveau code, on aurait ça:
Vous voyez également que je leur ai donné à chacun deux classes (mettre class="lab hist" par exemple, signifie que l'élément est à la fois de la classe lab ET de la classe hist).
Maintenant, il vous suffit de placer tout ce que vous voulez dans vos onglets avant ou même après les label mais toujours après les input. Je vous conseillerais cependant de toujours mettre un div conteneur de tout les trucs changeant dans vos onglets pur facilement leur donner des position, ou des changements globaux, comme la taille, etc.
Pour mon code futur, j'aurais quelque chose comme ça:
Maintenant, parlons rapidement du CSS.
Tout d'abord, il faut savoir que les inut ne nous sont utiles à rien "visuellement" parlant. C'est pru cela que la première chose qu'on va faire, c'est de les "cacher" à l'aide d'un display. Cependant, attention de ne pas le faire sur les input seul, mais uniquement sur les input de votre fiche, ou sinon, vous serez incapable de créer des sujets ou envoyer des messages, vu que les boutons envoyer, prévisualiser et les titres sont TOUS des input.
Donc pour l'instant on a ça:
Maintenant, pour ce qui est de l'effet lors du click du bouton de l'onglet, c'est ici qu'on va utiliser le sélecteur ~ tout comme :checked. Prenons par exemple, si je veux modifier le label "Infos" quand je clique dessus, pour bien indiquer que c'est sur CE label que je suis (comme l'onglet actif en Javascript) il me suffit d'écrir:
Ici, je dis: lorsque l'élément à id informations et coché (checked) alors le plus proche frère de classe boutons, verra son fils de classe lab ET infos modifié ainsi: sa couleur deviendra rouge.
C'est le même principe avec tout! Imaginons que j'ai une image de class="imag infos" que je veux aussi modifier lorsque #informations:checked, alors j'écris:
Bien sûr, il faudrait de façon optimale qu'à la "base", c'est à dire que quand le label est non-coché, l'élément qui sera modifié (dans nos deux exemples le label d'informations puis l'image d'informations) ait une autre allure, et si possible, tous la même. On pourrait par exemple penser à une opacité à 0 pour toutes les images quand l'input correspondant n'est pas coché, ou un display: none pour le contenu des onglets. C'est pour cela que les "double classes" sont utiles: dans mon exemple, j'aurais toutes les images qui seront de classe imag, et chacune des images aura une classe supplémentaire différente: infos, phys, car, hist et ecr. Cela me permettra donc de donner une allure générale à toutes mes images en mettant un:
Qui me permet de toutes les rendre invisibles, et le code plus haut me permet de les rendre visible seulement quand le on input est coché.
J'espère donc que tout ceci est assez claire: c'est vraiment la base de ce qu'il faut savoir, et si vous avez compris, l'exemple à la suite ne vous sera pas nécessaire. Cependant, si vous n'avez pas très bien compris, j'espère que l'exemple qui va suivre sera assez compréhensible pour que vous puissiez faire par vous même par la suite!
Pour cette exemple voilà ce que je vais vous montrer comment faire. Comme vous pouvez le voir, les labels sont donc les différentes parties usuelles d'une présentation (Infos, Physique, Caractère, Histoire et Derrière l'écran) et autant le texte interne que l'image du haut change.
Si vous avez bien lu ce qu'il y a plus haut, vous pouvez vous imaginer plus ou moins comment j'ai fait tout ça mais malgré tout, je vais vous expliquer pas à pas!
Rappelez-vous plus haut, j'ai dit que ma base était ceci:
Vu que je veux en faire une fiche de présentation, je vais tout de suite ajouter deux choses: le Nom et Prénom et une petite citation:
Ce qui donne, sachant que je veux mettre le nom sous l'image et qui "empiète" sur l'image:
Maintenant, il est temps de rajouter les images. Je vais créer des div avec deux classes, comme expliqué plus haut: la class imag pour chacune d'entre elle, et leur classe qui leur est "propre" qui va me permettre de la changer au gré de boutons.
Vous remarquerez que j'ai mit tout de suite dans la balise style l'image de fond. De cette façon, les membres pourront changer les images comme bon leur semble. C'est aussi la raison pour laquelle j'ai mit des balises div et non pas des balises img, car on ne sait jamais la taille des images que vont nous donner les membres. Je redimensionne ici la largeur automatiquement dans le CSS, mais je déteste donner une hauteur et une largeur fixe, qui déformerait alors les images. Je préfère donc mettre une div. C'est donc une préférence personnelle: vous n'êtes pas obligés de faire comme moi.
Maintenant, rajoutons les div qui contiendront nos descriptions physique, mental, l'histoire et les infos (tant RP que joueur). Ce sera le même principe que celui des images: je donne une classe générale à tous mes contenus qui s'appelle justement contenu et une class qui leur est spécifique. Vu que je n'utilise jamais les classes spécifiques aux images ou au contenu seules pour quoi que ce soit, et que j'écris toujours dans CSS leur deux classes (donc par exemple .imag.infos ou .contenu.info et jamais .infos seul) j'ai mit la même classe "spécifique" tant à l'image qu'au contenu correspondant.
J'ai le droit de le faire: une classe n'est pas un id, et donc, n'a pas à être unique! Cependant, faites bien attention de ne PAS spécifier dans le CSS de choses pour els classes communes à des choses qui n'ont rien à voir, mais bien d'utiliser les deux classes qui les décrivent!
Quoiqu'il en soit, voilà tout le HTML maintenant que j'ai ajouté le contenu de chaque onglet:
Il est à noter que j'ai également deux link de polices de Google Fonts qui sont ajoutées à ma présentation, mais vus devriez les mettre dans votre overall_header. Ces deux polices sont Abel et Lobster.
Maintenant, il est temps de passer au CSS de ma fiche!
Tout d'abord, on va mette en forme la fiche de façon tout à fait normale. Du coup, ça ne tient que du CSS dont vous avez l'habitude et de mettre la fiche en forme comme on veut.
Tout d'abord, on va cacher les input en haut de fiche. On ne veut pas qu'ils apparaissent, parce qu'ils sont un peu moche, mais aussi et surtout parce qu'ils ne sont pas utiles. On a donc ceci:
Ensuite, je crée la fiche. Bords arrondis, un fond, une taille, je la centre. Rien de bien compliqué.
Maintenant, je vais aussi mettre en forme tous els "invariants" de la fiche. C'est à dire, tout ce qui ne va pas changer au gré des onglets. Pour moi, c'est le titre et la citation. Je les mets donc en forme:
Maintenant, on a les labels (qui sont donc nos titre des onglets), ainsi que le contenu à mettre en forme. Là, ça devient un peu plus corsé, parce qu'on veut que ça change.
Cependant, ce n'est pas si compliqué que cela. En effet, on va mettre en forme simplement comme s'il n'y avait pas d'onglets. Donc on va simplement mettre en forme les différents éléments, comme si on faisait une fiche normale.
Je commence par les images. Je vais donc leur donner des tailles (vu qu'elles sont dans des div), ainsi que de mettre une taille pour l'image de fond. Je les place alors toutes au bon endroit.
Je mets également tout de suite l'opacité à 0 et la visibilité à invisible. En effet, je ne veux faire apparaître mes images que lorsque le bon onglet est sélectionné. Cependant, si vous voulez voir le résultat pour votre fiche avant d'avoir activé les onglets, juste pour voir à quoi ça ressemble, vous pouvez effacer ces deux lignes.
Mettons également les lables, ou les titres d'onglets, en forme. Ici, on les met en forme quand les onglets sont non-sélectionnés, mais aussi lorsqu'on passe la souris sur eux. Je mets également le cursor: pointer; pour que l'on voie que le label est cliquable, et représente donc un onglet.
Avec l'aide de mon conteneur "boutons" je vais aussi faire en sorte que les labels soient bien centrés.
À présent, je vais mettre en place et en forme la partie de la contenue de ma fiche. Tout d'abord, vu que je veux un effet d'apparition en fondu, je dois donner une hauteur à mon contenuer "interne" et le mettre en position relative. Les "contenu" devront également avoir une hauteur prédéfinie et un overflow: auto; pour que le texte ne dépasse pas. Comme pour les images, je les mets tout de suite l'opacité à 0 et la visibilité à invisible, vu que je ne veux faire apparaître mon contenu que lorsque le bon onglet est sélectionné.
Si vous n'aimez pas les barres de navigation/scroll pour les longs contenus, vous pouvez très bien supprimer le positionnement absolu des "contenu" et plutôt que d'utiliser opacity: 0; et visibility: hidden;, vous pouvez utiliser display: none;. Vous n'aurez cependant plus d'apparition en fondu.
Enfin, dernière partie de la mise en forme de base: je vais mettre un petit effet sur ce que je mets en gras dans la fiche. Je veux une autre couleur.
Il est donc temps de modifier selon quel onglet est changé. En fait, c'est très simple à comprendre avec les explications de plus haut. Vu qu'on a bien fait en sorte que les input soient frères aux classes "boutons", "images" et "interne", il suffit pour chaque bon input/onglet (donc ce qu'on a décrit avec une id, qui deviendra donc #informations ) de faire apparaître ou modifier le bon élément.
Ici, vu qu'on a utilisé des classes similaires pour chaque éléments (donc .infos, .phys, .car, .hist et .ecr), on a n'a qu'à changer la classe qui précède. Pour plus de sécurité cependant, j'ai utilisé la "double-classe" comme ceci: .lab.infos. Cependant, au lieu de .fiche #informations:checked ~ .boutons .lab.infos vous auriez pu simplement écrire .fiche #informations:checked ~ .boutons .infos.
Voici donc le CSS complet et commenté:
Onglets en full CSS3
Mais oui je vous bombarde de tutos! Maintenant, un petit tuto qui fait suite à mon tuto sur le slideshow, bien que je vais prendre tous les points dont j'ai parlé dans le tuto des slideshow. Donc pas de panique: je ne vous demande pas d'avoir lu quoi que ce soit avant de lire ce tuto!
Toutes versions ▬ CSS3 & HTML5
Voici une rapide explication de comment le tuto est découpé: tout d'abord, je vais parler du principe général que j'utilise pour faire les onglets, pour vous expliquer rapidement comment ça marche. Ensuite, je passerais par un exemple pour montrer ce qu'on peut faire. Pour ce faire, je vais créer une fiche de présentation, car en effet, contrairement au Javascript qui n'est pas utilisable dans les messages, le CSS3, lui, l'est! Du coup je découperais la deuxième partie en deux: la première sur le HTML et la seconde sur le CSS!
J'espère que je serais assez claire dans ce tuto, mais en cas de doute, n'hésitez pas à utiliser la section des problèmes en codage!
Le principe général
Comme vous pouvez vous l'imaginer, mon but était ici de créer des ognlets similaires au Javascript, c'est à dire qu'on a pas à chaque fois un "nouveau lien" pour chaque onglet qu'on ouvre, contrairement aux :target. C'est pour ça qu'en écrivant sur le slideshow à l'aide des input et des labels, j'ai vite eu l'idée de l'adapter au principe des onglets.
Le principe est très simple, et pour cela, il faut que je vous explique deux choses: ce qu'est le sélecteur ~ et ce qu'est la pseudo-élément :checked! (Vous retrouverez la même explication dans mon tuto sur le slideshow, mais ici, elle est "en clair"
)Le pseudo-élément :checked
Le pseudo-élément checked est utilisé dans le CSS pour les formulaires, plus particulièrement pour les input de types radios (les petits ronds pour les votes quand vous ne pouvez voter que pour un choix) ou pour les types choix multiples (quand vous pouvez voter pour plusieurs choix). Ici, dans notre tutoriel, nous utiliserons uniquement des input de type radio (car on ne veut qu'un seul onglet à la fois).
En gros, :checked nous permet de voir si un input a été coché ou non. En somme, si nous avons par exemple ceci:
"Eh!" me direz-vous "mais je sais pas ce que c'est ce ~ moi!". Bah oui, mais j'y arrive! =P
Cependant, tout ce que vous avez à retenir de :checked, c'est qu'on regarde lequel a été coché (d'input) et on agit en conséquence.
Le pseudo-élément checked est utilisé dans le CSS pour les formulaires, plus particulièrement pour les input de types radios (les petits ronds pour les votes quand vous ne pouvez voter que pour un choix) ou pour les types choix multiples (quand vous pouvez voter pour plusieurs choix). Ici, dans notre tutoriel, nous utiliserons uniquement des input de type radio (car on ne veut qu'un seul onglet à la fois).
En gros, :checked nous permet de voir si un input a été coché ou non. En somme, si nous avons par exemple ceci:
- Code:
<input name="fiche" id="physique" type="radio" />
- Code:
#physique:checked ~ label {
color: white;
}
"Eh!" me direz-vous "mais je sais pas ce que c'est ce ~ moi!". Bah oui, mais j'y arrive! =P
Cependant, tout ce que vous avez à retenir de :checked, c'est qu'on regarde lequel a été coché (d'input) et on agit en conséquence.
Le sélecteur ~
Ce sélecteur signifie "l'élément frère le plus proche".
Mais qu'est un élément frère? Eh bien ce sont des éléments qui sont "sur la même ligne verticale" ou plutôt, qui ont la même grandeur d'encapsulation. Cependant, même comme ça, ça ne doit pas vous dire grand chose, alors voici des exemples:
Exemple:
En somme, si votre code est bien indenté, il est facile de voir quels éléments sont des frères/sœurs, et lesquels sont des parents/enfants les uns des autres. En effet, les frères/sœurs seront sur le même niveau, et les parents/enfants seront sur des niveaux différents!
Il est à noter que seul les deux éléments qui entourent le ~ doivent être des frères! On peut bien sûr faire appel à d'autres classes avant pour l'élément à gauche du sélecteur (par exemple si on veut sélectionner une class mais à un endroit spécifique du code, par exemple dans un id spécifique) ou alors plus bas dans la hiérarchie pour celui à droite du sélecteur. Par exemple .hallow #machin p .important ~.livres #chouette marche, tanr que .important (qui est le fils d'un p qui lui-même est le fils de #machin, qui lui-même est le fils de .hallow) est frère de .livres, le code va marcher, et effectivement s'exécuter sur #chouette qui se trouve dans .livres!
Ce sélecteur signifie "l'élément frère le plus proche".
Mais qu'est un élément frère? Eh bien ce sont des éléments qui sont "sur la même ligne verticale" ou plutôt, qui ont la même grandeur d'encapsulation. Cependant, même comme ça, ça ne doit pas vous dire grand chose, alors voici des exemples:
Exemple:
- Code:
<div id="un">
<div id="deux">
</div>
</div>
- Code:
<div id="un">
</div>
<div id="deux">
</div>
En somme, si votre code est bien indenté, il est facile de voir quels éléments sont des frères/sœurs, et lesquels sont des parents/enfants les uns des autres. En effet, les frères/sœurs seront sur le même niveau, et les parents/enfants seront sur des niveaux différents!
Il est à noter que seul les deux éléments qui entourent le ~ doivent être des frères! On peut bien sûr faire appel à d'autres classes avant pour l'élément à gauche du sélecteur (par exemple si on veut sélectionner une class mais à un endroit spécifique du code, par exemple dans un id spécifique) ou alors plus bas dans la hiérarchie pour celui à droite du sélecteur. Par exemple .hallow #machin p .important ~.livres #chouette marche, tanr que .important (qui est le fils d'un p qui lui-même est le fils de #machin, qui lui-même est le fils de .hallow) est frère de .livres, le code va marcher, et effectivement s'exécuter sur #chouette qui se trouve dans .livres!
Et voilà, maintenant que vous connaissez ces deux petites choses, on peut commencer avec les choses sérieuses!
Tout d'abord, commençons donc avec une div tout simple, qui va entourer tout notre système d'onglets. C'est important, car cela nous permettra de facilement appeler par le CSS les input, si on ne veut pas mettre une class.
Ensuite, nous allons créer autant de input que nous voulons d'onglet, en leur donnant à chacun un id particulier. Je rappelle qu'un id est UNIQUE, donc ne doit pas se trouver ailleurs sur la page!
Pour vous donner un exemple, j'utilise déjà la fiche de présentation que je vais faire plus tard. Pour elle, j'ai cinq onglets, donc cinq input! Ils seront tous de type radio, et auront le même nom: la seule chose qui les différencie est l'id.
- Code:
<div class="fiche"><!-- Ceci est donc la div qui va contenir l'ensemble du système d'onglets. -->
<input checked="" name="fiche" id="informations" type="radio" /> <input name="fiche" id="physique" type="radio" /> <input name="fiche" id="caractere" type="radio" /> <input name="fiche" id="histoire" type="radio" /> <input name="fiche" id="ecran" type="radio" />
</div>
Maintenant: tout ce que vous ajoutez, mais surtout tout ce que vous voulez pouvoir change au click sur l'onglet doit se trouver en dessous des input. En effet, grâce au sélecteur que nous avons vu plus tôt, nous pourrons facilement choisir tout et n'importe quoi qui se trouve à la SUITE des input.
Du coup, je vous conseille toujours mettre les input tout en haut de votre conteneur principal d'onglets, le reste, même s'il ne change pas au gré des onglets, pourra être après: ça ne rajoute pas des lignes de CSS, ce n'est pas plus difficile, etc.
Bref, maintenant que nous avons nos input, nous devrions ajouter nos label. Les labels, ce sont les "boutons" qui vont nous permettre d'aller à un onglet à un autre. En effet, lorsqu'un label qui correspond à un input, est cliqué, eh bien c'est comme si on avait coché l'input correspondant. Cela vous rappelle quelque chose? Eh bien oui! C'est ce qui va nous permettre "d’appeler" le :checked dans le CSS!
Pour faire correspondre un lable à n input, il suffit de mettre dans l'attribut "for" du label, l'id de l'input correspondant.
Cependant, pour la pratique, vous devriez mettre tous les labels dans une seule et meme div d'une certaine classe, notamment si vous voulez leur donner à tous ne même allure lorsqu'ils sont actif, non actifs ou au passage de la souris!
Donc niveau code, on aurait ça:
- Code:
<div class="fiche">
<input checked="" name="fiche" id="informations" type="radio" /> <input name="fiche" id="physique" type="radio" /> <input name="fiche" id="caractere" type="radio" /> <input name="fiche" id="histoire" type="radio" /> <input name="fiche" id="ecran" type="radio" />
<div class="boutons"><label for="informations" class="lab infos">Infos</label> <label for="physique" class="lab phys">Physique</label> <label for="caractere" class="lab car">Caractère</label> <label for="histoire" class="lab hist">Histoire</label> <label for="ecran" class="lab ecr">Derrière l'écran</label> </div>
</div>
Vous voyez également que je leur ai donné à chacun deux classes (mettre class="lab hist" par exemple, signifie que l'élément est à la fois de la classe lab ET de la classe hist).
Maintenant, il vous suffit de placer tout ce que vous voulez dans vos onglets avant ou même après les label mais toujours après les input. Je vous conseillerais cependant de toujours mettre un div conteneur de tout les trucs changeant dans vos onglets pur facilement leur donner des position, ou des changements globaux, comme la taille, etc.
Pour mon code futur, j'aurais quelque chose comme ça:
- Code:
<div class="fiche">
<input checked="" name="fiche" id="informations" type="radio" /> <input name="fiche" id="physique" type="radio" /> <input name="fiche" id="caractere" type="radio" /> <input name="fiche" id="histoire" type="radio" /> <input name="fiche" id="ecran" type="radio" />
<div class="images"><!-- Ici des images qui changeront à chaque onglet --></div>
<div class="boutons"><label for="informations" class="lab infos">Infos</label> <label for="physique" class="lab phys">Physique</label> <label for="caractere" class="lab car">Caractère</label> <label for="histoire" class="lab hist">Histoire</label> <label for="ecran" class="lab ecr">Derrière l'écran</label> </div>
<div class="contenu_onglet"><!-- Ici des div contenant mes contenus (description physique, infos, etc) --></div>
</div>
Maintenant, parlons rapidement du CSS.
Tout d'abord, il faut savoir que les inut ne nous sont utiles à rien "visuellement" parlant. C'est pru cela que la première chose qu'on va faire, c'est de les "cacher" à l'aide d'un display. Cependant, attention de ne pas le faire sur les input seul, mais uniquement sur les input de votre fiche, ou sinon, vous serez incapable de créer des sujets ou envoyer des messages, vu que les boutons envoyer, prévisualiser et les titres sont TOUS des input.
Donc pour l'instant on a ça:
- Code:
.fiche input {
display: none;
}
Maintenant, pour ce qui est de l'effet lors du click du bouton de l'onglet, c'est ici qu'on va utiliser le sélecteur ~ tout comme :checked. Prenons par exemple, si je veux modifier le label "Infos" quand je clique dessus, pour bien indiquer que c'est sur CE label que je suis (comme l'onglet actif en Javascript) il me suffit d'écrir:
- Code:
#informations:checked ~ .boutons .lab.infos { color: red; }
Ici, je dis: lorsque l'élément à id informations et coché (checked) alors le plus proche frère de classe boutons, verra son fils de classe lab ET infos modifié ainsi: sa couleur deviendra rouge.
C'est le même principe avec tout! Imaginons que j'ai une image de class="imag infos" que je veux aussi modifier lorsque #informations:checked, alors j'écris:
- Code:
#informations:checked ~ .images .imag.infos { opacity: 1; }
Bien sûr, il faudrait de façon optimale qu'à la "base", c'est à dire que quand le label est non-coché, l'élément qui sera modifié (dans nos deux exemples le label d'informations puis l'image d'informations) ait une autre allure, et si possible, tous la même. On pourrait par exemple penser à une opacité à 0 pour toutes les images quand l'input correspondant n'est pas coché, ou un display: none pour le contenu des onglets. C'est pour cela que les "double classes" sont utiles: dans mon exemple, j'aurais toutes les images qui seront de classe imag, et chacune des images aura une classe supplémentaire différente: infos, phys, car, hist et ecr. Cela me permettra donc de donner une allure générale à toutes mes images en mettant un:
- Code:
.fiche .images .imag {
opacity: 0;
transition: all ease 1s;
]
Qui me permet de toutes les rendre invisibles, et le code plus haut me permet de les rendre visible seulement quand le on input est coché.
J'espère donc que tout ceci est assez claire: c'est vraiment la base de ce qu'il faut savoir, et si vous avez compris, l'exemple à la suite ne vous sera pas nécessaire. Cependant, si vous n'avez pas très bien compris, j'espère que l'exemple qui va suivre sera assez compréhensible pour que vous puissiez faire par vous même par la suite!
Exemple: faire une fiche de présentation
Pour cette exemple voilà ce que je vais vous montrer comment faire. Comme vous pouvez le voir, les labels sont donc les différentes parties usuelles d'une présentation (Infos, Physique, Caractère, Histoire et Derrière l'écran) et autant le texte interne que l'image du haut change.
Si vous avez bien lu ce qu'il y a plus haut, vous pouvez vous imaginer plus ou moins comment j'ai fait tout ça mais malgré tout, je vais vous expliquer pas à pas!
Le HTML
Rappelez-vous plus haut, j'ai dit que ma base était ceci:
- Code:
<div class="fiche"><input checked="" name="fiche" id="informations" type="radio" /> <input name="fiche" id="physique" type="radio" /> <input name="fiche" id="caractere" type="radio" /> <input name="fiche" id="histoire" type="radio" /> <input name="fiche" id="ecran" type="radio" /><div class="images"></div>
<div class="boutons"><label for="informations" class="lab infos">Infos</label> <label for="physique" class="lab phys">Physique</label> <label for="caractere" class="lab car">Caractère</label> <label for="histoire" class="lab hist">Histoire</label> <label for="ecran" class="lab ecr">Derrière l'écran</label> </div>
<div class="boutons"><label for="informations" class="lab infos">Infos</label> <label for="physique" class="lab phys">Physique</label> <label for="caractere" class="lab car">Caractère</label> <label for="histoire" class="lab hist">Histoire</label> <label for="ecran" class="lab ecr">Derrière l'écran</label> </div>
<div class="interne"></div>
</div>
Vu que je veux en faire une fiche de présentation, je vais tout de suite ajouter deux choses: le Nom et Prénom et une petite citation:
- Code:
<h1>Prénom Nom</h1>
<div class="citation">« Une jolie petite citation »</div>
Ce qui donne, sachant que je veux mettre le nom sous l'image et qui "empiète" sur l'image:
- Code:
<div class="fiche"><input checked="" name="fiche" id="informations" type="radio" /> <input name="fiche" id="physique" type="radio" /> <input name="fiche" id="caractere" type="radio" /> <input name="fiche" id="histoire" type="radio" /> <input name="fiche" id="ecran" type="radio" /><div class="images"></div>
<h1>Prénom Nom</h1>
<div class="citation">« Une jolie petite citation »</div>
<div class="boutons"><label for="informations" class="lab infos">Infos</label> <label for="physique" class="lab phys">Physique</label> <label for="caractere" class="lab car">Caractère</label> <label for="histoire" class="lab hist">Histoire</label> <label for="ecran" class="lab ecr">Derrière l'écran</label> </div>
<div class="boutons"><label for="informations" class="lab infos">Infos</label> <label for="physique" class="lab phys">Physique</label> <label for="caractere" class="lab car">Caractère</label> <label for="histoire" class="lab hist">Histoire</label> <label for="ecran" class="lab ecr">Derrière l'écran</label> </div>
<div class="interne"></div>
</div>
Maintenant, il est temps de rajouter les images. Je vais créer des div avec deux classes, comme expliqué plus haut: la class imag pour chacune d'entre elle, et leur classe qui leur est "propre" qui va me permettre de la changer au gré de boutons.
- Code:
<div class="fiche"><input checked="" name="fiche" id="informations" type="radio" /> <input name="fiche" id="physique" type="radio" /> <input name="fiche" id="caractere" type="radio" /> <input name="fiche" id="histoire" type="radio" /> <input name="fiche" id="ecran" type="radio" /><div class="images">
<div class="imag infos" style="background-image: url('http://38.media.tumblr.com/baa66b83079e0cfb94328d9d721b7acc/tumblr_n8ucrv9CWu1taqwcpo5_500.gif');"></div>
<div class="imag phys" style="background-image: url('http://33.media.tumblr.com/6406227aace1b8d25a5c94c4fae05f04/tumblr_n8ucrv9CWu1taqwcpo6_500.gif');"></div>
<div class="imag car" style="background-image: url('http://33.media.tumblr.com/4cba62a69dc06430c78675a25b783669/tumblr_n8ucrv9CWu1taqwcpo9_500.gif');"></div>
<div class="imag hist" style="background-image: url('http://31.media.tumblr.com/22f282d3778e8ec3811cd6c82fa8977f/tumblr_n8ucrv9CWu1taqwcpo8_400.gif');"></div>
<div class="imag ecr" style="background-image: url('http://media.tumblr.com/tumblr_lnmvmtBDbM1qm00hqo1_500.gif');"></div>
</div>
<h1>Prénom Nom</h1>
<div class="citation">« Une jolie petite citation »</div>
<div class="boutons"><label for="informations" class="lab infos">Infos</label> <label for="physique" class="lab phys">Physique</label> <label for="caractere" class="lab car">Caractère</label> <label for="histoire" class="lab hist">Histoire</label> <label for="ecran" class="lab ecr">Derrière l'écran</label> </div>
<div class="boutons"><label for="informations" class="lab infos">Infos</label> <label for="physique" class="lab phys">Physique</label> <label for="caractere" class="lab car">Caractère</label> <label for="histoire" class="lab hist">Histoire</label> <label for="ecran" class="lab ecr">Derrière l'écran</label> </div>
<div class="interne"></div>
Vous remarquerez que j'ai mit tout de suite dans la balise style l'image de fond. De cette façon, les membres pourront changer les images comme bon leur semble. C'est aussi la raison pour laquelle j'ai mit des balises div et non pas des balises img, car on ne sait jamais la taille des images que vont nous donner les membres. Je redimensionne ici la largeur automatiquement dans le CSS, mais je déteste donner une hauteur et une largeur fixe, qui déformerait alors les images. Je préfère donc mettre une div. C'est donc une préférence personnelle: vous n'êtes pas obligés de faire comme moi.
Maintenant, rajoutons les div qui contiendront nos descriptions physique, mental, l'histoire et les infos (tant RP que joueur). Ce sera le même principe que celui des images: je donne une classe générale à tous mes contenus qui s'appelle justement contenu et une class qui leur est spécifique. Vu que je n'utilise jamais les classes spécifiques aux images ou au contenu seules pour quoi que ce soit, et que j'écris toujours dans CSS leur deux classes (donc par exemple .imag.infos ou .contenu.info et jamais .infos seul) j'ai mit la même classe "spécifique" tant à l'image qu'au contenu correspondant.
J'ai le droit de le faire: une classe n'est pas un id, et donc, n'a pas à être unique! Cependant, faites bien attention de ne PAS spécifier dans le CSS de choses pour els classes communes à des choses qui n'ont rien à voir, mais bien d'utiliser les deux classes qui les décrivent!
Quoiqu'il en soit, voilà tout le HTML maintenant que j'ai ajouté le contenu de chaque onglet:
- Code:
<div class="fiche"><input checked="" name="fiche" id="informations" type="radio" /> <input name="fiche" id="physique" type="radio" /> <input name="fiche" id="caractere" type="radio" /> <input name="fiche" id="histoire" type="radio" /> <input name="fiche" id="ecran" type="radio" /><div class="images">
<div class="imag infos" style="background-image: url('http://38.media.tumblr.com/baa66b83079e0cfb94328d9d721b7acc/tumblr_n8ucrv9CWu1taqwcpo5_500.gif');"></div>
<div class="imag phys" style="background-image: url('http://33.media.tumblr.com/6406227aace1b8d25a5c94c4fae05f04/tumblr_n8ucrv9CWu1taqwcpo6_500.gif');"></div>
<div class="imag car" style="background-image: url('http://33.media.tumblr.com/4cba62a69dc06430c78675a25b783669/tumblr_n8ucrv9CWu1taqwcpo9_500.gif');"></div>
<div class="imag hist" style="background-image: url('http://31.media.tumblr.com/22f282d3778e8ec3811cd6c82fa8977f/tumblr_n8ucrv9CWu1taqwcpo8_400.gif');"></div>
<div class="imag ecr" style="background-image: url('http://media.tumblr.com/tumblr_lnmvmtBDbM1qm00hqo1_500.gif');"></div>
</div>
<h1>Prénom Nome</h1>
<div class="citation">« Une toute petite citation »</div>
<div class="boutons"><label for="informations" class="lab infos">Infos</label> <label for="physique" class="lab phys">Physique</label> <label for="caractere" class="lab car">Caractère</label> <label for="histoire" class="lab hist">Histoire</label> <label for="ecran" class="lab ecr">Derrière l'écran</label> </div>
<div class="interne"><div class="contenu infos">Hello, mon nom c'est [b]Mushu[/b] et je suis la [strike]mascotte[/strike] l'esprit animal de la famille Fa. En gros [b]je suis un peu pauvre[/b] parce qu'on m'oblige à m'occuper des vieux esprits de la famille Fa et c'est hyper chiant. Sinon [b]je suis vraiment très vieux[/b], mais genre, super vieux. Et [b]j'adore les pancakes, Mulan et les blagues pas drôles[/b] et je déteste [b]ce satané [strike]Cricket[/strike], les Huns et le faite que je sois si petit[/b].
Sinon [b]j'ai comme signe particulier le faite que je sois un dragon orange et très petit[/b]. Mon plus grand secret [b]ne vous regarde pas[/b]!</div>
<div class="contenu phys">Ici la description physique. </div>
<div class="contenu car">Ici la description du caractère</div>
<div class="contenu hist"> Ici l'histoire</div>
<div class="contenu ecr">Ici les informations joueurs</div></div>
</div>
Il est à noter que j'ai également deux link de polices de Google Fonts qui sont ajoutées à ma présentation, mais vus devriez les mettre dans votre overall_header. Ces deux polices sont Abel et Lobster.
Le CSS
Maintenant, il est temps de passer au CSS de ma fiche!
Tout d'abord, on va mette en forme la fiche de façon tout à fait normale. Du coup, ça ne tient que du CSS dont vous avez l'habitude et de mettre la fiche en forme comme on veut.
Tout d'abord, on va cacher les input en haut de fiche. On ne veut pas qu'ils apparaissent, parce qu'ils sont un peu moche, mais aussi et surtout parce qu'ils ne sont pas utiles. On a donc ceci:
- Code:
/* On cache les input */
.fiche > input { display: none; }
Ensuite, je crée la fiche. Bords arrondis, un fond, une taille, je la centre. Rien de bien compliqué.
- Code:
/* On met en place la fiche et son image de fond */
.fiche {
position: relative;
width: 500px;
margin: auto;
overflow: hidden;
border-radius: 10px;
background: url('http://image.noelshack.com/fichiers/2015/53/1451484327-img-thing.jpg');
background-size: 150px;
}
Maintenant, je vais aussi mettre en forme tous els "invariants" de la fiche. C'est à dire, tout ce qui ne va pas changer au gré des onglets. Pour moi, c'est le titre et la citation. Je les mets donc en forme:
- Code:
/* Mise en forme du titre de la fiche */
.fiche > h1 {
position: relative;
z-index: 2;
width: 100%;
margin: 0px;
margin-top: -34px;
text-align: center;
font-weight: normal;
font-family: 'Lobster';
font-size: 30px;
color: white;
text-shadow: 1px 1px 1px black;
}
/* Mise en forme de la citation de la fiche */
.fiche .citation {
width: 100%;
padding-bottom: 2px;
background: #BA2F23;
text-align: center;
font-family: 'Abel';
font-size: 15px;
font-style: italic;
line-height: 20px;
color: white;
text-shadow: 1px 1px 1px black;
}
Maintenant, on a les labels (qui sont donc nos titre des onglets), ainsi que le contenu à mettre en forme. Là, ça devient un peu plus corsé, parce qu'on veut que ça change.
Cependant, ce n'est pas si compliqué que cela. En effet, on va mettre en forme simplement comme s'il n'y avait pas d'onglets. Donc on va simplement mettre en forme les différents éléments, comme si on faisait une fiche normale.
Je commence par les images. Je vais donc leur donner des tailles (vu qu'elles sont dans des div), ainsi que de mettre une taille pour l'image de fond. Je les place alors toutes au bon endroit.
Petite subtilité ici: j'ai le conteneur "images" que je emts en relative, simplement parce que je veux créer un effet d'apparition en fondu pour les onglets. Du coup, il faut que toutes mes images ("imag") à l'intérieur aient une position absolue et se trouve au même endroit.
Pourquoi? Eh bien tout simplement parce que je devrais ensuite les mettre en opacité 0, mais que cela ne va pas les "effacer". C'est à dire qu'elles feront toujours la même taille, et donc, resteront à la même "place".
Si vous voulez éviter ceci, et que vous ne souhaitez pas forcément d'effet de fondu, vous pouvez tout simplement utiliser à la place de mes opacity et visibility, un display: none; puis un display: block; pour refaire apparaître.
Notez que cela sera pareil pour mes contenus plus bas.
Pourquoi? Eh bien tout simplement parce que je devrais ensuite les mettre en opacité 0, mais que cela ne va pas les "effacer". C'est à dire qu'elles feront toujours la même taille, et donc, resteront à la même "place".
Si vous voulez éviter ceci, et que vous ne souhaitez pas forcément d'effet de fondu, vous pouvez tout simplement utiliser à la place de mes opacity et visibility, un display: none; puis un display: block; pour refaire apparaître.
Notez que cela sera pareil pour mes contenus plus bas.
Je mets également tout de suite l'opacité à 0 et la visibilité à invisible. En effet, je ne veux faire apparaître mes images que lorsque le bon onglet est sélectionné. Cependant, si vous voulez voir le résultat pour votre fiche avant d'avoir activé les onglets, juste pour voir à quoi ça ressemble, vous pouvez effacer ces deux lignes.
- Code:
/* Mise en place la partie qui contient les images */
.fiche .images {
position: relative;
width: 500px;
height: 220px;
}
/* Mise en place des images. On les cache également de base */
.fiche .images .imag {
position: absolute;
top: 0px;
left: 0px;
width: 500px;
height: 220px;
background-size: 500px;
opacity: 0;
visibility: hidden;
transition: all ease 0.5s;
}
Mettons également les lables, ou les titres d'onglets, en forme. Ici, on les met en forme quand les onglets sont non-sélectionnés, mais aussi lorsqu'on passe la souris sur eux. Je mets également le cursor: pointer; pour que l'on voie que le label est cliquable, et représente donc un onglet.
Avec l'aide de mon conteneur "boutons" je vais aussi faire en sorte que les labels soient bien centrés.
- Code:
/* On met les labels au centre */
.fiche .boutons { text-align: center; }
/* Mise en forme des labels/titre des onglets normal */
.fiche .boutons label {
margin-left: 6px;
margin-right: 6px;
color: white;
font-size: 23px;
font-family: 'Abel';
cursor: pointer;
text-shadow: 1px 1px 1px black;
transition: all ease 0.5s;
}
/* Effet au survol des labels */
.fiche .boutons label:hover {
color: #EAFF05;
transition: all ease 0.5s;
}
À présent, je vais mettre en place et en forme la partie de la contenue de ma fiche. Tout d'abord, vu que je veux un effet d'apparition en fondu, je dois donner une hauteur à mon contenuer "interne" et le mettre en position relative. Les "contenu" devront également avoir une hauteur prédéfinie et un overflow: auto; pour que le texte ne dépasse pas. Comme pour les images, je les mets tout de suite l'opacité à 0 et la visibilité à invisible, vu que je ne veux faire apparaître mon contenu que lorsque le bon onglet est sélectionné.
Si vous n'aimez pas les barres de navigation/scroll pour les longs contenus, vous pouvez très bien supprimer le positionnement absolu des "contenu" et plutôt que d'utiliser opacity: 0; et visibility: hidden;, vous pouvez utiliser display: none;. Vous n'aurez cependant plus d'apparition en fondu.
- Code:
/* On met en place le bloc qui va contenir le contenu de chaque onglet */
.fiche .interne {
position: relative;
width: 90%;
height: 300px;
margin: auto;
border-radius: 10px;
background: white;
box-shadow: 1px 1px 10px grey inset;
font-family: 'Abel';
font-size: 15px;
color: black;
}
/* On met en place et en forme le contenu de chaque onglet */
.fiche .interne .contenu {
position: absolute;
top: 10px;
left: 10px;
width: 90%;
height: 260px;
padding: 10px;
margin: auto;
overflow: auto;
text-align: justify;
opacity: 0;
visibility: hidden;
transition: all ease 0.5s;
}
Enfin, dernière partie de la mise en forme de base: je vais mettre un petit effet sur ce que je mets en gras dans la fiche. Je veux une autre couleur.
- Code:
/* Petit effet sur les b: on change la couleur */
.fiche .interne strong { color: #BA2F23; }
Il est donc temps de modifier selon quel onglet est changé. En fait, c'est très simple à comprendre avec les explications de plus haut. Vu qu'on a bien fait en sorte que les input soient frères aux classes "boutons", "images" et "interne", il suffit pour chaque bon input/onglet (donc ce qu'on a décrit avec une id, qui deviendra donc #informations ) de faire apparaître ou modifier le bon élément.
Ici, vu qu'on a utilisé des classes similaires pour chaque éléments (donc .infos, .phys, .car, .hist et .ecr), on a n'a qu'à changer la classe qui précède. Pour plus de sécurité cependant, j'ai utilisé la "double-classe" comme ceci: .lab.infos. Cependant, au lieu de .fiche #informations:checked ~ .boutons .lab.infos vous auriez pu simplement écrire .fiche #informations:checked ~ .boutons .infos.
Si vous avez décidé d'utiliser le display: none; plutôt que l'opacité et la visibilité, n'oubliez pas ici d'utiliser un display: block; plutôt que le code actuel!
- Code:
/* Fait le changement de style sur les labels sélectionnés */
.fiche #informations:checked ~ .boutons .lab.infos,
.fiche #physique:checked ~ .boutons .lab.phys,
.fiche #caractere:checked ~ .boutons .lab.car,
.fiche #histoire:checked ~ .boutons .lab.hist,
.fiche #ecran:checked ~ .boutons .lab.ecr {
font-family: 'Lobster';
color: #EAFF05;
}
/* Fait apparaitre l'image de l'onglet sélectionné */
.fiche #informations:checked ~ .images .imag.infos,
.fiche #physique:checked ~ .images .imag.phys,
.fiche #caractere:checked ~ .images .imag.car,
.fiche #histoire:checked ~ .images .imag.hist,
.fiche #ecran:checked ~ .images .imag.ecr {
opacity: 1;
visibility: visible;
transition: all ease 0.5s;
}
/* Fait apparaitre le contenu de l'onglet sélectionné */
.fiche #informations:checked ~ .interne .contenu.infos,
.fiche #physique:checked ~ .interne .contenu.phys,
.fiche #caractere:checked ~ .interne .contenu.car,
.fiche #histoire:checked ~ .interne .contenu.hist,
.fiche #ecran:checked ~ .interne .contenu.ecr {
opacity: 1;
visibility: visible;
transition: all ease 0.5s;
}
Voici donc le CSS complet et commenté:
- Code:
/************************************************ FICHE ************************************************/
/* On met en place la fiche et son image de fond */
.fiche {
position: relative;
width: 500px;
margin: auto;
overflow: hidden;
border-radius: 10px;
background: url('http://image.noelshack.com/fichiers/2015/53/1451484327-img-thing.jpg');
background-size: 150px;
}
/* On cache les input */
.fiche > input { display: none; }
/* Mise en place la partie qui contient les images */
.fiche .images {
position: relative;
width: 500px;
height: 220px;
}
/* Mise en place des images. On les cache également de base */
.fiche .images .imag {
position: absolute;
top: 0px;
left: 0px;
width: 500px;
height: 220px;
background-size: 500px;
opacity: 0;
visibility: hidden;
transition: all ease 0.5s;
}
/* Mise en forme du titre de la fiche */
.fiche > h1 {
position: relative;
z-index: 2;
width: 100%;
margin: 0px;
margin-top: -34px;
text-align: center;
font-weight: normal;
font-family: 'Lobster';
font-size: 30px;
color: white;
text-shadow: 1px 1px 1px black;
}
/* Mise en forme de la citation de la fiche */
.fiche .citation {
width: 100%;
padding-bottom: 2px;
background: #BA2F23;
text-align: center;
font-family: 'Abel';
font-size: 15px;
font-style: italic;
line-height: 20px;
color: white;
text-shadow: 1px 1px 1px black;
}
/* On met les labels au centre */
.fiche .boutons { text-align: center; }
/* Mise en forme des labels/titre des onglets normal */
.fiche .boutons label {
margin-left: 6px;
margin-right: 6px;
color: white;
font-size: 23px;
font-family: 'Abel';
cursor: pointer;
text-shadow: 1px 1px 1px black;
transition: all ease 0.5s;
}
/* Effet au survol des labels */
.fiche .boutons label:hover {
color: #EAFF05;
transition: all ease 0.5s;
}
/* On met en place le bloc qui va contenir le contenu de chaque onglet */
.fiche .interne {
position: relative;
width: 90%;
height: 300px;
margin: auto;
border-radius: 10px;
background: white;
box-shadow: 1px 1px 10px grey inset;
font-family: 'Abel';
font-size: 15px;
color: black;
}
/* On met en place et en forme le contenu de chaque onglet */
.fiche .interne .contenu {
position: absolute;
top: 10px;
left: 10px;
width: 90%;
height: 260px;
padding: 10px;
margin: auto;
overflow: auto;
text-align: justify;
opacity: 0;
visibility: hidden;
transition: all ease 0.5s;
}
/* Petit effet sur les b: on change la couleur */
.fiche .interne strong { color: #BA2F23; }
/* Fait le changement de style sur les labels sélectionnés */
.fiche #informations:checked ~ .boutons .lab.infos,
.fiche #physique:checked ~ .boutons .lab.phys,
.fiche #caractere:checked ~ .boutons .lab.car,
.fiche #histoire:checked ~ .boutons .lab.hist,
.fiche #ecran:checked ~ .boutons .lab.ecr {
font-family: 'Lobster';
color: #EAFF05;
}
/* Fait apparaitre l'image de l'onglet sélectionné */
.fiche #informations:checked ~ .images .imag.infos,
.fiche #physique:checked ~ .images .imag.phys,
.fiche #caractere:checked ~ .images .imag.car,
.fiche #histoire:checked ~ .images .imag.hist,
.fiche #ecran:checked ~ .images .imag.ecr {
opacity: 1;
visibility: visible;
transition: all ease 0.5s;
}
/* Fait apparaitre le contenu de l'onglet sélectionné */
.fiche #informations:checked ~ .interne .contenu.infos,
.fiche #physique:checked ~ .interne .contenu.phys,
.fiche #caractere:checked ~ .interne .contenu.car,
.fiche #histoire:checked ~ .interne .contenu.hist,
.fiche #ecran:checked ~ .interne .contenu.ecr {
opacity: 1;
visibility: visible;
transition: all ease 0.5s;
}
Dernière édition par NyoTheNeko le Sam 2 Jan 2016 - 16:40, édité 5 fois
