PROFª CAROL aulas dadas haha próximas aulas haha
Veja aqui o cronograma de aulas.
PROFª MEL aulas dadas haha próximas aulas haha
Veja aqui o cronograma de aulas.
Tutorial HTML: Como personalizar blockquote
Postado por
01 fevereiro 2017


Hello chuchus, respondendo ao pedido feito em um comentário vou explicar como personalizar o blockquote.
Oi eu sou um blockquote.

Bom vamos ao tutorial babes, o código que eu utilizei acima foi esse:



blockquote {
padding: 20px;
margin-top: 10px;
margin-bottom: 10px;
line-height: 20px;
color: #70bdaa;
background: rgba(41, 51, 49, 0.49);
font-weight: 400;
text-transform: uppercase;
font-size: 12px;
font-weight: bold;
}
blockquote:hover {
color: #fff;
text-indent: 10px;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-ms-transition-duration: 1s;
border-left: 5px solid #4bb99e;
text-transform: uppercase;
}

Para inserir o blockquote em uma postagem você deve clicar nesse ícone:


Mas se quiser colocar em qualquer lugar do blog, como em Gadgets é só colocar o código:

<blockquote>
SEU BLOCKQUOTE CONTEÚDO!
</blockquote>


Alguns exemplos de blockquote:

MODELO 01
blockquote

blockquote {
background:#f9f9f9;
border-left:6px solid #ccc;
font-family: Georgia, serif;
margin:1.5em 10px;
padding:.5em 10px;
quotes:"\201C""\201D""\2018""\2019";
}
blockquote:before {
color:#ccc;
content:open-quote;
font-family: cambria, Georgia;
font-size:4em;
line-height:.1em;
margin-right:.25em;
vertical-align:-.4em;
}



MODELO 02



blockquote{
font-family: Georgia, Times, "Times New Roman", serif;
font-size: 16px;
border-top: solid 2px #dddddd;
border-left: solid 2px #dddddd;
border-right: solid 2px #dddddd;
border-bottom: solid 2px #dddddd;
margin: 1em 0px;
padding: 1em 1em;
font-family: Georgia, Times, "Times New Roman", serif;
font-style: italic;
font-size: 1em;
min-height: 60px;
}
blockquote:before {
display: block;
float: left;
content: "\201C";
font-size: 100px;
margin-right: 10px;
color: #fff;
background-color: #03C9A9;
padding: 15px 12px 5px 8px;
width: 50px;
height: 50px;
line-height: 90px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}




Fácil né? Até a próxima,
deixe nos comentários sugestões para o próximo tutorial.
Beijos!

Nenhum comentário: