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

    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



    A-Lice
    FémininAge : 22Messages : 4939

    le Jeu 17 Juil 2014 - 18:10

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

    NyoTheNeko
    FémininAge : 22Messages : 5018

    le Ven 18 Juil 2014 - 5:14

    C'est pas finiiii è_é



    A-Lice
    FémininAge : 22Messages : 4939

    le Ven 18 Juil 2014 - 16:42

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

    NyoTheNeko
    FémininAge : 22Messages : 5018

    le 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
    FémininAge : 53Messages : 240

    le Mer 30 Juil 2014 - 22:17

    Superbe



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

    le Ven 8 Aoû 2014 - 13:37

    MERCI ^^



    Alzufen
    MasculinAge : 21Messages : 2102

    le 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
    FémininAge : 30Messages : 631

    le 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
    FémininAge : 16Messages : 147

    le Ven 19 Sep 2014 - 18:11

    Trop bien!



    NyoTheNeko
    FémininAge : 22Messages : 5018

    le 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
    FémininAge : 27Messages : 174

    le Mer 26 Nov 2014 - 11:25

    Merci beaucoup Very Happy
    Akina-chan
    FémininAge : 23Messages : 137

    le Sam 13 Déc 2014 - 15:29

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

    le 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 !




    Before...:

    mon ange gardien ♥
    Invité

    le Dim 14 Déc 2014 - 16:28

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

    le 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 ? °^°



    Eleania Madena
    FémininAge : 19Messages : 84

    le 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
    FémininAge : 26Messages : 153

    le Mer 11 Fév 2015 - 16:12

    merci beaucoup ^^



    hirondelle
    FémininAge : 27Messages : 134

    le Mer 30 Déc 2015 - 17:10

    Je veux voir <3
    Shoki
    FémininAge : 15Messages : 1274

    le Jeu 31 Déc 2015 - 15:41

    Ooooh merciiii **





    ♪ Extasy ♪
    FémininAge : 26Messages : 102

    le Lun 4 Jan 2016 - 20:29

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

    le Mer 13 Jan 2016 - 15:46

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

    le Mer 13 Jan 2016 - 22:32

    Merci!
    Invité

    le Mer 13 Jan 2016 - 23:07

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

    le Jeu 14 Jan 2016 - 19:49

    Merci beaucoup!
    Contenu sponsorisé

    Aujourd'hui à 13:28


      La date/heure actuelle est Lun 5 Déc 2016 - 13:28