Oggi vediamo come creare un tooltip animato in css senza utilizzare Javascript o Flash.
Pagina Html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <title>ToolTip solo con css senza javascript e flash</title> <link href='style.css' rel='stylesheet' type='text/css'> </head> <body> <br><br><br> <div align="center"> <i class="tooltip-block"><b>Test</b><span class="tooltip">Funziono a Bestia</span></i> </div> </body> </html> |
Foglio di Stile
|
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 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
.tooltip-block { /* Forza il tooltip nel elemento relativo non nella pagina */ position:relative; cursor:help; } .tooltip { display:block; position:absolute;/*Posizione assoluta*/ width:150px;/*Larghezza*/ padding:5px 15px;/*Padding*/ left:50%;/*Sinistra 50%*/ bottom:25px;/**/ margin-left:-95px;/*Margine a sinistra*/ /* Tooltip Style */ color:#fff;/*Colore*/ border:2px solid rgba(35,35,35,0.9);/*Bordo*/ background:rgba(50,50,50,0.9);/*Cambia il sfondo della immagine*/ text-align:center;/*Allineamento del testo a destra*/ border-radius:3px;/*Bordo*/ opacity:0;/*Opacità*/ box-shadow:0px 0px 3px rgba(0, 0, 0, 0.3);/* Il nostro box shadow */ /*--------------------------------------------------------------------------------------------------------*/ /*Effetto transistion del css3 in scale vuol dire che aumenta o diminuisce effetto secondo asse x e asse y*/ -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -0-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out; -webkit-transform:scale(0); -moz-transform:scale(0); -o-transform:scale(0); -ms-transform:scale(0); transform:scale(0); /*--------------------------------------------------------------------------------------------------------*/ /*Imposto il font*/ font-size:15px; font-weight:normal; font-style:normal; } /*Posizione margini bordi prima e dopo */ .tooltip:before, .tooltip:after{ content:""; position:absolute; bottom:-13px; left:50%; margin-left:-9px; width:0; height:0; border-left:10px solid transparent; border-right:10px solid transparent; border-top:10px solid rgba(0,0,0,0.1); } .tooltip:after{ bottom:-12px; margin-left:-10px; border-top:10px solid rgba(35,35,35,0.9); } /*Genera animazione quando viene messo il puntore su esso*/ .tooltip-block:hover .tooltip, a:hover .tooltip { /*Setto opacità in modo tale che dia un piccolo effetto di trasparenza*/ opacity:0.9; /*Modifica la scale del transform da 0 a 1 generando la seguente animazione*/ -webkit-transform:scale(1); -moz-transform:scale(1); -o-transform:scale(1); -ms-transform:scale(1); transform:scale(1); } |
