Eti-quette, car les temps sont durs
Les deux éléments importants dans la mise en placede 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
|
1 2 3 4 5 6 |
<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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
.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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
#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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
.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