Liscialle E. Balshilek Sujet: 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 **********/ |
| |