Onglets glissants

Date d'inscription : 02/12/2011

CSS →

Code:: /*-------------------------------------------------ANIMATIONS--------------------------*/

/*----- ANIMATION AUTOUR CADRE ------*/
.widget_flottant{
  font-size:10px;
  Font-family:calibri !important;
  position:fixed;
  border-radius:10px;
  width:150px;
  TOP : 60px;
  left: -110px;
  padding-top:10px;
  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;
}

.widget_flottant:hover{
  left: 5px;
  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;
}

/*---- INTERIEUR CADRE FLOTTANT ------*/

.cadre2 {left:-200px;
  margin-right:20px;
  margin-left:5px;
  border-radius:10px;
  border: 4px double darkslateblue !important;
  border-bottom: solid 2px darkslateblue !important;
  border-top: solid 1px darkslateblue !important;
  color: silver !important;
  font-size:11px;
  padding-left:10px;
  padding-right:10px;
  padding-bottom:5px;
  text-shadow: 0px 0px 5px black;
  text-align: justify;
  background: url('http://i47.servimg.com/u/f47/17/07/31/31/fond_t11.png');
  -moz-box-shadow: 0px 2px 8px #2e3b40, inset 0px 0px 5px #2e3b40;
  box-shadow: 0px 2px 8px #2e3b40, inset 0px 0px 5px #2e3b40;
  -webkit-box-shadow: 0px 2px 8px #2e3b40, inset 0px 0px 5px #2e3b40;
}
.cadre2:hover{left:10px;}
/*----------------------------------------ANIMATIONS-FIN-----------------*/

TEMPLATE → (haut)

Code:: <div class="widget_flottant">
   <div class="cadre2">
   Texte et autre élément du widget à afficher.
   </div>
</div>

TEMPLATE (bis) →

Code:: <div class="widget_flottant2">
   <div class="cadre2">
   Texte et autre élément du widget à afficher.
   </div>
</div>