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.

Le Deal du moment : -25%
-100€ Barre de son Hisense Dolby Atmos 5.1.2
Voir le deal
299.99 €

    Fiche de Présentation à 2 Onglets, Simple mais Efficace !

    Praecursator
    Praecursator
    MasculinAge : 22Messages : 77

    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:

    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>
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    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 ^^



    Mymyy
    Mymyy
    FémininAge : 25Messages : 55

    Mer 31 Mai 2017 - 18:59

    Merci !
    Anonymous
    Invité

    Mer 31 Mai 2017 - 22:43

    Merci pour le partage !
    Illeanëlia
    Illeanëlia
    FémininAge : 38Messages : 404

    Sam 25 Mai 2019 - 20:09

    très joli fiche merci
    harry235
    harry235
    MasculinAge : 25Messages : 9

    Mer 3 Juin 2020 - 2:53

    Merci beaucoup
    Contenu sponsorisé


      La date/heure actuelle est Dim 13 Oct 2024 - 11:51