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.

-27%
Le deal à ne pas rater :
PC Portable 17” LENOVO Ideapad 3 – 12 Go/512Go – AMD Ryzen 5
399.99 € 549.99 €
Voir le deal
-25%
Le deal à ne pas rater :
-100€ Barre de son Hisense Dolby Atmos 5.1.2
299.99 € 399.99 €
Voir le deal

    Créer des onglets onclick en full CSS3 (ex: fiche de présentation)

    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Jeu 17 Juil 2014 - 14:58



    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" Wink )

    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:
    Code:
    <input name="fiche" id="physique" type="radio" />
    Si dans mon CSS je mets ceci:
    Code:
    #physique:checked ~ label {
    color: white;
    }
    Cela veut dire que quand physique est coché, alors tout label frère sera blanc.

    "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:
    Code:
    <div id="un">
     <div id="deux">
     </div>
    </div>
    Ici, un est l'élément père de deux, et deux est l'élément fils de un.
    Code:
    <div id="un">
    </div>
    <div id="deux">
    </div>
    Ici, un est deux sont des éléments frères.

    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>
    J'ai juste renommé contenu_onglets par interne.

    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.


    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



    A-Lice
    A-Lice
    FémininAge : 30Messages : 4939

    Jeu 17 Juil 2014 - 18:10

    Han c'est de ça que tu me parlais !
    J'vais jeter un oeil (:
    Merci bien !

    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Ven 18 Juil 2014 - 5:14

    C'est pas finiiii è_é



    A-Lice
    A-Lice
    FémininAge : 30Messages : 4939

    Ven 18 Juil 2014 - 16:42

    Bah le en cours n'était pas visible è.é
    Je demanderai à Jade de supprimer mon intervention u_u

    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Ven 18 Juil 2014 - 16:50

    Y'a pas de soucis, c'est pas grave hein ^^ De toute façon, tu verras bien quand j'aurais terminé =P De plus, il me manque plus que le CSS de l'exemple donc si tu n'en a pas besoin pour effectuer le tuto, y'a pas de soucis hein x)
    Pis j'avais plus la place dans le titre en fait j'ai juste mit l'icône xD



    patriciadpt30
    patriciadpt30
    FémininAge : 61Messages : 240

    Mer 30 Juil 2014 - 22:17

    Superbe



    Patricia :)
    shala
    shala
    FémininAge : 32Messages : 213

    Ven 8 Aoû 2014 - 13:37

    MERCI ^^



    Alzufen
    Alzufen
    MasculinAge : 28Messages : 2103

    Mer 10 Sep 2014 - 13:19

    Bien, je poste ici vu que Sparrow a décidé subitement de déplacer l'autre tuto :siffle:

    Du coup, tu as déjà fais le jeu d'onglet comme je le pensais avec ce système, et je trouve ça superbe, ça peut permettre pas mal d'alternative :) Rien ne vaut le JS selon moi, mais faire ça sans target peut être plus sympa si on veut faire en only CSS, car il faut avouer que le target à ses "soucis" (Enfin, cette méthode doit les avoirs aussi Razz)



    Immortal
    Immortal
    FémininAge : 38Messages : 637

    Lun 15 Sep 2014 - 20:09

    Hate de le voir terminé Very Happy Bravo ^^




    Besoin d'avis pour un futur forum multi-univers.
    Promis je suis ouverte aux critiques comme aux solutions
    :love:
    CLICK
    Klemmeria
    Klemmeria
    FémininAge : 24Messages : 147

    Ven 19 Sep 2014 - 18:11

    Trop bien!



    Créer des onglets onclick en full CSS3 (ex: fiche de présentation) Btqy
    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Mar 23 Sep 2014 - 13:30

    Alzufen -> le soucis avec le JS sur FA, c'est que les "onclick" ou "onmouseover" ne sont pas prit en compte... donc le JS ne marcherait pas pour une fiche de présentation ^^

    Il faut cependant noter que le code que je donne ici n'est possible que s'il est "une seule fois" dans le même sujet, à cause des id, donc pour des PV ça va moyen. Je dois encore chercher une alternative, et je verrais si je l'ajoute à la fin ^^

    Désolée pour le temps d'attente pour ce tuto!



    CECILE362
    CECILE362
    FémininAge : 35Messages : 198

    Mer 26 Nov 2014 - 11:25

    Merci beaucoup Very Happy
    Akina-chan
    Akina-chan
    FémininAge : 31Messages : 140

    Sam 13 Déc 2014 - 15:29

    Super idée de tuto <3 Hâte de le voir fini
    Alumine
    Alumine
    FémininAge : 27Messages : 487

    Dim 14 Déc 2014 - 16:20

    Oooh, tout en CSS ! Moi qui n'arrive pas à comprendre le JS je sens que ça va me plaire (=
    Merci !



    Alumine
    Anonymous
    Invité

    Dim 14 Déc 2014 - 16:28

    Merci, j'en cherchais depuis longtemps.
    Nyan-cat
    Nyan-cat
    FémininAge : 25Messages : 326

    Mar 23 Déc 2014 - 6:40

    Coucou copie Japonaise D8 !
    Tu éclaires bien ma lanterne dit-donc, mais il me semblait que c'était déjà possible ? °^°



    Créer des onglets onclick en full CSS3 (ex: fiche de présentation) Nyan_cat_in_portals_by_ds_dna-d56j8yb
    Eleania Madena
    Eleania Madena
    FémininAge : 27Messages : 90

    Ven 30 Jan 2015 - 21:48

    WAAAA je veux apprendre à faire un truc pareil *^*
    C'est dommage qu'on ai pas encore le CSS xD




    Hana Evali
    Hana Evali
    FémininAge : 34Messages : 195

    Mer 11 Fév 2015 - 16:12

    merci beaucoup ^^



    Créer des onglets onclick en full CSS3 (ex: fiche de présentation) Ye49
    hirondelle
    hirondelle
    FémininAge : 35Messages : 134

    Mer 30 Déc 2015 - 17:10

    Je veux voir <3
    Shoki
    Shoki
    FémininAge : 23Messages : 1308

    Jeu 31 Déc 2015 - 15:41

    Ooooh merciiii **




    Créer des onglets onclick en full CSS3 (ex: fiche de présentation) 5qox
    ♪ Extasy ♪
    ♪ Extasy ♪
    FémininAge : 34Messages : 117

    Lun 4 Jan 2016 - 20:29

    Je pense que ce tuto va m'être bien utile !
    Merci pour le partage Very Happy
    Wolund
    Wolund
    MasculinAge : 26Messages : 53

    Mer 13 Jan 2016 - 15:46

    Merci pour l'exemple!
    maloski.
    maloski.
    FémininAge : 25Messages : 29

    Mer 13 Jan 2016 - 22:32

    Merci!
    Anonymous
    Invité

    Mer 13 Jan 2016 - 23:07

    Merci beaucoup pour le tutoriel !
    Pito
    Pito
    MasculinAge : 27Messages : 127

    Jeu 14 Jan 2016 - 19:49

    Merci beaucoup!
    Contenu sponsorisé


      La date/heure actuelle est Mar 15 Oct 2024 - 7:39