AccueilAccueil  S'enregistrerS'enregistrer  ConnexionConnexion  


 

Partagez | 
 

 CSS retro 80

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


Bienvenue en Enfer
avatar

Admin
לּ Psychopathic Devil לּ

Un peu plus sur moi

Date d'inscription : 11/04/2010
Messages : 378

Localisation : ssdssff
Pièces de Pouvoir d'Hadès :




Feuille de personnage
Alignement: ¤¤¤
Niveau: ¤¤¤
Journal Intime:



MessageSujet: CSS retro 80   Sam 4 Juin - 20:32

CSS Retro 80

Code:
.bodylinewidth{
width: 800px!important;
margin-top:-9px;
margin-bottom:-9px;
}

.code{
  max-width: 500px;
}

a:link{text-decoration:none!important;}

/*INFOBULLE*/
a.infobulle {
  position: relative;
}

a.infobulle span {
  display: none; /* ceci masque l'infobulle */

}
a.infobulle:hover {
  background: none; /* correction d'un bug IE */
  z-index: 999; /* on définit une valeur pour l'ordre d'affichage */

}
a.infobulle:hover span {
  display: inline; /* ceci affiche l'infobulle */
  position: absolute;

  white-space: wrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */

  top: -10px; /* on positionne notre infobulle */
  left: 40px;

  background:  #e5e5e5; /* arrière-plan de l'infobulle */
 
  color: grey; /* texte dans l'infobulle */
  font-size: 10px;
  font-variant: normal;
  text-align: justify;
  text-transform: none;
  text-decoration: none;
  padding: 4px;
  width: auto;
  height: auto;

  /* bordures de votre infobulle*/
  border-radius: 10px;}

.bodyline{
 /* -moz-box-shadow:1px 1px 10px #200f11;
  -webkit-box-shadow:1px 1px 10px #200f11;
  box-shadow:1px 1px 10px #200f11;*/
  padding: 0px;
  /*background: ;*/
}

/*Redimensionnement des gif dans le profil automatique*/
.postdetails.poster-profile img {
  max-width:208px;
  display:block;
}

/**** CODAGE DES FICHES ****/
.info2{
  color: #a67b67;
  font-size: 12px;
}

/* fiche pv */
.cadre_vous{
 background:lightgrey;
 width:480px;
 height:auto;
 padding: 10px;
 text-align: justify;
   color: #312f34;
}

.dispo_pv2{
  letter-spacing:4px;
  font-size: 10px;
  text-align: center;  
  background-color: lightgrey;  
  width: 450px;
}

.lien_pv2{
  background: #808080;
  width: 490px;
  height: 100px;
  padding: 5px;
  position: relative;
}

.lien_pv2 img{
  position: absolute;
  left: 5px;
  top: 5px;
}

.lien_pv2_description{
  position: absolute;
  left: 110px;
  top: 5px;
  height: 100px;
  overflow: auto;
  color: #312f34;
  text-align: justify;
}

/* ---Fiche présentation --- */
.image_presa{
  width: 500px;
  -webkit-border-bottom-left-radius: 250px;
  -webkit-border-bottom-right-radius: 250px;
  -moz-border-radius-bottomleft: 250px;
  -moz-border-radius-bottomright: 250px;
  border-bottom-left-radius: 250px;
  border-bottom-right-radius: 250px;
}

.nom_prenom_fiche{
  font-family: 'Satisfy', cursive;
  color: black;
  font-size: 40px;
  text-shadow: 1px 1px 2px #474747;
  line-height: -50px;
}

.feat{
  text-align: center;
  font-size: 10px;
  color: grey;
  background: lightgrey;
}

.trait_cara{
  color: grey;
  font-size: 10px;
  width: 400px;
  font-style : italic;
}

.cadre_info{
  background: lightgrey;
  width: 450px;
  padding: 5px;
  color: grey;
  text-align: justify;
}

.info{
  color: purple;
  font-size: 12px;
}

.icons_fiche{
  width: 100px;
}

.titre_partie_fiche{
  font-family: 'Waiting for the Sunrise', cursive;
  font-size: 40px;
}

.grand_cadre_question{
  background: lightgrey;
  text-align: justify;
  color: grey;
  padding-left:30px;
  padding-right:30px;
  padding-top:10px;
  padding-bottom: 10px;
}

.question{
  color: black;
  font-weight: bold;
}

.credit{
  color: lightgrey;
  font-size: 10px;
}

/* --- Fiche basique --- */
.image_haut{
  width: 500px;
  -webkit-border-top-left-radius: 250px;
  -webkit-border-top-right-radius: 250px;
  -moz-border-radius-topleft: 250px;
  -moz-border-radius-topright: 250px;
  border-top-left-radius: 250px;
  border-top-right-radius: 250px;
}

.fond_fiche{
  width: 500px;
  background: white;
}

.titre_fiche{
  font-family: 'Satisfy', cursive;
  color: black;
  font-size: 70px;
  background: grey;
  text-shadow: 1px 1px 2px #474747;
}

.texte_fiche{
  text-align: justify;
  color: grey;
  padding-left:30px;
  padding-right:30px;
}

.credit_fiche{
  color: lightgrey;
  font-size: 10px;
}

/* Fiche autre*/
.titlefiche{
  font-family: 'Satisfy', cursive;
  color: black;
  font-size: 70px;
  background: grey;
  text-shadow: 1px 1px 2px #474747;
  }

.textelibre{
  text-align: justify;
  color: grey;
  padding-left:30px;
  padding-right:30px;
   }

.imagebas{
  width: 500px;
  -webkit-border-bottom-left-radius: 250px;
  -webkit-border-bottom-right-radius: 250px;
  -moz-border-radius-bottomleft: 250px;
  -moz-border-radius-bottomright: 250px;
  border-bottom-left-radius: 250px;
  border-bottom-right-radius: 250px;
   }
  
  

/* --------------------------------- QEEL --------------------------------- */

.transparent .row1 {
background-color: transparent;
}
.transparent .gensmall {
font-size:12px;
overflow: auto;
height: 150px!important;
display: block;
}

#qeel_position {
position: relative;
margin:auto;
  background: #454bbd ;
  width: 750px;
  height: 390px;
}

#qeel_titre {
background-image:url(http://img11.hostingpics.net/pics/323766qeel.png);
width : 750px;
height: 158px;
text-align: center;
margin-left: auto;
margin-right: auto;
}

.qeel_colonne1 {
font-size: 12px;
text-align: justify;
width: 255px;
height: 345px;
padding:10px;
}

.qeel_centre {
background:transparent;
}

.qeel_colonne2 {
width: 255px;
height: 345px;
padding:10px;
text-align:center;
font-size:12px;
}

.qeel_bloc1{
width: 670px;
padding:20px;
background:#6273c7;
overflow:auto;
position: absolute;
top : 20px;
left: 20px;
font-size: 11px;
}

.qeel_bloc2{
width: 200px;
padding:10px;
height: 190px;
background:#6273c7;
overflow:auto;
position: absolute;
top : 160px;
left: 20px;
  font-size: 11px;
  text-align: justify
}

.qeel_bloc3{
width: 200px;
padding-left: 10px;
padding-right: 10px;
height: 210px;
background:#6273c7;
overflow:auto !important;
text-align: justify;
position: absolute;
overflow: auto;
top: 160px;
right: 20px;
font-size: 11px!important;
}

.top_partenaires{
  font-size: 15px;
  color: #fff;
  font-family: "Kaushan Script",cursive;
  text-align: center;
}

.blocpa {
  width: 220px;
  padding:10px;
  height: 190px;
  background:#6273c7;
  position: absolute;
  left : 265px;
  top: 160px;
}

.img-zoom {
    width: 50px; /*largeur image réduite*/

    /* Effet de transition du changement de valeur */
    -moz-transition: width 1s linear;
    -o-transition: width 1s linear;
    -webkit-transition: width 1s linear;
    transition: width 1s linear;
}

.img-zoom:hover {
    width: 100px; /*largeur image agrandie*/
}

a.lien_qeel{
  text-transform: lowercase;
  font-size: 10px;
  color: #e785ef;
}

a.lien_qeel:hover{
  color: #fff;
}

.qeel_groupe {
position: relative;
overflow: visible;
display: inline;
margin-left: 38px;
  left: 70px;

}

.name_gp{
  font-family: "Kaushan Script",cursive;
  font-size: 15px;
}

.qeel_groupe1 {
position: relative;
height: 60px;
width: 60px;
border-radius:100px;
overflow: visible;
margin:auto;
background-image: url(http://www.damaged-human.org/crepuscolo/Creazioni/icon/stock/st_56.jpg);
}

.nom_groupe{
  font-size : 15px;
  font-weigth: bold;
  text-transform : uppercase;
  text-align: center;
  font-family: 'Shadows Into Light', cursive;
  color: #fa4c4c;
}

.sous-groupe{
  font-size : 12px;
  text-align: center;
  text-transform : lowercase;
  font-style: italic;
  color: #ac97be;
}

.image_gauche{
  width: 100px;
  float: left;
  margin-right: 8px;
  margin-bottom: 8px;
}

.qeel_groupe .infobulle {
position: absolute;
top: 25px;
left: 25px;
width: 250px;
height: auto;
background:#484949;
opacity: 0;
visibility: hidden;
transition: 0.5s;
padding:10px;
marging-bottom: 6px;
border-radius:30px;
font-size: 12px;
text-align: justify;
line-height: 11px;
}

.qeel_groupe:hover .infobulle {
opacity: 1;
visibility: visible;
z-index: 100;
transition: 0.5s;
}




/* --------------------------------- QEEL --------------------------------- */

 /* --------------------------------- PROFIL deroulant --------------------------------- */
    .profilmasque {
      background-color: #454bbd;
      width: 200px;
      padding: 10px;
      font-size: 11px;      
      margin:auto;
  font-family: Verdana,Arial,Helvetica,sans-serif;
    }

    .profil1 {
      width: 200px;
      font-size: 20px;
      font-family: 'Miniver', cursive;
      background-color: #454bbd ;
      border: none;
      color: #fefefe;
    }

    .avatar_profil {
      width: 200px;
      height: 320px;
    }

.pseudo{
  font-family: 'Pacifico', cursive;
  font-size: 25px;
  text-align: center!important;
  display: block;
  line-height: 20px;
  padding-top: 3px;
}

.texte_ava{
  text-align: center;
  font-size:14px;
  background: #454bbd;
  color: #d66ade;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 7px;
  width: 150px;
  margin-left: 33px;
  font-family: "Kaushan Script",cursive;
  -webkit-border-top-left-radius: 50px;
-webkit-border-top-right-radius: 50px;
-moz-border-radius-topleft: 50px;
-moz-border-radius-topright: 50px;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
}

.fondavatar {
background-color : #454bbd;
font-family: 'Shadows Into Light', cursive;
  padding: 10px;
  margin-left: 8px;
  margin-right: 8px;
}

.fond_pseudo{
  background-color : #454bbd;
  width: 220px;
  margin: auto;
}

.rang{
  font-size: 11px;
  text-align: center;
  color: #fff;
  font-family: georgia;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.info_profil{
background-color : #454bbd;
    width: 214px;
  margin: auto;
  padding-left: 6px;
}

    /* --------------------------------- FIN PROFIL --------------------------------- */

.derniers_sujets {
  margin-top: 3px; /* pour faire un léger espace entre la ligne des "messages & sujets" et "dernier message posté" */
  padding: 3px; /* pour ne pas que le texte se colle aux bords du cadre */
  width: 130px;

  /* après on peut rajouter ce qu'on veut : une bordure, une image de fond, des coins arrondis un peu originaux... */
  background: #787a6e;
  border-radius:0 10px 0 10px;
  -moz-border-radius:0 10px 0 10px;
  -webkit-border-radius:0 10px 0 10px;
}
/* fin nombre de sujet et message*/

/* --------------------- NAVIGATION / TOOLBAR ---------------------- */

  /* Style général */
.generated_nav_bar {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 999;
    top: 0;

    background:#393A95;
    border-bottom: 3px solid #c1378c;
    box-shadow: 0 0 5px #000;
 
    text-align: center;
    white-space: nowrap;
    line-height: 30px;
}

/* Liens dans la navbar */
.generated_nav_bar .mainmenu {
    color: #c179c6 ;
    font-family: Corbel;
    font-size: 12px;
    font-weight: lighter;
    margin: 5px;
    border: none;
    font-variant: small-caps;
    letter-spacing: 1px;
}

#fa_toolbar {
    margin-top: -30px; /* On cache la toolbar en haut */
    font-variant: small-caps;
}

/* bouton pour ouvrir fermer la toolbar */
#fa_toolbar_hidden, #fa_toolbar #fa_hide, #fa_toolbar_hidden { display: none!important;}

    /* rond avec l.avatar */
    .fa_avatar {
        background: #969DC1;
        width: 50px;
        height: 50px;
        position: fixed;
        border-radius: 50%;
        top: 7px;
        left: 130px;
        z-index: 999;
        border: 2px solid #25262b;
        box-shadow: 0 0 5px black;
        overflow: hidden;
    }

/* centrage avatatar */
.fa_avatar img {
    width: 100%;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
        transform: translateY(-50%);
}


/* placement crédits Toolbar NE PAS ENLEVER ! ! ! */
#fa_left {
    position: fixed;
    top: 2px;
    left: 7px;
}

a#fa_notifications {display:none!important;}

/* Menu welcome */
#fa_menu {
    position: fixed;
    top: 0px;
    left: 185px;
}

      /* Adaptations pour les petits écrans */
    @media screen and (max-width: 1360px) {
      .fa_avatar + .generated_nav_bar {
          padding-left: 285px;
      }
    }

    @media screen and (min-width: 1360px) and (max-width: 1510px) {
      .fa_avatar + .generated_nav_bar {
          padding-left: 200px;
      }
    }

/* On enleve la partie gauche de la zone Welcome*/
#fa_usermenu { display: none; }

/* Style de la zone welcome*/
#fa_menu #fa_menulist {
  padding-left: 10px;
  border: 0;
  left: 0!important;
}

    #fa_toolbar #fa_welcome {
        width: 150px;
        line-height: 1.2;
        padding-top: 10px;
    }

#fa_notifications, #fa_welcome {
    color: #222825!important;
    font-family: Corbel;
    font-size: 12px;
    font-variant: small-caps;
    letter-spacing: 1px;
}

#fa_menu #fa_menulist :link, #fa_menu #fa_menulist :visited { color: inherit!important; }
#fa_menu #fa_menulist a:hover, #fa_notifications:hover, #fa_welcome:hover { color: #ffffff!important; }

#fa_menu #fa_menulist,
#fa_toolbar #fa_right.welcome #fa_menu #fa_welcome,
#fa_toolbar #fa_right #notif_list {
    background: #74796D!important;
    color: #222825!important;
}

#fa_toolbar #fa_right #notif_list li,
#fa_toolbar #fa_right #fa_notifications + #notif_list li .contentText a {
    color: inherit!important;
}


#fa_right #fa_menu #fa_menulist,
#fa_toolbar #fa_right #fa_notifications + #notif_list
 {
    display: block;
    visibility: hidden;
    -webkit-transition: all 600ms;
    transition: all 600ms;
    opacity: 0;
    overflow: hidden;
}


#fa_right.welcome #fa_menu #fa_menulist,
#fa_toolbar #fa_right.notification #fa_notifications + #notif_list {
    visibility: visible;  opacity: 1;
}
 
#fa_toolbar #fa_right #notif_list li hr {
  border-color: #222825!important;
}

#fa_toolbar #fa_right #fa_menu .fa_separator {
  background: #222825;
}

#fa_right #fa_menu #fa_menulist li {
    -webkit-transform: translateX(-245px);
        -ms-transform: translateX(-245px);
            transform: translateX(-245px);
    -webkit-transition: all 300ms 50ms;
    transition: all 300ms 50ms;
}


#fa_right.welcome #fa_menu #fa_menulist li {
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
}

/*  Animation menu Welcome */
#fa_right #fa_menu #fa_menulist li:nth-child(2) {-webkit-transition-delay: 100ms;transition-delay: 100ms;}
#fa_right #fa_menu #fa_menulist li:nth-child(3) {-webkit-transition-delay: 150ms;transition-delay: 150ms;}
#fa_right #fa_menu #fa_menulist li:nth-child(4) {-webkit-transition-delay: 200ms;transition-delay: 200ms;}
#fa_right #fa_menu #fa_menulist li:nth-child(5) {-webkit-transition-delay: 250ms;transition-delay: 250ms;}
#fa_right #fa_menu #fa_menulist li:nth-child(6) {-webkit-transition-delay: 300ms;transition-delay: 300ms;}
#fa_right #fa_menu #fa_menulist li:nth-child(7) {-webkit-transition-delay: 350ms;transition-delay: 350ms;}
#fa_right #fa_menu #fa_menulist li:nth-child(8) {-webkit-transition-delay: 400ms;transition-delay: 400ms;}
#fa_right #fa_menu #fa_menulist li:nth-child(9) {-webkit-transition-delay: 450ms;transition-delay: 450ms;}
#fa_right #fa_menu #fa_menulist li:nth-child(10) {-webkit-transition-delay: 500ms;transition-delay: 500ms;}
#fa_right #fa_menu #fa_menulist li:nth-child(11) {-webkit-transition-delay: 550ms;transition-delay: 550ms;}
#fa_welcome { -webkit-transition: all 300ms; transition: all 300ms;}

/* Boutons connexion / enregistrement de la toolbar */
#fa_right a[href$="login"],
#fa_right a[href$="register"],
ul#notif_list, li.see_all, li.unread, div.fa_notification, a.fa_icon{
    display: none!important;
}

/* ------------------------ MISE EN FORME DES LISTES DE SUJETS ------------------------ */

    .bloc_sujets{
      width: 800px;
    margin: auto;
      /*background: #5E584C;*/
      border: 1px solid #ececec;
      box-shadow: 0px 0px 3px #868686;
      -o-box-shadow: 0px 0px 3px #868686;
      -moz-box-shadow: 0px 0px 3px #868686;
      -webkit-box-shadow: 0px 0px 3px #868686;
      -htm-box-shadow: 0px 0px 3px #868686;
    }

    .sujets{
      background: #6273c7;
      border: 1px solid #ffffff;
      padding: 3px;
  display: block;
  margin-bottom: 5px;
 }

    .topictitle{
      font-variant: small-caps;
      font-size: 12px;
    }

    .sujets_auteur{
      display: block;
      width: 200px;
      font-size: 11px;
      margin-top: 12px;
  color: #dfdfdf;
    }

    .sujet_last{
      display: block;
      width: 180px;
      height: 40px;
      background: #f4f4f4;
      padding-top: 10px;
      font-size: 11px;
    }

    .sujets_stats{
      margin-top:5px;    
    }

    .sujets_stats_contenu{
      font-size: 9px;
      color: #dfdfdf;
      font-style: italic;
    }
    /* --------------------- FIN MISE EN FORME DES LISTES DE SUJETS ---------------- */

/* --------------------------------- CATEGORIES --------------------------------- */
.avatar_posteur img{
  padding: 5px;
  height: 135px;
  width: auto;
  position: relative;
  border-radius:0px 40px 40px 0px;
}

.partie_gauche{
  background: #6273c7;
  border-radius:40px 0px 0px 40px;
  width: 180px;
}

        .image_nouveau {
          /*transform: rotate(5deg);*/
        margin-left: auto;
        margin-right: auto;
    float: left;
    border-radius:40px 0px 0px 40px;
        }

 .last_mess {
          /*display: block;*/
          text-align: center;
          font-size: 11px;
          color: #F0F0ED;
  width: 115px;
float: right;
  padding-top: 10px;
        }

        .last_mess a{
          text-align: center;
          font-size: 11px;
          color: #e785ef;
        }

 .messages_post{
            font-size: 10px;
            COLOR: #FFF;
            text-align: center;
  padding-top: 25px;
          }

.description_fow{
  height: 110px;
  overflow:auto;
  width: 440px;
  background: #6273c7;
  font-size: 11px;
  margin-left: 5px;
    margin-right: 5px;
  color: #cebdc7;
}

.description_fow p{
padding-left: 10px;
  padding-right:10px;
    text-align: justify;
}

.sous_fow_lien{
  background: #6359d3;
  width: 435px;
  margin-left: 5px;
  height: 35px;
  overflow: auto;
  padding-left: 5px;
}

.sous_fow_lien a {
  color: #fff!important;
}

.partie_droite{
  background: #6273c7;
  border-radius:0px 40px 40px 0px;
  width: 95px;
}

        .titrecategorie h2 {
          top: 25px /*1.5em*/;
          position: relative;
          font-size: 40px;
          font-family: 'Special Elite', cursive;
          color: #c1378c!important;
          letter-spacing: 1px !important;
          z-index: 1;
      /*text-shadow: 1px 1px 1px #010500;*/
  border-bottom: 5px solid #fff;
        }

        .cate_titre {
          text-align: center;
          margin: auto;
          background-color: #454bbd ;
          width: 800px;
          height: 210px;
        }

        .categorie {
          width: 800px;
          margin: auto;
          background-color: #454bbd!important;
          margin-top: -100px;
        }

  

        /* Forum */

        .forum {
          width: 750px;
          margin-left: auto;
          margin-right: auto;
          margin-top: 5px;
          margin-bottom: 5px;
          /*background: #666666;*/
          position: relative;
          padding: 2px;
          z-index: 2;
        }

        a.forumlink {
          position: relative;
          display: block;
          width: 100%;
          color: #c179c6!important;
          text-align: center;
          font-family: 'Kaushan Script', cursive;
          font-size: 22px;
      margin-top: -15px;
          letter-spacing: 1px;
          transform: all;
          -moz-transform: all;
          -o-transform: all;
          -htm-transform: all;
          -webkit-transform: all;
          transition: 1s;
          -moz-transition: 1s;
          -o-transition: 1s;
          -htm-transition: 1s;
          -webkit-transition: 1s;
        }

        a.forumlink:hover {
          letter-spacing: 2px;
          color: #c1378c!important;
          text-decoration: none !important;
          transform: all;
          -moz-transform: all;
          -o-transform: all;
          -htm-transform: all;
          -webkit-transform: all;
          transition: 1s;
          -moz-transition: 1s;
          -o-transition: 1s;
          -htm-transition: 1s;
          -webkit-transition: 1s;
        }

        /* Description */
        .description {
          width: 340px;
          height: 100px;
          overflow: auto;
          background-color: #fefefe;
          text-align: justify;
          font-family: arial;
          font-size: 11px;
      color: #645b6b;
        }

        /* Bloc derniers messages */

        .bloccate {
          width: 120px;
        }

        .stats_last
        {
          display: block;
          width: 160px;
          height: 75px;
          margin-left: -200px;
          margin-top: 30px;
          background: #E3A6A6;
          padding: 10px;
          border: 1px solid #2E2E2E;
          box-shadow: 2px 2px 10px #2E2E2E;
        -moz-box-shadow: 2px 2px 10px #2E2E2E;
          -webkit-box-shadow: 2px 2px 10px #2E2E2E;
        }

        .stats {
          display: block;
          text-align: center;
          font-size: 10px;
          color: #7E2727;
          border-bottom: 1px solid #7E2727;
          padding-bottom: 4px;
          margin-bottom: 4px;
        }

        /*--------------------------------- FIN CATEGORIES --------------------------------- */


Revenir en haut Aller en bas
http://oo-supernatural-oo.forumactif.org/t737-i02-damn-girl
 

CSS retro 80

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» marqueur d'arret en dehors de sa zone retro signalée
» RETRO SIGNALISATION
» [LAG II ph2] Mémoire position retro exterieur
» Rétrosignalisation
» Les conditions pour le contrôle des signaux

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Test design & autre :: Réglement :: Nouvelle saison-