Repostagem: Tutoriais com HTML

Oi, amores! Bem, se alguém ainda existe na blogosfera (eu peguei ela em 2013, onde ela era lotadissima) espero que venha dar um view para mim. Bem, eu vou indo mais ou menos bem, na medida do possível. Bem, eu atualizei o blog e vou postar quando eu pensar. Bem, em 2014 eu postei vários utilitários que estão atualmente privados, e eu queria liberar eles para vocês (e para mim) novamente. Clique para ler mais.

Dois Modelos de Blockquote                                           

Para ver como os modelos ficarão, clique aqui (x)

Insira os códigos abaixo, acima de ]]>

Modelo Azul                                                                                                                  

blockquote {
background: #B0C4DE;
delinear-offset:-5px;
Esboço: 1px tracejada # 4682B4;
padding: 5px;
border: 1px solid #4682B4;
color: #4682B4;
border-radius: 3px;
font-family: Trebuchet MS;
font-size: 12px;
text-align: justify;
}
blockquote:hover {
background: #4682B4;
delinear-offset:-5px;
outline: 1px dashed #B0C4DE;
padding: 5px;
border: 1px solid #B0C4DE;
color: #B0C4DE;
border-radius: 3px;
font-family: Trebuchet MS;
font-size: 12px;
transition-duration: 1s;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
text-align: justify;
}

Modelo Rosa                                                                                                          

blockquote {
background: #F5F5F5;
delinear-offset:-5px;
outline: 1px solid #FFF0F5;
padding: 5px;
border: 1px solid #FFF0F5;
color: #DB7093;
font-family: Trebuchet MS;
font-size: 12px;
text-align: justify;
}
blockquote:hover {
background: #FFF0F5;
delinear-offset:-5px;
outline: 1px solid #FFE4E1;
padding: 5px;
border: 1px solid #FFE4E1;
color: #DB7093;
font-family: Trebuchet MS;
font-size: 12px;
transition-duration: 1s;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
text-align: justify;
}  

                                                                                                                                                                                                                                                        

Dois Modelos de Tooltip                                  

@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }
div#qTip {
margin:2px;
padding: 5px 9px;
border-right-width: 1px;
border-bottom-width: 1px;
display: none;
color:#4682B4;
background:  #B0C4DE;
border: solid 1px #4682B4;
outline-offset: -5px;
outline: 1px dashed #4682B4;
font-family: silkscreen;
font-size: 8px;
no-repeat 5%;
text-align: left;
position: absolute;
z-index: 1000;
opacity: 1.0;
text-transform: uppercase;
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
}

@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }

div#qTip {
margin:2px;
padding: 5px 9px;
border-right-width: 1px;
border-bottom-width: 1px;
display: none;
color:#FFE4E1;
background:  #FFF0F5;
border: solid 1px #FFE4E1;
outline-offset: -5px;
outline: 1px dashed #FFE4E1;
font-family: silkscreen;
font-size: 8px;
no-repeat 5%;
text-align: left;
position: absolute;
z-index: 1000;
opacity: 1.0;
text-transform: uppercase;
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
}

(OBS: Você pode trocar o dashed no tutorial por solid)

_________________________________________________________________________________________________________________________________________

Espero que tenha sido útil! Até mais!