1 résultat trouvé pour auteur_Praecursator

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 !

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>