Habillage type "info-bulle" exclusivement en css


Code: Select all
.Indic{position:relative;cursor:help;display:inline-block}
.Indic span{color:#FFFFFF;background-color:#000080;
position:absolute;top:-6px;left:5px;z-index:999;
min-width:300px;margin-left:0;padding:10px;border:2px solid#ccc;opacity:.9;
background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
-moz-border-radius:4px;border-radius: 4px;
-moz-box-shadow:0 1px 2px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.5) inset;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
text-shadow: 0 1px 0 rgba(255,255,255,.4)}
.Indic span:before, .Indic span:after{content:"";font-size:0;
position:absolute;z-index:1000;top:8px;left:-10px;
border-top:10px solid transparent;
border-bottom:10px solid transparent;
border-left:0px solid red;
border-right:15px solid #000080}
.Indic span:before{border-right-color:#ccc;left:-12px}
Affichage:
Habillage de type info-bulle
exclusivement réalisé en css.