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

Yo lindos e lindas! Venho trazer mais modelinhos de Tooltip, eu os usei em alguns layout's free, mas perdi o link do criador, peço que se souberem me avisem para que possa creditar. Os modelos são muito lindinhos, combinam com quase todas as cores, fazendo pequenas alterações na cor, ficará lindo. Abaixo esta disponível os links pra pré-visualização.

Demo 1 Demo 2 Demo 3 Demo 4 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: 6px;
background: #f9cfe1;
background: -moz-linear-gradient(top, #f9cfe1 0%, #efacc8 85%, #f4bcd3 87%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9cfe1), color-stop(85%,#efacc8), color-stop(87%,#f4bcd3));
background: -webkit-linear-gradient(top, #f9cfe1 0%,#efacc8 85%,#f4bcd3 87%);
background: -o-linear-gradient(top, #f9cfe1 0%,#efacc8 85%,#f4bcd3 87%);
background: -ms-linear-gradient(top, #f9cfe1 0%,#efacc8 85%,#f4bcd3 87%);
background: linear-gradient(to bottom, #f9cfe1 0%,#efacc8 85%,#f4bcd3 87%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9cfe1', endColorstr='#f4bcd3',GradientType=0 );
box-shadow: inset 1px 1px 0 #ffe4ef;
border: 1px solid #dfa1bb;
padding: 6px;
font-family: "arial";
font-size: 10px;
color: #fff;
text-shadow: 1px 1px 0 #d689a9;
}

Modelo 2

Códigos

@font-face { font-family: "littlefont"; src: url('http://static.tumblr.com/4yxykdm/NMJlre6xz/04b_03___1_.ttf'); }
div#qTip {
position: absolute;
z-index: 1700;
display: none;
margin-top: 6px;
background: #606060;
box-shadow: 3px 3px 2px #f3f3f3;
padding: 6px;
font-family: "littlefont";
text-transform: uppercase;
font-size: 8px;
color: #e1e1e1;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

Modelo 3

Códigos

div#qTip {
position: absolute;
z-index: 1700;
display: none;
margin-top: 6px;
background: #f4f4f4;
background: -moz-linear-gradient(top, #f4f4f4 19%, #e5e5e5 99%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(19%,#f4f4f4), color-stop(99%,#e5e5e5));
background: -webkit-linear-gradient(top, #f4f4f4 19%,#e5e5e5 99%);
background: -o-linear-gradient(top, #f4f4f4 19%,#e5e5e5 99%);
background: -ms-linear-gradient(top, #f4f4f4 19%,#e5e5e5 99%);
background: linear-gradient(to bottom, #f4f4f4 19%,#e5e5e5 99%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#e5e5e5',GradientType=0 );
box-shadow: inset 1px 1px 0 #fff;
border: 1px solid #d1d1d1;
padding: 4px;
font-family: 'Trebuchet MS', Trebuchet, sans-serif;
font-size: 12px;
color: #bcbcbc;
text-shadow: 1px 1px 0 #fafafa;
}

Modelo 4

Códigos

div#qTip {
position: absolute;
z-index: 1700;
display: none;
margin-top: 6px;
background: #d0dbe4;
background: -moz-linear-gradient(top, #d0dbe4 0%, #e1e7ed 51%, #d0dbe4 51%, #d0dbe4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d0dbe4), color-stop(51%,#e1e7ed), color-stop(51%,#d0dbe4), color-stop(100%,#d0dbe4));
background: -webkit-linear-gradient(top, #d0dbe4 0%,#e1e7ed 51%,#d0dbe4 51%,#d0dbe4 100%);
background: -o-linear-gradient(top, #d0dbe4 0%,#e1e7ed 51%,#d0dbe4 51%,#d0dbe4 100%);
background: -ms-linear-gradient(top, #d0dbe4 0%,#e1e7ed 51%,#d0dbe4 51%,#d0dbe4 100%);
background: linear-gradient(to bottom, #d0dbe4 0%,#e1e7ed 51%,#d0dbe4 51%,#d0dbe4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0dbe4', endColorstr='#d0dbe4',GradientType=0 );
box-shadow: inset 1px 1px 0 #eaf0f4;
border: 1px solid #bdccd8;
padding: 4px;
font-family: 'Trebuchet MS', Trebuchet, sans-serif;
font-size: 12px;
color: #fff;
text-shadow: 1px 1px 0 #bdccd8;
}

Modelo 5

Códigos

@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/1kdckk4/9yjlolf0w/slkscr.ttf'); }
div#qTip {
position: absolute;
z-index: 1700;
display: none;
margin-top: 6px;
background: #cecfd3;
box-shadow: inset 0 0 4px #babdca;
padding: 6px;
font-family: "silkscreen";
font-size: 8px;
color: #fff;
text-align: center;
text-shadow: 1px 1px 0 #a8acbf;
-webkit-border-radius: 10px;
-webkit-border-top-right-radius: 2px;
-webkit-border-bottom-left-radius: 2px;
-moz-border-radius: 10px;
-moz-border-radius-topright: 2px;
-moz-border-radius-bottomleft: 2px;
border-radius: 10px;
text-transform: uppercase;
border-top-right-radius: 2px;
border-bottom-left-radius: 2px;
}

03/10/2017

Modelos de Tooltip com efeito hover [003]

Nenhum comentário:

Postar um comentário

Postagens mais visitadas