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.


    Fiche de RP faux profil Vieux journal

    Partagez
    Ehawee
    FémininAge : 24Messages : 4512

    le Jeu 11 Aoû 2016 - 22:00



    Souquez les artimuses, compagnons ! (Comment ça "ça veut rien dire"? Tsss !) Voici un "nouvelle" (ancienne) que j'avais oublié de poster ici !  cheers

    Utilisée, la fiche ressemble à ceci.

    Vous pouvez découvrir des informations sur le personnage au survol de l'avatar, et des petits secrets se cachent au survol des polaroïds à droite du nom de personnage. Tout est entièrement personnalisé grâce à des images, mais rien ne vous empêche de grapher d'autres choses à la place :3

    - le fond est une texture se répétant (texture par défaut)
    - l'avatar est de format 200x320 pixels
    - le rang est une image de 230x359 pixels (rang 1 par défaut || Rang 2 par défaut)

    Vous pouvez allègrement utiliser cette fiche avec ce tutoriel d'Okhm' ^^

    Laissez bien en place le crédit, merci <3


    Aperçu : 1


    CSS

    Code:
    /*FICHE PROFIL FICHE PROFIL FICHE PROFIL*/

    .clfond {
      margin: auto;
      min-height: 900px;
      width: 700px;
      background: url(http://nsa38.casimages.com/img/2015/12/05/151205055353545008.png) repeat;
      border: 1px dotted #78501D;
      box-shadow: 0px 0px 5px black;
      position: relative;
      overflow: hidden;
    }

    .clele1 {
      width: 516px;
      height: 454px;
      background: url(http://nsa37.casimages.com/img/2015/12/05/151205055338724074.png);
      position: absolute;
      top: -88px;
      left: 5px;
    }

    .clavatar {
      width: 200px;
      height: 320px;
      position: absolute;
      top: 132px;
      left: 20px;
    }

    .clele2 {
      width: 292px;
      height: 514px;
      background: url(http://nsa37.casimages.com/img/2015/12/05/151205060525252027.png);
      position: absolute;
      top: 103px;
    }

    .clfauxava {
      width: 200px;
      height: 320px;
      position: relative;
      top: 132px;
      left: 20px;
    }

    .clfauxava .clfauxprofil {
      width: 200px;
      height: 320px;
      background-color: rgba(240,229,206, 0.8);
      opacity: 0;
      -webkit-transition: 1s;
      transition: 1s;
    }

    .clfauxava:hover .clfauxprofil {
      opacity: 1;
      -webkit-transition: 1s;
      transition: 1s;
    }

    .clfauxava .clfauxprofil span {
      display: block;
      width: 100%: height: 10px;
      text-align: center;
      border-bottom: 1px dotted #78501D;
      color: #B80800;
      font-variant: small-caps;
      font-family: 'Gentium Book Basic', serif;
      padding-top: 2px;
      font-size: 12px;
    }

    .clfauxava .clfauxprofil span em {
      font-style: normal;
      color: #000000
    }

    .clname {
      background-color: rgba(240,229,206, 0.8);
      width: 182px;
      height: 20px;
      position: absolute;
      top: 526px;
      padding: 10px;
      font-family: 'Kaushan Script', cursive;
      text-align: center;
      font-size: 14px;
    }

    .clprofil {
      width: 79px;
      height: 99px;
      position: absolute;
      left: 179px;
      top: 496px;
      z-index: 999;
    }

    .clprofil div {
      position: absolute;
      top: 50px;
      left: 50px;
      width: 200px;
      height: 100px;
      background-color: rgba(240,229,206, 1);
      border: 1px dotted #78501D;
      box-shadow: 0px 0px 5px black;
      padding: 10px;
      color: black;
      opacity: 0;
      visibility: hidden;
      -webkit-transition: 1s;
      transition: 1s;
    }

    .clprofil div span {
      display: block;
      width: 100%: height: 10px;
      text-align: center;
      border-bottom: 1px dotted #78501D;
      color: #B80800;
      font-variant: small-caps;
      font-family: 'Gentium Book Basic', serif;
      padding-top: 2px;
      font-size: 12px;
    }

    .clprofil:hover div span em {
      font-style: normal;
      color: #000000
    }

    .clprofil:hover div span a{
      font-style: normal;
      color: #000000;
      font-weight: bold;
      text-decoration: none;
      -webkit-transition: 1s;
      transition: 1s;
    }

    .clprofil:hover div span a{
      color: black;  
      text-decoration: none;
      -webkit-transition: 1s;
      transition: 1s;
    }

    .clprofil:hover div {
      opacity: 1;
      visibility: visible;
      z-index: 999;
      -webkit-transition: 1s;
      transition: 1s;
    }

    .clrang {
      width: 296px;
      height: 359px;
      position: absolute;
      left: 36px;
      top: 528px;
    }

    .cltitre {
      width: 431px;
      height: 216px;
      position: absolute;
      left: 265px;
      top: 130px;
      background: url(http://nsa38.casimages.com/img/2015/12/06/151206060744311160.png);
      z-index: 1;
    }

    .cltitre span {
      color: #F0E5CE;
      display: block;
      padding-top: 105px;
      padding-left: 50px;
      font-family: 'Kaushan Script', cursive;
      font-size: 14px;
      font-variant: small-caps;
    }

    .clcontenu {
      width: 380px;
      min-height: 500px;
      padding: 10px;
      text-align: justify;
      background-color: rgba(240,229,206, 0.8);
      margin-left: 265px;
      margin-top: -70px;
      font-family: 'Gentium Book Basic', serif;
      font-size: 12px;
      color: black;
    }

    .clcontenu strong {
      display: block;
      width: 55%;
      text-align: center;
      font-family: 'Kaushan Script', cursive;
      font-weight: normal;
      margin-left: 30px;
      font-size: 20px;
      color: #78501D;
    }


    .clcontenu span {
      width: 90%;
      text-align: justify;
      font-style: italic;
      display: block;
    }

    .clcontenu em {
      font-style: normal;
      display: block;
      width: 80%;
      padding-left: 15px;
      padding-right: 15px;
      border-left: 1px dotted #78501D;
      font-family: 'Kaushan Script', cursive;
      color: #B80800;
    }

    .clfond a {
      display: block;
      text-align: center;
      text-decoration: none;
      font-variant: small-caps;
      color: #78501D!important;
    }


    HTML annoté (laissez-vous guider par les indications en lettres capitales)
    Code:
    <link href="https://fonts.googleapis.com/css?family=Gentium+Book+Basic|Kaushan+Script" rel="stylesheet" /><div class="clfond"><div class="clele1"></div><div class="clavatar" style="background-image: url(AVATAR 200x320)"></div><div class="clele2"></div><div class="clfauxava"><div class="clfauxprofil"><span><em>QUESTION</em> : REPONSE</span><span><em>QUESTION</em> : REPONSE</span><span><em>QUESTION</em> : REPONSE</span><span><em>QUESTION</em> : REPONSE</span><span><em>QUESTION</em> : REPONSE</span></div></div><div class="clname">NOM DU PERSONNAGE</div><div class="clprofil"><img src="http://nsa38.casimages.com/img/2015/12/06/151206060742246502.png" title="à survoler"/><div><span><em>Petit Secret</em> : REPONSE</span><span><em>Fiche personnage</em> : <a href="">Lien</a></span></div></div><div class="clrang"><img src="IMAGE DE RANG (en transparence, 250x359px)" title="NOM DU RANG"/></div><div class="cltitre"><span>Quoque exultans tuto ad super.</span></div><div class="clcontenu">
    <strong>COURTE CITATION</strong>
    <span>RPG ACTIONS DE VOTRE PERSONNAGE ENTRE BALISES SPAN</span><em>DIALOGUE ENTRE BALISES EM</em><span>A NOUVEAU ACTION ENTRE BALISES SPAN</span></div><a href="http://www.never-utopia.com/" class⁼"clcopy">Fiche par Ehawee pour Never-Utopia</a></div>


    Dernière édition par Ehawee le Sam 13 Aoû 2016 - 14:18, édité 1 fois





    gif1gif2
    Okhmhaka
    FémininAge : 31Messages : 31717

    le Ven 12 Aoû 2016 - 22:50

    C'est super classe !
    Tu parles de moi mais t'as fait de sacrés progrès toi aussi ! Razz



    Onyx
    FémininAge : 23Messages : 2596

    le Dim 18 Sep 2016 - 6:09

    C'est super ! Merci du partage !

    Juste deux petites modififications et ce sera bon pour être classé.

    Edit 2016-10-03 : N'ayant pas eu de retour, j'ai fait les modifications. Du coup, je valide.

    Edit 2016-10-14 : C'est définitivement une ancienne fiche, pas une nouvelle, tu l'avais déjà mis en Ls en décembre 2015 XD Bah, c'est pas grave, j'ai archivé l'autre et je l'ai remplacé par celle-là XD



    Tink ♥
    FémininAge : 24Messages : 45

    le Sam 5 Nov 2016 - 15:55

    Ca fait super sympa :) un peu en mode criminel mdr
    En ligne
    Kelalin
    FémininAge : 24Messages : 1403

    le Sam 5 Nov 2016 - 23:54

    Merci pour le partage !
    Kiwix
    FémininAge : 21Messages : 66

    le Jeu 10 Nov 2016 - 23:27

    Cette fiche est absolument superbe !
    Je me demandais s'il était possible en tant que fiche de journal tout court ?Et surtout puis)je modifier un peu les couleurs ? Je la trouve top top top comme ça sinon !
    Merci beaucoup du partage Very Happy
    Contenu sponsorisé

    Aujourd'hui à 21:08


      La date/heure actuelle est Mer 7 Déc 2016 - 21:08