Accueil
Atelier #2 - Potasser flexbox et le positionnement
pour @Avalonne
État des lieux
Objectif : Se familiariser avec l'utilisation de flexbox et du positionnement en CSS
Base de travail : Exercice Intermédiaire - Codage de Fiche de présentation
- Demande d'Avalonne:
- Demande d'inscription à un atelier de 'Christapour VotrePseudo
Informations
Quelle est ton expérience en codage ? J'apprends à coder depuis 6 - 7 mois ( 3 mois vraiment sérieusement). Je vais aussi entrer en formation qualifiante pour devenir développeur web ! J'ai déjà codé pour FA mais très peu du fait que je débute, j'ai uniquement fait des fiches de rp !
Quel est ton projet ?Je souhaite affiner mes codes afin de les rendre propre, mais aussi moins lourd ! (PROMIS je retiens mes margins !) En autre j'espère pouvoir optimiser au mieux mes codes et développer une logique qui me permetra d'utiliser les meilleurs balises et options CSS pour ce que je veux faire.On refait ! Je souhaite me perfectionner dans le codage et faire des codages plus juste et affiné ! Mais comme on en discutait, je veux donc me concentrer sur deux notions qui me semblent importante, FlexBox et la Position ! Comme tu m'as dis sur l'exercice j'utilise mal le premier et je ne connais pas du tous les deuxième alors qu'il peut être utile. De ce fait j'aimerai que l'on ce concentre sur ces deux-là !
Même si du coup je commence débutant j'aimerai vraiment progressé dans ses deux domaines, surtout le FlexBox qui devient un incontournable en développement ! Bien évidemment, ça ne sera pas que pour du ForumActif, mais comme je passe beaucoup de temps sur les forums rps, ça ne me gêne pas d'apprendre l'utilisation pour les deux forums s'il y a une grosse différence !
Quelles sont les bases que tu estimes avoir déjà acquises pour atteindre ton objectif ? Pour le coup c'est difficile à dire, je pense avoir compris comment bien utiliser les balises de base :
- Code:
<div>/<p>/<img> etc
Je pense connaître le CSS de mise en page assez correctement ! (Je sais même ajouter de la police depuis Google c'est pas beau ?)
Quelles sont tes disponibilités ? Je serais disponible tous les jours jusqu'au 5 Aout, puis seulement le soir après le 5 Aout !
Est-ce que tu peux lire l'anglais ? Je suis ne suis pas très bon mais je me débrouille pour ! ( Ca reste important pour le codage)
Qu'est-ce qui te motive pour t'inscrire à mon atelier ? Je veux m'améliorer car je compte en faire mon métier et donc avoir quelqu'un qui peut juger est très bien et j'apprécie beaucoup ton franc parlé ! J'ai aussi vu que tu semblais connaître assez bien le CSS/HTML donc je préfère allez avec toi du fait qu'on a eu quelques discussions et que c'est plutôt agréable de discuter avec toi ! Tu sembles aussi répondre au question sans t'énerver ( Ce qui est tout aussi agréable).
As tu des créations personnelles que tu as envie de me montrer ? Tu en as déjà vu quelques un de mes codages ! Je pourrais aussi te montrer des codes de fiche que j'ai fait !
Est-ce qu'il y a des choses dont tu voudrais m'informer à l'avance ? Il est possible que suivant comment va se dérouler ma formation, que je sois un peu plus long à répondre mais je te préviendrais quand ça sera long ! Merci en tout cas !
Pour commencer
Nous y voici donc, @Avalonne ^^
Comme indiqué précédemment, je souhaite que mes ateliers aient un objectif bien déterminé, du coup nous allons travailler sur le codage de cette fiche, en procédant étape par étape.
Avant toute chose, quelques tutoriels sur les notions qui t'échappent encore :
Pour flexbox, nous avons le tutoriel de Batty, un peu vieux mais toujours utile. Nous avons bien sûr l'article du MDN sur flexbox et enfin, ma bible personnelle, le guide de flexbox de CSS Tricks (en anglais) Pour le positionnement, nous avons ce tutoriel Epicode de ManuManu, puis, encore une fois, l'article du MDN sur le positionnement. Je suis aussi tombée sur ce site qui n'a pas l'air tout récent mais a l'air bien expliqué.Si tu as déjà des questions sur les notions qui sont abordées dans ces tutoriels, il va falloir les éclaircir (notamment le concept de flux je pense ?)
Avant de coder quoi que ce soit, il faut te rappeler qu'il n'y a pas une seule et unique solution pour obtenir un résultat. Nous allons nous concentrer sur la mise en pratique de flexbox et du positionnement ici, et du coup je vais probablement t'aiguiller dans une direction plutôt qu'une autre, mais quand tu auras plus d'expérience, tu découvriras certainement d'autres façons d'obtenir des résultats similaires. Certaines plus lourdes, d'autres plus légères. L'important, c'est que tu saches que ces outils existent, et avec la pratique tu finiras par savoir quel outil utiliser dans quelle situation.
Du coup, commençons par le début : est-ce que tu as des questions particulières concernant flex et/ou le positionnement relatif et absolu ?
Et si tu n'as pas de questions, lâche ton logiciel de code et regarde la maquette de l'exercice. Selon toi, quels éléments de la fiche utiliseront flex, et quels éléments utiliseront du positionnement absolu/relatif ?
_______________
![[Atelier de 'Christa #2] Potasser flexbox et le positionnement - Avalonne 14n2](https://zupimages.net/up/21/30/14n2.png)
![[Atelier de 'Christa #2] Potasser flexbox et le positionnement - Avalonne Rwns](https://zupimages.net/up/21/30/rwns.png)
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
![[Atelier de 'Christa #2] Potasser flexbox et le positionnement - Avalonne 7WZJTfh](https://i.imgur.com/7WZJTfh.png)
Coucou !
J'ai lu les tutoriels, le Flex j'ai cru comprendre 2 - 3 choses en plus, le positionnement il va me falloir un peu plus de temps je pense, mais du coup j'ai un peu essayé d'appliquer à la fiche et voilà ce que ça donne :
Il y aura beaucoup de flex / bloc. Pour moi on peut diviser le code en plusieurs conteneurs comme ça.
Pour le conteneur orange, il est possible à mes yeux de faire ça avec : flex-between et flex-wrap
Je ne vois pas trop ou le position intervient, le seul endroit est peut-être pour le demi-cercle jaune au-dessus du cadre "derrière" mais je ne suis pas très sur, car il me semble quand CSS on peut faire des demi-cercle et le remplir en background jaune et il suffit donc de coller les deux blocs ensemble en flex aussi.![[Atelier de 'Christa #2] Potasser flexbox et le positionnement - Avalonne 2979024130](/users/1416/13/16/78/smiles/2979024130.gif)
_______
Pour le concept de flux, j'ai cru comprendre que c'était le comportement de base de la balise suivant son type Inline ou Bloc par rapport au reste et que Position permet de modifier ce flux/comportement pour modifier ce comportement ( On appelle ça sortir du Flux).
Et pour le moment j'ai encore du mal à visualiser l'intérêt propre de position relatif et absolue. Car Flex-Box permet aussi de faire cela non ?
J'ai lu les tutoriels, le Flex j'ai cru comprendre 2 - 3 choses en plus, le positionnement il va me falloir un peu plus de temps je pense, mais du coup j'ai un peu essayé d'appliquer à la fiche et voilà ce que ça donne :
Il y aura beaucoup de flex / bloc. Pour moi on peut diviser le code en plusieurs conteneurs comme ça.
Pour le conteneur orange, il est possible à mes yeux de faire ça avec : flex-between et flex-wrap
Je ne vois pas trop ou le position intervient, le seul endroit est peut-être pour le demi-cercle jaune au-dessus du cadre "derrière" mais je ne suis pas très sur, car il me semble quand CSS on peut faire des demi-cercle et le remplir en background jaune et il suffit donc de coller les deux blocs ensemble en flex aussi.
_______
Pour le concept de flux, j'ai cru comprendre que c'était le comportement de base de la balise suivant son type Inline ou Bloc par rapport au reste et que Position permet de modifier ce flux/comportement pour modifier ce comportement ( On appelle ça sortir du Flux).
Et pour le moment j'ai encore du mal à visualiser l'intérêt propre de position relatif et absolue. Car Flex-Box permet aussi de faire cela non ?
_______________
Salut Avalonne ^^
Alors tu as la gâchette un peu facile pour flexbox XD
Flexbox est à utiliser lorsque tu veux mettre des blocs côte à côte de façon flexible. C'est plus propre et... flexible, justement, que les anciennes méthodes (qui utilisaient soit les balises de tableau
C'est flexible dans le sens "pas dépendant d'une largeur fixée", "facile à réorganiser" mais également dans le sens "responsive" (adaptable à la largeur de l'écran).
Avec les tableaux, ce n'était pas du tout responsive, pas du tout sémantique, et bien sûr pas facile à réorganiser sans revoir tout le code.
Avec les flottants, comme ils sortent du flux, il fallait créer des marges artificielles pour leur laisser la place, et prévoir également la place verticale (ou savoir utiliser les clearfix). Pas du tout responsive ni facile à modifier.
Avec le positionnement absolu et relatif, la position est statique et calculée au pixel près, tu ne peux pas "dépasser", et ce n'est pas flexible non plus, et réagencer le tout nécessite de revoir le CSS et de faire des calculs savants au pixel près.
La solution encore valide à ce jour serait
Revenons en à flexbox. Quand tu donnes à un élément la valeur d'affichage flex avec
- La colonne avec l'avatar d'un côté, et la première partie de la fiche de l'autre côté
- La zone qui contient tous les champs de texte "âge", etc.
- Les deux colonnes mental et physique.
Ce qui nous fait trois usages seulement de
Enfin, en ce qui concerne le positionnement absolu et relatif, on s'en sert souvent pour les infobulles, et je sais que ce n'était pas évident sur la maquette, mais en fait elle est conçue pour qu'il y ait un avatar sur la colonne de gauche, qui révèle ce qui se cache en dessous au survol. Ce qui implique de la superposition de blocs, ce que l'on fait traditionnellement avec du positionnement absolu et relatif.
(Il y a d'autres éléments pour lesquels on peut utiliser flexbox et le positionnement, mais je parle surtout des plus importants)
D'où le schéma suivant (en hide du coup) :
Est-ce que tu as des questions jusqu'ici ?
Pour t'entrainer un peu, sans regarder le code source, qu'est-ce qui dans le profil d'un message sur epicode est affiché avec flexbox et qu'est ce qui est en positionnement absolu/relatif ? (en comptant l'affichage du statut online XD)
Alors tu as la gâchette un peu facile pour flexbox XD
Flexbox est à utiliser lorsque tu veux mettre des blocs côte à côte de façon flexible. C'est plus propre et... flexible, justement, que les anciennes méthodes (qui utilisaient soit les balises de tableau
<table> & co, soit les flottants avec float, soit le positionnement absolu et relatif, soit encore la déclaration display:inline-block;) C'est flexible dans le sens "pas dépendant d'une largeur fixée", "facile à réorganiser" mais également dans le sens "responsive" (adaptable à la largeur de l'écran).
Avec les tableaux, ce n'était pas du tout responsive, pas du tout sémantique, et bien sûr pas facile à réorganiser sans revoir tout le code.
Avec les flottants, comme ils sortent du flux, il fallait créer des marges artificielles pour leur laisser la place, et prévoir également la place verticale (ou savoir utiliser les clearfix). Pas du tout responsive ni facile à modifier.
Avec le positionnement absolu et relatif, la position est statique et calculée au pixel près, tu ne peux pas "dépasser", et ce n'est pas flexible non plus, et réagencer le tout nécessite de revoir le CSS et de faire des calculs savants au pixel près.
La solution encore valide à ce jour serait
inline-block, mais techniquement flexbox dispose de plus d'outils pour un agencement plus harmonieux.Revenons en à flexbox. Quand tu donnes à un élément la valeur d'affichage flex avec
display:flex, alors les enfants directs de cet élément seront affichés de façon flexible, par défaut côte à côte. Utiliser flexbox pour afficher des éléments en colonne n'est pas spécialement utile quand tu peux juste mettre un bloc en dessous d'un autre. Si on regarde ce schéma, on peut voir qu'il y a trois groupes d'éléments qui sont affichés côte à côte : - La colonne avec l'avatar d'un côté, et la première partie de la fiche de l'autre côté
- La zone qui contient tous les champs de texte "âge", etc.
- Les deux colonnes mental et physique.
Ce qui nous fait trois usages seulement de
display:flex;.Enfin, en ce qui concerne le positionnement absolu et relatif, on s'en sert souvent pour les infobulles, et je sais que ce n'était pas évident sur la maquette, mais en fait elle est conçue pour qu'il y ait un avatar sur la colonne de gauche, qui révèle ce qui se cache en dessous au survol. Ce qui implique de la superposition de blocs, ce que l'on fait traditionnellement avec du positionnement absolu et relatif.
(Il y a d'autres éléments pour lesquels on peut utiliser flexbox et le positionnement, mais je parle surtout des plus importants)
D'où le schéma suivant (en hide du coup) :
Est-ce que tu as des questions jusqu'ici ?
Pour t'entrainer un peu, sans regarder le code source, qu'est-ce qui dans le profil d'un message sur epicode est affiché avec flexbox et qu'est ce qui est en positionnement absolu/relatif ? (en comptant l'affichage du statut online XD)
_______________
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
Donc FlexBox est vraiment utile que pour organiser les blocs entre eux et seulement quand il ne s'agit pas de colonne qui par défaut s'empile entre eux ?
Il sera utile aussi pour l'agencement en colonnes, mais disons que dans ce cas bien précis, ce n'est pas utile, donc tu peux t'en passer. C'est pour ça que je t'ai dit ailleurs que c'est important de savoir à quoi sert tel outil, et dans quel cas l'utiliser. Vois le codage comme un puzzle qui se résout en utilisant les outils à ta disposition. Ta solution n'est pas mauvaise, mais elle est un peu excessive quand on peut faire plus léger :) Avec le temps et l'expérience, tu sauras doser, pour le moment tu en est encore en mode "est ce que je mets une pincée de sel ou tout le sachet ?" XD
Du coup le positionnement est utilisé quand un bloc n'a pas vocation à changer ou s'adapter, donc on le fixe dans un endroit précis ?
Exactement ! Vois ça comme si tu collais un post-it quelque part, par dessus autre chose. C'est positionné par rapport à quelque chose. On utilise le positionnement relatif pour avoir un bloc de référence, et le positionnement absolu pour fixer le bloc suivant "par rapport à un parent positionné".
Dans les faits, pour ce qui est du profil d'épicode (encore en hide donc, comme ça si je repose la question à quelqu'un d'autre il verra pas la réponse XD) :
Non, c'est juste quelque chose que tu peux estimer avec un peu d'observation, mais sans certitude.Y a t'il un moyen au visuel de savoir si c'est flex ou Position qui est utilisé ?
Par exemple les champs de profil, tout le monde n'a pas tous ses champs de remplis, ça veut dire que leur nombre varie selon le profil, ça veut dire que le rendu va changer. Ça colle pas du tout avec un affichage positionné qui est beaucoup plus rigide.
Par contre, pour le titre et l'avatar qui sont affichés avec flex (côte à côte) c'était pas du tout évident à voir, parce qu'il y a plusieurs façons d'obtenir ce résultat, et comme c'est moi qui ai codé ce profil, j'ai choisi flex XD
Après, c'est souvent une question de préférence personnelle et de facilité d'utilisation. Flex n'est pas toujours simple à utiliser, donc certains préfèreront d'autres solutions. Comme cet atelier est focus sur flex, on va considérer que c'est la solution à privilégier même si d'autres sont possibles, sans pour autant en abuser.
Pour afficher le code
comme ça, j'utilise la balise <code> </code>, mais ça implique de savoir utiliser < pour < et > pour > (sinon forumactif va interpréter le code au moment de l'affichage du message, forcément. D'ailleurs je suis obligée d'utiliser & pour afficher les & sans qu'ils soient automatiquement interprétés XD)Pour la suite, on va commencer à coder, petit bout par petit bout. Commence par écrire le code correspondant à l'affichage des champs "âge" et compagnie (en bleu sur mon schéma). Il y a plusieurs façons d'obtenir ce résultat, mais comme c'est destiné à une fiche utilisable sur forum, il faut que le code soit aussi simple que possible pour qu'un débutant puisse s'en servir. (Bon, ce dernier aspect rajoute une difficulté qui n'a rien à voir avec le sujet de l'atelier, mais je suppose que ça te conviendra XD)
_______________
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
Hello Avalonne !
Alors c'est un effort honorable, mais je n'avais demandé que la zone entourée en bleu dans ma version du schéma, sans le titre, et sans essayer de reproduire la fiche tout de suite ^^ Justement parce que tu as tendance à vouloir mettre des flex partout, je veux te voir les utiliser seulement aux endroits pertinents. Mais pour la question de ne pas réussir à centrer les éléments, c'est probablement à cause de la marge automatique à droite XD
Du coup, recommence ! #'ChristaEstTyrannique
- Je ne veux voir que les champs de texte, rien de plus
- A la rigueur tu peux temporairement mettre le tout dans un bloc "test" pour avoir une largeur fixée
- Ce n'est pas le sujet de l'atelier, mais tu abuses des classes, plutôt qu'utiliser
- Ce n'est pas la première fois que je te le dis (de la répétition nait la connaissance), mais tu n'as pas besoin d'écrire à chaque fois
Voilà voilà :)
Alors c'est un effort honorable, mais je n'avais demandé que la zone entourée en bleu dans ma version du schéma, sans le titre, et sans essayer de reproduire la fiche tout de suite ^^ Justement parce que tu as tendance à vouloir mettre des flex partout, je veux te voir les utiliser seulement aux endroits pertinents. Mais pour la question de ne pas réussir à centrer les éléments, c'est probablement à cause de la marge automatique à droite XD
Du coup, recommence ! #'ChristaEstTyrannique
- Je ne veux voir que les champs de texte, rien de plus
- A la rigueur tu peux temporairement mettre le tout dans un bloc "test" pour avoir une largeur fixée
- Ce n'est pas le sujet de l'atelier, mais tu abuses des classes, plutôt qu'utiliser
.listeinfosexochrista pour chaque champ, ce qui est un peu lourd (tes noms de classes sont longuets d'ailleurs lol, en plus du fait que tu ne devrais pas y mettre d'accents - quoique, il parait que ça passe maintenant ?), un simple sélecteur de descendant .informationpersonnellexochrista > div { ... } marcherait tout aussi bien. Et j'aurais utilisé des <span>, personnellement, il y a une raison pour laquelle tu as privilégié des blocs à des éléments inline ?- Ce n'est pas la première fois que je te le dis (de la répétition nait la connaissance), mais tu n'as pas besoin d'écrire à chaque fois
flex-direction:row parce que c'est la direction par défaut quoi qu'il arrive.Voilà voilà :)
_______________
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
Alors oui, je veux juste voir ce que tu codes pour le seul bloc des champs âge & co.
- Normalement même si le parent est en colonne, ça n'impacte pas les éléments de l'enfant, donc c'était probablement un souci de marges.
- Pour les
- Normalement même si le parent est en colonne, ça n'impacte pas les éléments de l'enfant, donc c'était probablement un souci de marges.
- Pour les
<span>, je ne vois pas pourquoi ça ne marche pas (je viens de tester c'est exactement le même rendu). Après, ce n'est pas bien grave, c'est juste que sémantiquement ça fait un chouia plus de sens.Alors, généralement les unités em c'est très bien pour le texte. De mon côté, j'utilise souvent les unités rem pour les marges internes et externes. Effectivement, les unités flexibles sont plus intéressantes quand c'est possible, mais commençons déjà par t'exorciser de cette habitude de mettre des largeurs fixes partout XDUne autre question me vient en tête, je sais qu'on parle souvent de PX, mais c'est vrai qu'on m'a aussi dit d'utiliser l'unité em qui pouvait être plus cool car plus adapté suivant l'écran, tu en penses quoi personnellement ?
_______________
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
Hello @Avalonne !
C'est parfait, c'est ce que je voulais voir ^^ Tu peux sauter des lignes entre les différents span en principe, même dans un message les
Garde donc ce bout de code sous le coude. On le réutilisera à la fin.
L'étape suivante, maintenant, c'est de coder la partie qui concerne le mental et le physique (le cadre violet sur mon schéma). A première vue, c'est simple, nous avons deux colonnes. Mais vu qu'il y a l'avatar sur le côté, il y a fort à parier que le contenu ces deux blocs doit être déroulant verticalement. Je vois plusieurs solutions possibles, à toi de voir ce que tu as envie de faire. Au boulot, petit padawan /o/
C'est parfait, c'est ce que je voulais voir ^^ Tu peux sauter des lignes entre les différents span en principe, même dans un message les
<br> seront "ignorés" grâce à flexbox. Il n'y a que la largeur et la hauteur "auto" que tu peux retirer (vu que de toute façon "auto" est la valeur par défaut XD) et pouf, tu vois, ton code est devenu super simple :)Garde donc ce bout de code sous le coude. On le réutilisera à la fin.
L'étape suivante, maintenant, c'est de coder la partie qui concerne le mental et le physique (le cadre violet sur mon schéma). A première vue, c'est simple, nous avons deux colonnes. Mais vu qu'il y a l'avatar sur le côté, il y a fort à parier que le contenu ces deux blocs doit être déroulant verticalement. Je vois plusieurs solutions possibles, à toi de voir ce que tu as envie de faire. Au boulot, petit padawan /o/
_______________
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
Voilà ! Comme promis voici la suite :
Mais du coup comme j'ai utilisé le H2 il entre en conflit avec celui du forum
Du coup dans le rendu j'ai remplacé H2 par H4
Mais du coup comme j'ai utilisé le H2 il entre en conflit avec celui du forum
Du coup dans le rendu j'ai remplacé H2 par H4_______________
Hello !
Pour éviter le conflit avec un code existant, il faut utiliser le principe de cascade (et spécificité) en CSS, et du coup écrire ton CSS comme ceci :
Petite suggestion, tu devrais remplacer la police que tu as prise pour le texte par une version qui n'est pas en majuscules par défaut (pour des raisons de lisibilité du texte). Je propose Lexend qui ressemble un peu à Century Gothic.
Pour le reste, ton code donne l'idée. Ma version avait juste séparé le titre du contenu déroulant.
Je te laisse revoir les éléments que j'ai mentionnés à ta guise, pour la suite il va falloir s'attaquer à cette première colonne avec l'avatar. C'est un gros morceau, parce que le demi-cercle en haut est un peu relou à gérer. Ne te stresse pas trop dessus parce que ce n'est pas le but principal de l'atelier, concentre toi sur l'effet au survol de l'avatar (ça donne ça sur ma version).
- Il faut que l'avatar soit visible par défaut. Le bloc qui le contient sera positionné en relatif.
- Il faut que le texte, lui, soit caché par défaut. Le bloc qui le contient est positionné en absolu, de manière à ce qu'il soit pile poil par dessus l'avatar.
- Lorsque le curseur survole l'avatar, il faut que le texte "caché par défaut" fasse son apparition
- L'avatar doit être légèrement visible derrière par transparence, mais sans nuire à la lisibilité du tout.
Est-ce que tu as besoin d'indications/explications supplémentaires pour t'attaquer à cette partie ou bien tu penses pouvoir y arriver ?
Pour éviter le conflit avec un code existant, il faut utiliser le principe de cascade (et spécificité) en CSS, et du coup écrire ton CSS comme ceci :
- Code:
.descriptionphysiquechrista h2 {
/* le CSS qui "surcharge" les propriétés par défaut de la balise h2 */
}
all (voir la doc MDN) pour remettre toutes les propriétés à zéro d'un coup et ne pas avoir de problèmes (en sachant que cette propriété n'est pas supportée par tous les navigateurs, mais le site Can I Use a l'air d'indiquer qu'elle est supportée à 95% ce qui est pas mal)Petite suggestion, tu devrais remplacer la police que tu as prise pour le texte par une version qui n'est pas en majuscules par défaut (pour des raisons de lisibilité du texte). Je propose Lexend qui ressemble un peu à Century Gothic.
Pour le reste, ton code donne l'idée. Ma version avait juste séparé le titre du contenu déroulant.
Je te laisse revoir les éléments que j'ai mentionnés à ta guise, pour la suite il va falloir s'attaquer à cette première colonne avec l'avatar. C'est un gros morceau, parce que le demi-cercle en haut est un peu relou à gérer. Ne te stresse pas trop dessus parce que ce n'est pas le but principal de l'atelier, concentre toi sur l'effet au survol de l'avatar (ça donne ça sur ma version).
- Il faut que l'avatar soit visible par défaut. Le bloc qui le contient sera positionné en relatif.
- Il faut que le texte, lui, soit caché par défaut. Le bloc qui le contient est positionné en absolu, de manière à ce qu'il soit pile poil par dessus l'avatar.
- Lorsque le curseur survole l'avatar, il faut que le texte "caché par défaut" fasse son apparition
- L'avatar doit être légèrement visible derrière par transparence, mais sans nuire à la lisibilité du tout.
Est-ce que tu as besoin d'indications/explications supplémentaires pour t'attaquer à cette partie ou bien tu penses pouvoir y arriver ?
_______________
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
Yep, en effet, qui dit effet de survol dit usage du pseudo-élément
:hover ^^_______________
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
Toujours en vie @Avalonne ? Entre ta disparition du discord et le fait que tu ne t'es plus connecté sur le forum depuis le 26 juillet dernier, et que j'ai déjà dit que je ne courrais pas après mes élèves, on a dépassé les deux semaines sans nouvelles, donc ton atelier est suspendu jusqu'à nouvel ordre.
_______________
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
Bon bah... Atelier fermé XD
_______________
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
