Veja aqui o cronograma de aulas.
Tutorial HTML: Como personalizar blockquote
Postado por
Andy
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:
SEU BLOCKQUOTE CONTEÚDO!
</blockquote>
Alguns exemplos de blockquote:
MODELO 01
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
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: