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.

-17%
Le deal à ne pas rater :
(Black Friday) Apple watch Apple SE GPS + Cellular 44mm (plusieurs ...
249 € 299 €
Voir le deal

    [Profil] Profil encadré et animé en recto/verso selon le groupe

    Neverose
    Neverose
    FémininAge : 33Messages : 93

    Mer 30 Mai 2018 - 11:48

    Profil encadré et animé en recto/verso selon le groupe



    Bonjour à toutes les bonnes âmes,

    N'étant qu'une bidouilleuse de code, je ne sais même pas si ma demande est réalisable mais, en gros, voici mon projet. Merci par avance pour ceux qui s'y pencheront et apporteront une réponse.

    Je souhaiterais personnaliser le profil des membres avec un cadre animé style carte à jouer.

    Le cadre autour de l'avatar (voir schéma 1) changerait en fonction du rang et doit de préférence être une image (si je peux éviter les border-radius pour répliquer l'image c'est magnifique car je veux rajouter des fioritures et c'est largement plus simple de tout faire sur toshop 8D).

    De plus, je souhaite ajouter au cadre + à l'avatar (comme un tout et non séparément) une animation de carte qui se retourne (transform: rotateY(180deg)) mais que l'image affichée une fois le profil retourné soit différente, comme s'il y avait un recto et un verso... Comme une carte à jouer... Je ne sais pas si je m'exprime bien mais j'ai trouvé ce code pour illustrer mes propos : https://codepen.io/inusara/pen/Cdlfp Je ne sais cependant pas l'adapter à ma demande ._. (une explication serait la bienvenue)

    Evidemment, parce que je suis ultra-relou, le « verso » du profil est aussi une image personnalisée selon le groupe... Et les infos du profil (nombre de messages etc. + feuille de perso) sont disponibles par dessus l'image du verso... Donc image en background je pense.


    Schéma(s) et Eléments


    Schémas :
    Recto du profil
    Spoiler:
    Verso du profil
    Spoiler:
    Tailles des éléments : Le cadre fait 297x460 et l'avatar doit faire 200x400
    Effets voulus : Effet décrit précédemment, une carte qui se retourne avec transform: rotateY(180deg)
    Version de votre forum : PHPBB2 et voici le lien : http://forumtestneverose.forumactif.com/


    Ressources



    Cadre recto
    Spoiler:

    Cadre verso
    Spoiler:


    Autres précisions ?


    Merci BEAUCOUP pour l'aide. Si un élément n'est tout bonnement pas possible à réaliser, tant pis, je m'adapte, désolée pour la demande complexe ^^'

    Si vous allez sur mon forum test, vous retrouverez des éléments de never-utopia. Avant de crier au voleur car j'ai retiré les crédits, sachez que j'ai plus l'habitude de réunir les crédits dans un topic dédié et c'est ce que je ferai si le vrai forum voit le jour.



    Dernière édition par Neverose le Ven 1 Juin 2018 - 14:27, édité 5 fois (Raison : La page était déformée >< Oui je sais sorry, j'ai pas trouvé d'où ça venait é^è)



    [Profil] Profil encadré et animé en recto/verso selon le groupe E9SQItc
    Neverose
    Neverose
    FémininAge : 33Messages : 93

    Ven 1 Juin 2018 - 14:22

    Petit up pour la forme !



    [Profil] Profil encadré et animé en recto/verso selon le groupe E9SQItc
    Neverose
    Neverose
    FémininAge : 33Messages : 93

    Lun 4 Juin 2018 - 18:07

    Upito ~

    Selon le groupe mais ça peut être selon le rang si c'est plus facile, tant pis si on doit attribuer un rang à chaque fois !



    [Profil] Profil encadré et animé en recto/verso selon le groupe E9SQItc
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Lun 4 Juin 2018 - 19:00

    No worry, c'est pas difficile, il suffit de rassembler plusieurs LS déjà faits ensemble Wink

    C'est juste qu'on a pas beaucoup de personnes disponibles en ce moment, alors cela peut prendre un peu de temps ><



    Neverose
    Neverose
    FémininAge : 33Messages : 93

    Mar 5 Juin 2018 - 8:22

    Merci beaucoup pour le rassurage ^^'

    Je fais des expériences (ratées) de mon côté en attendant de l'aide, donc pas de soucis si ça prend un peu de temps. J'ai tenté de combiner des tutos de NU et d'ailleurs mais... Je dois mal le faire ._. J'ai réussi sur mon second forum test (vierge de tout) à appliquer une bordure à l'avatar selon le rang du membre, à mettre une image sur cette bordure et à faire tourner le tout (dès que j'essaye de cacher le profil derrière l'avatar c'est un massacre 8D). Mais quand j'applique sur le forum donné au premier post... Rien ne fonctionne \o/

    Je patienterai et continuerai de faire des trucs en attendant les lumières de quelqu'un qui sait ce qu'il fait *meurt*



    [Profil] Profil encadré et animé en recto/verso selon le groupe E9SQItc
    Awful
    Awful
    MasculinAge : 106Messages : 197

    Mar 5 Juin 2018 - 18:54

    Hey coucou ! o/
    Je veux bien m'occuper de toi.
    Tu as un rang textuel ou une image (ou les deux) ?
    En fait j'ai éhontément recopié le code du codepen que tu as linké, donc j'ai aucun mérite *se flagelle*

    Je n'ai pas d'image différente pour l'exemple mais il est possible de personnaliser selon le rang °°
    Neverose
    Neverose
    FémininAge : 33Messages : 93

    Mer 6 Juin 2018 - 6:58

    OH. GENIALISSIME MERCI *-* (bonjour 8D) je vais pouvoir étudier comment tu as fait pour reprendre ce code en plus héhé

    J'opte plutôt pour un rang textuel mais je ne suis pas seule sur le projet alors au cas où... Il y aura quelque chose à changer si finalement c'est une image ou les deux ?



    [Profil] Profil encadré et animé en recto/verso selon le groupe E9SQItc
    Awful
    Awful
    MasculinAge : 106Messages : 197

    Mer 6 Juin 2018 - 11:56

    Il aurait sûrement fallu changer quelque chose si c'était seulement une image, je pense...
    Enfin tu vas comprendre, je te file les codes :



    Je te laisse tout mettre en place sur ton forum et me dire si ça fonctionne bien.
    Neverose
    Neverose
    FémininAge : 33Messages : 93

    Mer 6 Juin 2018 - 12:34

    C'est par-fait, tout a l'air de très bien fonctionner, plus qu'à me mettre au travail pour faire les différents cadres !

    Merci de m'avoir mâché le travail pour le template et avoir coupé la partie "profil", j'avais effectivement déjà touché au template. J'ai réussi à positionner le code au bon endroit à priori *essuie la sueur de son front*

    En effet, si le rang n'est qu'une image, je vois le problème mais on fera bien sans, c'est magnifique comme ça, pas de soucis ^^

    Encore un très grand merci <3 je mets le sujet en résolu !



    [Profil] Profil encadré et animé en recto/verso selon le groupe E9SQItc
    Awful
    Awful
    MasculinAge : 106Messages : 197

    Mer 6 Juin 2018 - 13:22

    Génial, ravi d'avoir pu t'aider ! c:
    (et oups, je me rends compte que dans mon exemple j'ai laissé l'image du smiley de discord xD M'enfin comme ça tu vois que ça fonctionne !)
    Contenu sponsorisé


      La date/heure actuelle est Dim 24 Nov 2024 - 11:03