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 Présentation à 2 Onglets, Simple mais Efficace !

    Partagez
    avatar
    Praecursator
    MasculinAge : 14Messages : 77

    le Ven 11 Nov 2016 - 4:42



    Bonjour !

    Aujourd'hui je vous présente mon premier code ! C'est une petite fiche avec divers transitions pour rajouter des effets stylés.

    Vous trouverez une fiche en deux onglets en hover, lorsque votre souris est sur les onglets le contenu apparait !

    Bon je vous laisse avec l'aperçu !
    Aperçu:
    Nom du Personnage
    RPG
    IRL
    TEXTE 1
    TEXTE 2
    TEXTE 3
    TEXTE 4
    Texte 5
    Onyx, Nin, Prae, Élu et Chroma
    TEXTE 1
    TEXTE 2
    TEXTE 3
    Onyx, Prae, Nin, Élu et Chroma

    Voici le code !

    À mettre dans le CSS :
    Code:
    .Encadrement{
      margin: auto;
      width: 806px;
      background-image: url('');
      position: relative;
      border-radius : 5px;
      border: solid 4px black;
      z-index: 1;
      transition-property: height;
      transition-duration: 0.5s;
      -webkit-transition-property: height;
      -webkit-transition-duration: 0.5s;
      position: relative;
    }
    .prez_title {
        width: 400px;
        height: 140px;
        line-height: 140px;
        vertical-align: middle;
        text-decoration: none;
        text-align: center;
        color: black;
        font-weight: lighter;
        font-family: 'Times';
        color: black;
        margin: 0;
        padding: 0;
        text-align: center;
        font-size: 30px;
    }
    .info_rpg,
    .info_irl {
        width: 806px;
        overflow: hidden;
        max-height: 0px;
        transition: 1s;
        -webkit-transition: 1s;
        }
    .RPG:hover ~ .info_rpg,
    .info_rpg:hover,
    .IRL:hover ~ .info_irl,
    .info_irl:hover {
        max-height: 1220px;
    }
    .prez_section {
        background-color: #d2d2d2;
        margin: auto;
        margin-top: 10px;
        border: solid 2px;
        font-size: 18px;
        overflow: auto;
    }

    .RPG {
      width: 401px;
      height: 140px;
      float: left;
      opacity: 1;
      font-size: 30px;
      border-bottom: solid 2px;
      border-right: solid 2px;
      background: url('https://i97.servimg.com/u/f97/19/32/17/74/bloggi10.jpg');
    }

    .RPG:hover {
      background : #d2d2d2;
    }

    .IRL{
      width: 403px;
      height: 140px;
      float: left;
      font-size: 30px;
      opacity: 1;
      border-bottom: solid 2px;
      background-image: url('http://p3.storage.canalblog.com/38/40/284584/88026921_o.jpg');
      text-align: center;
    }

    .IRL:hover{
      background: #d2d2d2;
    }

    .Credit{
    margin-top: 15px;
    font-size: 8px;
    text-align: right;
    padding-right: 5px;
    padding-bottom: 5px;
    }

    .NomPersonnage{
    margin: auto;
    width: 805px;
    text-align: center;
    font-size: 40px;
    position: relative;
    z-index: 26;
    color: #191970;
    font-family: 'Slabo 27px', serif;
    transition-property: letter-spacing;
    transition-duration: 1s;
    }

    .NomPersonnage:hover{
    letter-spacing: 3px; 
    }

    Partie html à poster dans les messages :
    Code:
    <link href="https://fonts.googleapis.com/css?family=Slabo+27px" rel="stylesheet" /><div class="NomPersonnage"><i>NOM DU PERSONNAGE</i></div><div class="Encadrement"><div class="RPG"><div class="prez_title">RPG</div></div><div class="IRL"><div class="prez_title">IRL</div></div><div  style="clear: both;"></div><div class="info_rpg"><div style="margin-bottom: 15px;"></div><div class="prez_section" style="height: 300px; width: 780px;">TEXTE 1</div><div class="prez_section" style="height: 300px; width: 500px; float: left; margin-left: 10px;">TEXTE 2</div><div class="prez_section" style="height: 300px; width: 268px; float: left; margin-left: 10px;">TEXTE 3</div><div style="clear: both; margin-bottom: 10px;"></div><div class="prez_section" style="height: 180px; width: 780px;">TEXTE 4</div><div class="prez_section" style="height: 190px; width: 780px;">TEXTE 5</div><div class="Credit">Onyx, Nin, Prae, Élu et Chroma</div></div><div class="info_irl"><div style="margin-bottom: 15px;"></div><div class="prez_section" style="height: 550px; width: 780px;">TEXTE 1</div><div class="prez_section" style="height: 300px; width: 780px;">TEXTE 2</div><div class="prez_section" style="height: 130px; width: 780px;">TEXTE 3</div><div class="Credit"><a href="http://www.never-utopia.com/">Onyx, Prae</a>, Nin, Élu et Chroma</div></div></div>
    avatar
    Onyx
    FémininAge : 23Messages : 2920

    le Mer 21 Déc 2016 - 5:54

    Salut!

    J'ai remplacé le code par celui qui est séparé en CSS et HTML pour une meilleure utilisation. C'est tout ok, donc je valide et le sujet sera déplacé sous peu!

    Merci du partage ^^



    avatar
    Mymyy
    FémininAge : 17Messages : 29

    le Mer 31 Mai 2017 - 18:59

    Merci !
    avatar
    Kelalin
    FémininAge : 24Messages : 1506

    le Mer 31 Mai 2017 - 22:43

    Merci pour le partage !
    Contenu sponsorisé


      La date/heure actuelle est Sam 24 Juin 2017 - 5:36