AccueilFAQRechercherMembresGroupesS'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.


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

    Partagez
    NyoTheNeko
    FémininAge : 22Messages : 5018

    le Jeu 17 Juil 2014 - 14:58

    Rappel du premier message :

    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 ▬ Code mit sous hide & explications en claire


    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.


    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!

    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:


    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.

    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:


    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. POour 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.

    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.


    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.

    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!



    Voici donc le CSS complet et commenté:


    Dernière édition par NyoTheNeko le Sam 2 Jan 2016 - 16:40, édité 5 fois



    VincentWeever
    MasculinAge : 19Messages : 44

    le Ven 15 Jan 2016 - 16:03

    Merci
    DeadlyRuby
    FémininAge : 17Messages : 38

    le Dim 17 Jan 2016 - 17:30

    Merci. ♪



    Nessaleth
    FémininAge : 25Messages : 52

    le Dim 17 Jan 2016 - 18:58

    Génial, merci !!! Very Happy
    Katia Akane
    FémininAge : 26Messages : 36

    le Lun 18 Jan 2016 - 16:55

    Exactement ce que je cherchais merci !
    Afterglow.winter
    FémininAge : 21Messages : 134

    le Mar 19 Jan 2016 - 12:33

    Je pense que c'est tout a fait ce que je recherche



    How do you get up from an all time low?
    elfyqchan
    FémininAge : 20Messages : 46

    le Sam 30 Jan 2016 - 1:10

    merci ! ^^



    Anviree
    FémininAge : 19Messages : 48

    le Jeu 4 Fév 2016 - 14:32

    Merci !
    Wanted
    FémininAge : 21Messages : 112

    le Ven 5 Fév 2016 - 5:26

    Merci beaucoup pour le partage ! :friends:
    Estyriale
    FémininAge : 15Messages : 11

    le Jeu 11 Fév 2016 - 13:24

    Merci !
    Lady Doll
    FémininAge : 27Messages : 101

    le Jeu 11 Fév 2016 - 20:05

    merci ^^
    Ylkhana
    FémininAge : 23Messages : 290

    le Ven 26 Fév 2016 - 22:30

    Hyper nice, merci !
    Gahia
    FémininAge : 28Messages : 44

    le Sam 27 Fév 2016 - 14:11

    Merci ^^
    Kimberlay *
    FémininAge : 26Messages : 158

    le Mar 1 Mar 2016 - 20:41

    Merci Very Happy
    Ssinn
    FémininAge : 24Messages : 33

    le Sam 12 Mar 2016 - 9:11

    Merci!!
    lavila
    FémininAge : 28Messages : 23

    le Dim 20 Mar 2016 - 5:57

    Merci du partage ~
    Aki'
    FémininAge : 20Messages : 250

    le Lun 21 Mar 2016 - 12:19

    Merci
    TiGraou
    MasculinAge : 23Messages : 141

    le Lun 21 Mar 2016 - 14:56

    Merci
    Misery Mind™
    FémininAge : 25Messages : 149

    le Lun 21 Mar 2016 - 20:40

    merci !
    Kami-Chan
    FémininAge : 16Messages : 12

    le Dim 3 Avr 2016 - 3:13

    YAY! Merci very much #p#
    Ciàran
    FémininAge : 26Messages : 182

    le Mer 13 Avr 2016 - 11:46

    merci :)
    Youp
    FémininAge : 21Messages : 498

    le Sam 16 Avr 2016 - 18:01

    J'aimerais voir s'il te please ! ^^



    Encrine
    FémininAge : 18Messages : 42

    le Lun 9 Mai 2016 - 23:15

    Merciiii !
    pépito1989
    FémininAge : 27Messages : 9

    le Ven 13 Mai 2016 - 3:19

    Merci :)
    karadoc
    MasculinAge : 46Messages : 28

    le Jeu 19 Mai 2016 - 23:33

    Ce tuto m'intéresse pour un projet de formulaire... Je vais regarder à ça avec attention. Merci
    ghost.writer
    FémininAge : 21Messages : 27

    le Mar 24 Mai 2016 - 20:46

    merci beaucoup :face:
    j'suis curieuse de voir le résultat surtout xD



    uc
    Contenu sponsorisé

    Aujourd'hui à 11:11


      La date/heure actuelle est Mar 6 Déc 2016 - 11:11