All for Joomla All for Webmasters

Blockquote personalizado

O resultado final é este:

Teste

Cole o código abaixo no seu CSS:

blockquote {
border-right: 10px solid #ff5480; 
border-left: 10px solid #ff5480; 
background-color: #ffdce3; 
padding: 10px; font-size: 10px; 
color: #4d2a00; 
text-align: center; 
-webkit-border-radius: 0px; 
-moz-border-radius: 0px; 
border-radius: 0px; 
box-shadow: inset 0 0 15px #ffb8c5, 0 0 5px #ff5e8e; 
transition-duration: 1s;
-moz-transition-duration:1s;
-webkit-transition-duration:1s;
-o-transition-duration:1s;
}

blockquote:hover {
 border-right: 5px solid #4d2a00; 
border-left: 5px solid #4d2a00; 
color: #000; 
box-shadow: inset 0 0 15px #ffb8c5, 0 0 5px #ff5e8e;
transition-duration: 1s;
-moz-transition-duration:1s;
-webkit-transition-duration:1s;
-o-transition-duration:1s;
}

Depois, cole o código onde você quiser:

<blockquote>Texto aqui</blockquote>

Se a sua plataforma de blog (Blogger, WordPress…) tem opção de BLOCKQUOTE enquanto você edita ou cria sua postagem (aquele símbolo das aspas), então nem precisa utilizar o código HTML acima, só o do CSS.

O código foi criado no blog Sorvete de Morango, e editado por mim.

Tem dúvidas? Ask-me!