- Bunny Crazy: Modelos de Tooltip com efeito hover [002]

Yo! Yo! Yo! Como vocês estão queridos bunnie's? Hoje acordei sem expiração... então decidi reblogar com os devidos créditos é claro! Estarão no final da postagem, pois acho que dá mais destaque. Venho trazer seis modelos para Tooltip com efeito hover. Mais abaixo você poderá ver o efeito deles clicando nos links de Demo. =)

Demo 1 Demo 2 Demo 3 Demo 4 Demo 5 Demo 5

1. Primeiramente vá em HTML e procure por <head>, fica bem no inicio dos códigos. Assim que achar acima dele cole o código abaixo:

Códigos

2. Ainda dentro do HTML procure por ]]></b:skin>, assim que achar acima dele cole um dos códigos dos modelos abaixo. Salve e prontinho!

Modelo 1

Códigos

div#qTip {
position: absolute;
z-index: 1700;
display: none;
margin-top: 5px;
padding: 4px;
background: #dbe3e8;
background: -moz-linear-gradient(top, hsla(203,22%,89%,1) 47%, hsla(204,28%,93%,1) 50%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(47%,hsla(203,22%,89%,1)), color-stop(50%,hsla(204,28%,93%,1)));
background: -webkit-linear-gradient(top, hsla(203,22%,89%,1) 47%,hsla(204,28%,93%,1) 50%);
background: -o-linear-gradient(top, hsla(203,22%,89%,1) 47%,hsla(204,28%,93%,1) 50%);
background: -ms-linear-gradient(top, hsla(203,22%,89%,1) 47%,hsla(204,28%,93%,1) 50%);
background: linear-gradient(to bottom, hsla(203,22%,89%,1) 47%,hsla(204,28%,93%,1) 50%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dbe3e8', endColorstr='#e8eef2',GradientType=0 );
box-shadow: inset 0 0 4px #b3c1cc, 0 0 3px #f1f1f1;
font-family: arial;
font-size: 10px;
letter-spacing: .1em;
color: #fff;
text-shadow: 1px 1px 0 #ced8e0;
}

Modelo 2

Códigos

div#qTip {
position: absolute;
z-index: 1700;
display: none;
margin-top: 5px;
background: #ffeaee;
box-shadow: inset 0 0 4px #ffcdd7, 0 0 2px #f2f2f2;
border: 1px solid #ffced8;
outline: solid 1px #fff7f9;
outline-offset: -2px;
text-shadow: 1px 1px #fff9fa;
padding: 5px;
font-family: "Quicksand";
font-size: 10px;
text-transform: lowercase;
letter-spacing: .1em;
color: #ffbecb;
}

Para aplicar a fonte, usada no exemplo procure por <head> e acima dele cole:

Códigos

Modelo 3

Códigos

div#qTip {
position: absolute;
z-index: 1700;
display: none;
margin-top: 5px;
background: #e8e1e7;
box-shadow: inset 0 0 4px #d6c8d5, 3px 3px 0 #f7f7f7;
border-radius: 2px;
padding: 5px;
font-family: "PF Arma Five";
font-size: 10px;
text-transform: lowercase;
color: #d2c3d1;
text-shadow: 1px 1px #f1ecf1;
}

Para aplicar a fonte, usada no exemplo procure por <head> e acima dele cole:

Códigos

Modelo 4

Códigos

div#qTip {
position: absolute;
z-index: 1700;
display: none;
margin-top: 6px;
background: #000;
padding: 5px;
font-family: "Trebuchet MS";
-moz-opacity: 0.28;
-khtml-opacity: 0.28;
opacity: 0.28;
filter:alpha(opacity=28);
font-size: 11px;
text-transform: lowercase;
color: #fff;
}

Modelo 5

Códigos

div#qTip {
position: absolute;
z-index: 1700;
display: none;
margin-top: 5px;
background: #cecfd3;
background: -moz-linear-gradient(top, hsla(228,5%,82%,1) 45%, hsla(225,5%,84%,1) 46%, hsla(225,5%,84%,1) 46%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(45%,hsla(228,5%,82%,1)), color-stop(46%,hsla(225,5%,84%,1)), color-stop(46%,hsla(225,5%,84%,1)));
background: -webkit-linear-gradient(top, hsla(228,5%,82%,1) 45%,hsla(225,5%,84%,1) 46%,hsla(225,5%,84%,1) 46%);
background: -o-linear-gradient(top, hsla(228,5%,82%,1) 45%,hsla(225,5%,84%,1) 46%,hsla(225,5%,84%,1) 46%);
background: -ms-linear-gradient(top, hsla(228,5%,82%,1) 45%,hsla(225,5%,84%,1) 46%,hsla(225,5%,84%,1) 46%);
background: linear-gradient(to bottom, hsla(228,5%,82%,1) 45%,hsla(225,5%,84%,1) 46%,hsla(225,5%,84%,1) 46%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cecfd3', endColorstr='#d4d5d8',GradientType=0 );
box-shadow: inset 0 0 3px #bbbec7, 0 0 8px #e3e3e3;
border: 3px solid #fff;
padding: 3px 5px 3px 5px;
font-family: "Ubuntu";
font-size: 10px;
letter-spacing: .1em;
text-transform: lowercase;
color: #fff;
text-shadow: 1px 1px 0 #bbbec7;
}

Para aplicar a fonte, usada no exemplo procure por <head> e acima dele cole:

Códigos

Modelo 6

Códigos

div#qTip {
position: absolute;
z-index: 1700;
display: none;
margin-top: 5px;
background: #e0d5c0;
background: -moz-linear-gradient(top, #e0d5c0 75%, #e4dccb 77%, #e4dccb 77%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(75%,#e0d5c0), color-stop(77%,#e4dccb), color-stop(77%,#e4dccb));
background: -webkit-linear-gradient(top, #e0d5c0 75%,#e4dccb 77%,#e4dccb 77%);
background: -o-linear-gradient(top, #e0d5c0 75%,#e4dccb 77%,#e4dccb 77%);
background: -ms-linear-gradient(top, #e0d5c0 75%,#e4dccb 77%,#e4dccb 77%);
background: linear-gradient(to bottom, #e0d5c0 75%,#e4dccb 77%,#e4dccb 77%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0d5c0', endColorstr='#e4dccb',GradientType=0 );
box-shadow: inset 1px 1px 0 #ede7dd;
border: 1px solid #cfc0a5;
padding: 4px;
font-family: "arial";
font-size: 10px;
text-transform: lowercase;
color: #fff;
text-shadow: 1px 1px 0 #cbbc9f;
}

Créditos totais ao The Moon Reserve

30/09/2017

Modelos de Tooltip com efeito hover [002]

Nenhum comentário:

Postar um comentário

Postagens mais visitadas