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.


1 résultat trouvé pour auteur_Nephilime

Nephilime

Fiche de présentation imagée - Ven 16 Jan 2015 - 20:04



Bonsoir amis n'utopiens !

Je vous présente une fiche de présentation un peu plus sophistiquée que d'ordinaire sans pour autant faire trop lourd à mon sens. Les images de droite transite pour laisser apparaître le texte.

Voici un petit apperçu : initialement puis au survol de d'une image de droite.

Les codes permettant la transition venant d'Okhmhaka (que je remercie vraiment chaleureusement Very Happy ) seul y figure le crédit de NU que vous êtres bien évidemment priés de ne pas retirer.
Les images de droite font 370*185px, celle de gauche fait 178*559px et celle du haut fait 550*112px.


Voici donc la partie CSS à ajouter à la feuille de codage :
Code:
/* ------------------------------- CODES CSS fiches ------------------------------------- */

.bloc_pcp
{
  width: 550px;
  height: 675px;
  margin: auto;
  background-color: #2e2e2c;
  border: 2px solid #202020;
  border-bottom: none;
  color: #101010;
}
.bloc_pcp .entete_pres
{
  width: 550px;
  height: 102px;
  text-align: center;
  padding-top: 10px;
  background: url('http://img15.hostingpics.net/pics/972122Sanstitre.jpg'); /*Image du haut*/
  border-bottom: 2px solid #202020;
 
}
.bloc_pcp .colonne_gauche
{
  width: 172px;
  height: 553px;
  float: left;
  background: url('http://img15.hostingpics.net/pics/887715Sanstitre2.jpg'); /*Image de gauche*/
  padding: 3px;
  border-right: 2px solid #202020;
  border-bottom: 2px solid #202020;
}
.bloc_pcp .colg_text
{
  width: 166px;
  height: 520px;
  overflow: auto;
  overflow-x: hidden
}
.bloc_pcp .police
{
  font-family: Berkshire Swash;
  font-size: 14px;
  letter-spacing: 2px;
}
.bloc_pcp .cate
{
  width: 370px;
  height: 185px;
  overflow: hidden;
  background-color: #a3a3a3;
  border-bottom: 2px solid #202020;
}
.bloc_pcp .cate_img
{
  position: relative;
  z-index: 2;
  width: 370px;
  height: 185px;
  margin-left: 0px;
  -webkit-transition: all ease 2s;
  transition: all ease 2s;
}
.bloc_pcp .cate:hover .cate_img
{
  margin-left: 400px;
  -webkit-transition: all ease 2s;
  transition: all ease 2s;
}
.bloc_pcp .cate_description
{
  position: relative;
  z-index: 1;
  width: 370px;
  height: 185px;
  margin-top: -185px;
  text-align: left;
  font-size: 11px;
  color: #555555;
  padding: 3px;
  overflow: auto;
}

/* ---------------------------- FIN CODES FICHES ------------------------- */



Et la partie HTML à copier dans vos sujets de présentation :
Code:
<link href='http://fonts.googleapis.com/css?family=Berkshire+Swash' rel='stylesheet' type='text/css' />
   <div class="bloc_pcp"><div class="entete_pres"> <br/><span style="font-size: 23px; font-family: Berkshire Swash; letter-spacing: 2px;">[Nom du personnage]</span>

   "citation"</div><div class="colonne_gauche"><div class="colg_text">
   <span class="police">Prénom: </span>


   <span class="police">Nom:</span>


   <span class="police">Date de naissance:</span>


   <span class="police">Clan:</span>


   <span class="police">Rang:</span>


   <span class="police">Arme:</span>


   <span class="police">Signe particulier:</span> </div><a href="http://www.never-utopia.com/" target="_blank"><span style="font-size: 11px;"> |Never Utopia|</span></a></div><div class="cate"><div class="cate_img"><img src="http://img15.hostingpics.net/pics/836909Sanstitre3.jpg" /></div><div class="cate_description"> <br />  <span class="police"> Physique </span>

   texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte</div></div><div class="cate"><div class="cate_img"><img src="http://img15.hostingpics.net/pics/115164Sanstitre4.jpg" /></div><div class="cate_description"> <br />  <span class="police"> Caractère </span>

   texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte</div></div><div class="cate"><div class="cate_img"><img src="http://img15.hostingpics.net/pics/353049Sanstitre5.jpg" /></div><div class="cate_description"><br />  <span class="police"> Histoire </span>

   texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte</div></div>
   </div>


Revenir en haut

La date/heure actuelle est Jeu 28 Mar 2024 - 14:03