login
administrateur
login
Le 22 mai 2013 à 21 h 28 min   
Eti-quette, car les temps sont durs
flecheLes deux éléments importants dans la mise en place
de ce code sont :
– L’étiquette rétractable
– L’info-bulle au passage de la souris
Ci-dessous, le code HTML et la mise en forme CSS
Code HTML
  <div id="webinnov">
    <div class="cadre-vignette-boite">
      <a class="dllbouton"  href="">
        <span class="hidden infobulle">Paint 1.2.2</span>
          <span class="dll-texte">10 Mo </span> </a>
            <img src="images/logo10.png" alt="" height="196" width="196">

Code css : Structure
.cadre-vignette-boite{
	width:128px;
	height:128px;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	-khtml-border-radius:6px;
	border-radius:6px;
	-moz-box-shadow:inset 0 0 6px #8C5A03,1px 1px 0 rgba(255,255,255,.2);
	-khtml-box-shadow:inset 0 0 6px #8C5A03,1px 1px 0 rgba(255,255,255,.2);
	-webkit-box-shadow:inset 0 0 6px #8C5A03,1px 1px 0 rgba(255,255,255,.2);
	-o-box-shadow:inset 0 0 6px #8C5A03,1px 1px 0 rgba(255,255,255,.2);
	box-shadow:inset 0 0 6px #8C5A03,1px 1px 0 rgba(255,255,255,.2);
	position:absolute;
	z-index:auto;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	background-color: transparent;
	background-image: url(../images/fond.png);
}
	
.cadre-vignette-boite .cadre-vignette{
	display:block;
	width:128px;
	height:128px;
	position:relative;
	z-index:4;
}
Code css : Animation
#webinnov .cadre-vignette-boite a.dllbouton{
	display:block;
	width:128px;
	height:60px;
	position:absolute;
	left:-38px;
	top:27px;
	color:#242f07;
	font-weight:normal;
	letter-spacing:0;
	font-size:20px;
	line-height:43px;
	text-align:left;
	text-shadow:1px 1px 0 rgba(255,255,255,.25);
	-moz-transition-property:left;
	-moz-transition-duration:.3s;	
	-moz-transition-timing-function:ease-out;
	-webkit-transition-property:left;
	-webkit-transition-duration:.3s;	
	-webkit-transition-timing-function:ease-out;
	-o-transition-property:left;
	-o-transition-duration:.3s;	
	-o-transition-timing-function:ease-out;
	transition-property:left;
	transition-duration:.3s;	
	transition-timing-function:ease-out;
	background-color: transparent;
	background-image: url(../images/down.png);
	background-repeat: no-repeat;
	text-decoration: none;
	z-index: -2;
}

a.dllbouton .dll-texte{
	display:block;
	padding-left:53px;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 12px;
	margin-left: 5px;
}


#webinnov .cadre-vignette-boite a.dllbouton:hover{
	left:-85px;
	text-decoration: none;
}
Code css : Info Bulle
.infobulle{
	display:none;
	width:auto;
	line-height:normal;
	white-space:nowrap;
	padding:8px 12px;
	position:absolute;
	left:-10px;
	top:-40px;
	background:#191919;
	background-color:#303030;
	background:transparent -moz-linear-gradient(#303030,#191919) 0 0 repeat;
	background:transparent -webkit-gradient(linear,left top,left bottom,color-stop(0%,#303030),color-stop(100%,#191919)) 0 0 repeat;
	background:transparent -webkit-linear-gradient(#303030,#191919) 0 0 repeat;
	background:transparent -o-linear-gradient(#303030,#191919) 0 0 repeat;
	background:transparent -ms-linear-gradient(#303030,#191919) 0 0 repeat;
	background:transparent linear-gradient(#303030,#191919) 0 0 repeat;
	color:#999;
	font-weight:normal;
	font-size:13px;
	text-shadow:1px 1px 0 #303030;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	-khtml-border-radius:6px;
	border-radius:6px;
	-moz-box-shadow:0 0 4px #333;
	-khtml-box-shadow:0 0 4px #333;
	-webkit-box-shadow:0 0 4px #333;
	-o-box-shadow:0 0 4px #333;
	box-shadow:0 0 4px #333;
	z-index:80
}

.infobulle:after{
	content:' ';
	display:block;
	width:0;
	height:0;
	position:absolute;
	left:50px;bottom:-19px;
	border-color:transparent;
	border-top-color:#191919;
	border-width:10px;
	border-style:solid
}

a:hover .infobulle,a:active .infobulle,button:hover .infobulle,button:active .infobulle,label:hover .infobulle,span:hover .infobulle{
	display:inline-block
}
David LAURENT

Aucun commentaire »

  1. No comments yet.

RSS feed for comments on this post. TrackBack URL

Leave a comment

Vous devez vous connecter pour publier un commentaire.

Propulsé par WordPress   |   Personnalisé par Webinnov
Haut de page