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.


    Profil en hover avec perspective

    Partagez
    avatar
    Alumine
    FémininAge : 21Messages : 488

    le Dim 20 Sep 2015 - 16:01

    Rappel du premier message :

    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://illiweb.com/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
    avatar
    Bryan1997
    MasculinAge : 21Messages : 51

    le Mar 8 Nov 2016 - 20:34

    mici
    avatar
    Safaya
    FémininAge : 21Messages : 23

    le Jeu 17 Nov 2016 - 23:46

    Merci! C'est parfait!
    avatar
    Whisperinette
    FémininAge : 26Messages : 17

    le Sam 24 Déc 2016 - 1:07

    Absolument génial ! Merci beaucoup ! :love: :hug:
    avatar
    Giovale
    MasculinAge : 27Messages : 16

    le Mar 31 Jan 2017 - 23:04

    Merci
    avatar
    Cloudygirl
    FémininAge : 34Messages : 65

    le Jeu 2 Fév 2017 - 6:09

    Merci pour le partage ! =)
    avatar
    Gieve
    FémininAge : 29Messages : 104

    le Lun 6 Fév 2017 - 9:20

    Merci c'est super joli *O*
    avatar
    Utopiste
    FémininAge : 33Messages : 9

    le Mer 8 Fév 2017 - 19:47

    Merci!
    avatar
    Mikasa
    FémininAge : 21Messages : 162

    le Dim 12 Fév 2017 - 0:10

    merci




    Signa:


    avatar
    Crazy-Sweet
    FémininAge : 27Messages : 128

    le Lun 20 Mar 2017 - 9:13

    Merci à toi, j'aime beaucoup !



    What if I need you baby?
    I PROMISE THAT ONE DAY I’LL BE AROUND, I’LL KEEP YOU SAFE ! IT'S SUCH A CRUEL WORLD BUT I FOUND SOMETHING GOOD.. ‘CAUSE IN ALL THIS BITTERNESS YOU STAY SO SWEET ...
    avatar
    Patdrue
    FémininAge : 29Messages : 157

    le Lun 20 Mar 2017 - 9:39

    Merciii
    avatar
    Maiie
    FémininAge : 28Messages : 55

    le Ven 31 Mar 2017 - 15:34

    Merci beaucoup :love:
    avatar
    The A.
    FémininAge : 21Messages : 38

    le Dim 9 Avr 2017 - 20:59

    Merci !




    Jamais contente.
    avatar
    Vito
    MasculinAge : 21Messages : 12

    le Lun 10 Avr 2017 - 13:12

    merci
    avatar
    poussette59
    FémininAge : 33Messages : 158

    le Mer 10 Mai 2017 - 9:57

    a testé voir ce que ça donne
    merci beaucoup
    avatar
    Corkyie
    FémininAge : 21Messages : 75

    le Ven 19 Mai 2017 - 23:18

    merci !
    avatar
    Deveata
    MasculinAge : 22Messages : 23

    le Ven 19 Mai 2017 - 23:26

    Merci
    avatar
    Kamui Kyuuji
    MasculinAge : 26Messages : 30

    le Dim 21 Mai 2017 - 1:17

    Merci.
    avatar
    wally the bully
    MasculinAge : 19Messages : 58

    le Sam 27 Mai 2017 - 4:25

    thanks
    avatar
    Givrix
    MasculinAge : 21Messages : 203

    le Sam 27 Mai 2017 - 17:13

    Merci



    avatar
    Mellusa ~
    FémininAge : 20Messages : 78

    le Ven 23 Juin 2017 - 14:42

    C'est vraiment superbe comme effet ! Merci beaucoup pour le partage ★

    avatar
    YoshinoYuki
    FémininAge : 17Messages : 10

    le Ven 23 Juin 2017 - 21:40

    Merci Wink
    avatar
    Shaolan
    MasculinAge : 27Messages : 107

    le Sam 24 Juin 2017 - 15:12

    merci beaucoup
    avatar
    Xophyas
    MasculinAge : 22Messages : 4

    le Lun 26 Juin 2017 - 19:03

    Je vais essayer
    avatar
    LESIO
    MasculinAge : 21Messages : 10

    le Dim 9 Juil 2017 - 4:12

    Merci
    avatar
    Lutèce
    FémininAge : 21Messages : 24

    le Dim 16 Juil 2017 - 15:59

    Merci !
    Contenu sponsorisé


      La date/heure actuelle est Mar 18 Déc 2018 - 15:53