AccueilAccueil  CalendrierCalendrier  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  
Messagerie

Partagez | 
 

 CSS fiche présa

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage

avatar

❧ MISSIVES : 386
❧ PIECES D'OR : 5530
❧ AVATAR : Jenna Louise Coleman
❧ CREDITS : Mad Hattress & .soulmates


Mes petits secrets
❧ RUMEURS:
❧ RELATIONS:
❧ AMBITIONS:

MessageSujet: CSS fiche présa   Ven 18 Déc - 22:46

Code:
/********** DÉBUT FICHE PRÉSENTATION **********/
        /* Contour de la fiche de présentation en informations principales */
        .fiche_presa {
          /* Taille et centrage */
          width: 490px;
          margin: auto;
          padding: 10px;
          /* Couleur de fond et ombre */
          background-color:  #221f23;
          box-shadow: 1px 1px 3px: #19171a;
          /* Écriture de base */
          font-size: 10pt;
          color: #6a635f;
          text-align: justify;
          font-family: 'Arial';
        }

        /* Mise ne forme de la citation du haut */
        .citation_haut {
          width: 90%;
          margin: auto;
          padding-bottom: 3px;
          font-size: 8pt;
          font-style: italic;
          text-align: center;
          /* Trait en-dessous */
          border-bottom: 1px solid #6a635f;
        }

        /* Mise en forme de Nom Prénom */
        .fiche_presa h1 {
          background: none;
          font-weight: normal;
          margin: 0;
          width: 100%;
          text-align: center;
          /* Couleur */
          color: #4D5A7B ;
          /* Met tou en minuscule */
          text-transform: lowercase;
          font-family: 'Cinzel';
          font-size: 25pt;
          transition: all ease 1s;
        }

        /* Change la couleur au passage de la souris */
        .fiche_presa h1:hover {
          color: #6a635f;
          transition: all ease 1s;
        }

        /* Mise en forme de la citation sous le nom */
        .citation_principale {
          width: 100%;
          margin-top: -18px;
          text-align: center;
          /* Mit en gras */
          font-weight: bold;
          font-size: 8pt;
        }

        /* Bloc contenant le physique et le mental */
        .physique_et_mental {
          width: 480px;
          height: 350px;
          margin: auto;
          overflow: hidden;
        }

        /* Mise en forme du bloc physique et mental */
        .une_partie {
          position: relative;
          float: left;
          width: 230px;
          height: 250px;
          padding: 5px;
          padding-top: 90px;
        }

        /* Mise en frme et placement du titre */
        .une_partie h2 {
          /* Positionnement */
          position: absolute;
          z-index: 1;
          top: 50px;
          right: 100px;
          background: none;
          font-weight: normal;
          margin: 0;
          width: 130px;
          margin-right: -30px;
          text-align: center;
          /* couleur */
          color:  #51723C;
          font-family: 'Cinzel';
          font-size: 18pt;
          text-shadow: 0px 0px black;
          transition: all ease 1s;
        }

        /* Changement de couleur au passage de la souris */
        .une_partie h2:hover {
          color: #6a635f;
          transition: all ease 1s;
        }

        /* Mise en forme de l'image */
        .une_partie img {
          /* Positionnement */
          position: absolute;
          top: 0;
          right: 0;
          /* Force l'image en 100*100 */
          width: 100px;
          height: 100px;
          border-radius: 50%;
        }

        /* Mise en forme du texte physique et mental */
        .une_partie p {
          margin: 0;
          /* Définit leur taille */
          width: 220px;
          height: 230px;
          padding: 5px;
          text-align: justify;
          overflow: auto;
        }

        /* Mise ne forme de la citation du bas */
        .citation_bas {
          width: 90%;
          margin: auto;
          padding-top: 3px;
          font-size: 8pt;
          font-style: italic;
          text-align: center;
          /* couleur du trait au-dessus */
          border-top: 1px solid #6a635f;
        }

        .copyright {
          font-size: 6pt;
          width: 100%;
          text-align: center;
          color: #6a635f;
        }

.colonneprez {
 width : 220px;
  height : 190px;
  padding : 5px;
  overflow : auto;
}

/* CSS crunched with Crunch - http://crunchapp.net/ */
/* Bloc principal */
.monBloc {
  position: relative;
  overflow: hidden;
  width: 480px;
  height: 200px;
 background-color: #19171a;
          border-radius: 10px;
}
/* Bloc de recouvrement */
.blocVolet {
  position: absolute;
  width: 480px;
  height: 200px;
  border-radius: 10px;
  top: 0;
  left: 0;
  -webkit-transition: all 1s linear;
  -moz-transition: all 1s linear;
  -ms-transition: all 1s linear;
  -o-transition: all 1s linear;
  transition: all 1s linear;
  background: green;
}
/* Changement au survol */
.monBloc:hover > .blocVolet {
  left: 480px;
}

        /********** FIN FICHE PRÉSENTATION **********/
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
 
CSS fiche présa
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Voilà un gars dont ses descendants vont rigoler pour faire sa fiche généalogique
» Amélioration de la saisie (fiche individu)
» fiche des renseignement
» fiche d`assiduité versus bordereau de rétribution.
» Fiche instruction no1......

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Clavis Aurea :: Détritus de la ZA-