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

-24%
Le deal à ne pas rater :
Promo sur APPLE Airpods 2 avec boitier de charge
136 € 179 €
Voir le deal

    Profil en hover avec perspective

    Alumine
    Alumine
    FémininAge : 23Messages : 488

    le Dim 20 Sep 2015 - 16:01

    Profil en hover avec perspective





    Hello all ! Bon bah voilà, encore un profil, avec une petite transition cool et les infos à l'intérieur sur des petites bandes... bref.

       
    PHPBB2 - Template et CSS - taille de l'avatar adaptable - Aperçu - Aperçu à l'ouverture



    Et un autre aperçu, pour la transition...





    Template


    Ok, dans le panneau d'admin > affichage > templates > général > viewtopic-body, cherchez ceci (vers la ligne 139)
    Code:
    <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
     <span class="name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
     <span class="postdetails poster-profile">
     {postrow.displayed.POSTER_RANK}<br />
     {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
     <!-- BEGIN profile_field -->
     {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
     <!-- END profile_field -->
     {postrow.displayed.POSTER_RPG}
     </span><br />
     <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
     </td>

    Supprimez, et remplacez par ça :
    Code:
    <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150" style="position:relative;display:block; min-height:320px;">
      <span class="name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
      <div class="profil">
            <div class="infos">
              {postrow.displayed.POSTER_AVATAR}
              <div>
                <!-- BEGIN profile_field -->
                {postrow.displayed.profile_field.LABEL} <span class="infosrep">{postrow.displayed.profile_field.CONTENT}</span>{postrow.displayed.profile_field.SEPARATOR}
                <!-- END profile_field -->
              </div>
            </div>
            <div class="avatarflip">
              <div style="backface-visibility:hidden;">{postrow.displayed.POSTER_AVATAR}</div>
              <div>{postrow.displayed.RANK_IMAGE}</div>
            </div>
      </div>
    </td>


    Là, sur la première ligne vous trouverez ça:
    Code:
    min-height:320px;
    Vous pouvez adapter cette hauteur en fonction de la hauteur des avatars de votre forum; il s'agit de la hauteur minimum d'un message (si le message est plus petit que l'avatar, les avatars des différents messages vont se chevaucher, ce qui serait fâcheux...)



    CSS

    Ensuite validez, publiez le template, puis rendez vous dans affichage > couleurs > feuille de style CSS, et ajoutez ceci à votre code:

    Code:

    /*PROFIL par Alu pour NEVER-UTOPIA **********************************/
    .profil{
      width:180px;/*largeur avatar*/
      height:288px;/*hauteur avatar*/
      -moz-perspective:800px;
      -webkit-perspective:800px;
      -moz-perspective-origin:50px 150px;
      -webkit-perspective-origin:50px 150px;
      perspective-origin:50px 150px;
      perspective:800px;
      position:absolute;
      top:30px;
      left:-100px;
      z-index:2;
      -moz-transform: rotate(-5deg);/*avatar penché*/
      -ms-transform: rotate(-5deg);
      -webkit-transform: rotate(-5deg);
      transform: rotate(-5deg);
    }
    .profil img{width:100%;}
    .avatarflip{
      width:100%;
      height:auto;
      -webkit-transform-origin:top left;
      transform-origin:top left;
      -moz-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      -webkit-transform: rotateY(0deg);
      transform:rotateY(0deg);
      -ms-transition:all 1s ease;
      transition:all 1s ease;
      -moz-transform-style:preserve-3d;
      -webkit-transform-style:preserve-3d;
      -ms-transform-style:preserve-3d;
      transform-style:preserve-3d;
    }

    .avatarflip div{position:absolute; width:100%; -webkit-backface-visibility:hidden; backface-visibility:hidden;overflow:hidden;}
    .avatarflip div:last-child{
      -ms-transform:rotateY(-180deg);
      -moz-transform:rotateY(-180deg);
      -webkit-transform:rotateY(-180deg);
      transform:rotateY(-180deg);
    }
    .profil:hover .avatarflip{
      -ms-transform:rotateY(-180deg);
      -moz-transform:rotateY(-180deg);
      -webkit-transform:rotateY(-180deg);
      transform:rotateY(-180deg);
      -ms-transform-origin:left top;
      -webkit-transform-origin:left top;
      transform-origin:left top;}

    .infos{
      position:absolute;
      width:100%;
      text-align:center;
      font-size:0.8vw;
      box-shadow:2px 2px 5px rgba(0, 0, 0, 0.3); /*ombre sous le profil*/
    }
    .infos div{position:absolute;top:0;left:0;width:100%; height:100%;overflow:hidden;}
    .infos .label{visibility:hidden;}
    .infos .label span, .infosrep {
      visibility:visible;
      display:block;
      background-color:rgba(256, 256, 256, 0.4);/*couleur des bandes des infos, le 0.4 correspond à lopacité*/
      color:#303030 !important;/*couleur du texte dans les infos*/
      margin: -5px 0 0 0;
      padding:3px;
    }
    .infos .label span {text-decoration:underline; text-transform:uppercase;margin: 5px 0 -5px 0;}
    .infosrep img{width:auto;}


    A priori vous ne devriez pas avoir besoin de modifier autre chose que les lignes commentées... Enregistrez, et tout devrait fonctionner !


    Merci de laisser un crédit à N-U quelque part sur votre forum !

    Si vous avez des problèmes avec ce LS, venez poster ici.
    Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^


    Dernière édition par Alumine le Lun 21 Sep 2015 - 21:18, édité 1 fois



    Alumine
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5227

    le Dim 20 Sep 2015 - 19:52

    Sympaaa, on voit pas très souvent des transform 3d sur FA .

    Merci pour ton partage Alu (^-^)

    Spoiler:
    Si je peux me permettre un petit conseil, ça serait rajouté un overflow hidden à la div autour de l'avatar, pour éviter qu'il dépasse éventuellement si le membre se trompe de format :3

    Au passage, pourquoi le backface-visibility en hidden :o ? Ca risque pas de créer des bugs >< ? Sur Chrome ça me donne ça. C'était pour jouer avec les rangs ensuite, je suppose ?

    J'ai un peu de mal avec ce sélecteur là o:
    Code:
    .profil:hover .avatarflip, profil:hover .avatarflip .div
    profil:hover .avatarflip .div → il y a comme un petit problème, je crois que c'est un ancien code non enlevé XD

    Allez, je m'en vais avec mes remarques embêtantes, ton LS est vraiment sympa :)

    Kelalin
    Kelalin
    FémininAge : 28Messages : 2419

    le Dim 20 Sep 2015 - 22:37

    Merci (*≧▽≦)
    TiGraou
    TiGraou
    MasculinAge : 27Messages : 243

    le Lun 21 Sep 2015 - 15:14

    Merci :p
    Alumine
    Alumine
    FémininAge : 23Messages : 488

    le Lun 21 Sep 2015 - 21:17

    Coucou Nihil ! merci pour tes remarques... effectivement c'est le rang qui doit se trouver là !
    Et bien vu pour le reste, je m'en occupe illico presto (=



    Alumine
    Sid'
    Sid'
    MasculinAge : 30Messages : 73

    le Mar 22 Sep 2015 - 12:50

    Merci ! \o/
    Sweet Angel
    Sweet Angel
    FémininAge : 38Messages : 153

    le Jeu 1 Oct 2015 - 13:04

    Merci beaucoup
    GuillaumeBETA
    GuillaumeBETA
    MasculinAge : 24Messages : 17

    le Mer 16 Déc 2015 - 21:16

    Merci !
    Angie Harkness
    Angie Harkness
    FémininAge : 37Messages : 725

    le Sam 26 Déc 2015 - 10:00

    Punaise *-* trop bien j'adore!! Merciiiiiiii
    didicmy
    didicmy
    FémininAge : 29Messages : 72

    le Dim 17 Jan 2016 - 23:37

    Super Merci Very Happy
    layna
    layna
    FémininAge : 28Messages : 68

    le Jeu 4 Fév 2016 - 0:42

    sublime
    LittleChan
    LittleChan
    FémininAge : 30Messages : 62

    le Mar 23 Fév 2016 - 3:01

    Thanks Wink



    Profil en hover avec perspective 34ex18y
    Kynoha
    Kynoha
    MasculinAge : 23Messages : 35

    le Sam 5 Mar 2016 - 19:49

    Très bien trouvé, j'adore ton style.
    Millaby
    Millaby
    FémininAge : 25Messages : 44

    le Jeu 10 Mar 2016 - 13:35

    Merci beaucoup pour ce partage superbe !
    Bunny Lune
    Bunny Lune
    FémininAge : 31Messages : 145

    le Ven 11 Mar 2016 - 12:19

    Merci pour le partage.
    Kame-Chan
    Kame-Chan
    FémininAge : 29Messages : 53

    le Jeu 17 Mar 2016 - 22:08

    merci beaucoup pour ce code
    Rebekaah
    Rebekaah
    FémininAge : 26Messages : 51

    le Sam 19 Mar 2016 - 15:43

    Merci !
    Sounik
    Sounik
    MasculinAge : 21Messages : 17

    le Sam 19 Mar 2016 - 16:02

    Merci beaucoup cheers
    JaydenRcr
    JaydenRcr
    MasculinAge : 21Messages : 32

    le Lun 21 Mar 2016 - 13:13

    Merci ! :)
    Coco-Lapin02
    Coco-Lapin02
    MasculinAge : 52Messages : 167

    le Mar 22 Mar 2016 - 1:34

    Merci beaucoup pour ce partage superbe !
    Voltino
    Voltino
    MasculinAge : 26Messages : 55

    le Jeu 24 Mar 2016 - 14:21

    Woooow !!! Merci
    rosebleudu10
    rosebleudu10
    FémininAge : 30Messages : 189

    le Jeu 24 Mar 2016 - 15:43

    merci beaucoup
    Katia Akane
    Katia Akane
    FémininAge : 30Messages : 37

    le Lun 28 Mar 2016 - 16:08

    C'est superbe ! Merci.
    Tyarra
    Tyarra
    FémininAge : 20Messages : 73

    le Lun 28 Mar 2016 - 19:50

    Wouah ! super original, j'adore**



    Profil en hover avec perspective 64385520JR
    P'tit loup
    P'tit loup
    MasculinAge : 38Messages : 449

    le Ven 8 Avr 2016 - 18:51

    merci ^^



    Profil en hover avec perspective 30xivrd
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Jan 2021 - 13:11