Modelos de Blockquote Personalizados

[ #06 | B E D A ] Konnichiwa fadinhas & elfos! Como estão? Hoje é dia de html/css! Hoje vou disponibilizar para vocês alguns tipos de blockquotes personalizados! Blockquotes é aquele espaço de citação que muitos blogs usam e é super comum em resenhas, textos e etc, espero que gostem, let's go?

Ele fica nessa opção, você seleciona um treixo do post e ativa esse botão para tranforma-lo em uma citação, o meu é assim:

Olá, esse é o blockquote desse blog, sempre mudo a cor.  Logo abaixo terá vários legais para você usar! <3

Para utilizar qualquer um que eu listar aqui, você precisará copiar o codigo do seu preferido, ir em Tema, Editar HTML e colar antes de /b:skin> ou de <style> . Se já possuir um modelo no seu blog procure por "post blockquote {" ou "blockquote {" apague toda a área e substitua por qual desejar. Agora vamos lá?

~ Com bordinha e efeito hover ~

 blockquote {
background-color: #dee9df;
padding: 5px;
border: 1px dashed #9bba9d;
text-shadow: 0px 1px 0px #deeedf;
box-shadow: inset 0 0 15px #a1c2a2, 0 0 3px #dbc8d3;
color: #94a395;
padding: 10px;
-webkit-transition-duration: .50s;
}
blockquote:hover {
background-color: #ffe7e9;
border: 1px dashed #f09fa5;
text-shadow: 0px 1px 0px #f6e4e5;
box-shadow: inset 0 0 15px #eca8ac, 0 0 3px #dfc9c3;
color: #f09fa5;
-webkit-transition-duration: .50s;
} 

~ Simples ~

 blockquote{
padding: 6px;
background-color: #f3f3f3;
border: 1px solid #e1e1e1;
box-shadow: inset 1px 1px #f9f9f9, 0 0 6px #f6f6f6;
color: #bbb;
text-shadow: 1px 1px 0 #fafafa;
font-family: 'Trebuchet MS', Trebuchet, sans-serif;
font-size: 11px;
} 

~ Bordinha com aspas~

 .post blockquote {
padding:10px 15px;
margin: 5px 15px;
outline: 1px dashed #fff;
outline-offset: -4px;
background: -webkit-linear-gradient(#9e896d, #a28b81);
background: -moz-linear-gradient(#a8c3be, #c0d3cf);
background: -o-linear-gradient(#a8c3be, #c0d3cf);
font-size: 15px;
color: #fff;
font-family: Times;
-moz-box-shadow: -1px 2px 5px #ccc;
-webkit-box-shadow: -1px 2px 5px #ccc;
box-shadow: -1px 2px 5px #ccc;
}

.post blockquote:before {
content: "\201C";
color: #dbf9fd;
font-family: Times;
font-size:50px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
}
.post blockquote:after {
content: "\201D";
color: #dbf9fd;
font-family: Times;
font-size:50px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
padding:15px 0px 0px 5px;
}

~ Box ~

 blockquote {border: 3px solid #fafcfd;
background-color: #fbf0ff;
padding: 10px;
font-size: 11px;
color: #a48ead;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow: inset 0 0 12px #f6dad8, 0 0 5px #d976a3;} 

~Hover mais claro e arredondado~

@font-face { font-family: "five"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf');} 
blockquote{
padding: 6px;
background-color: #e3e9ef;
box-shadow: inset 0 0 3px #c4cfd9, 0 0 6px #f6f6f6; 
color: #b8c4cf;
text-shadow: 1px 1px 0 #eaf0f4;
font-family: "five";
font-size: 8px;
-webkit-transition-duration: .50s;
}

blockquote:hover{
background-color: #ecf0f4;
box-shadow: inset 0 0 3px #d7dee5, 0 0 0 #f0f0f0;
color: #bfcbd6;
text-shadow: 1px 1px 0 #f1f5f7;
border-radius: 9px;
-webkit-transition-duration: .50s;
} 

~ Com barrinhas laterais ~

 blockquote { 
border-right: 7px solid #f99db3;
border-left: 7px solid #f99db3;
background-color: #f5f2f3;
padding: 10px;
font-size: 11px;
font-family: Verdana, sans-serif;
color: #777777;
text-align: center;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
-border-radius: 0px;
box-shadow: inset 0 0 15px #ecebeb, 0 0 5px #d2d1d3;
-webkit-transition-duration: .50s;}

blockquote:hover {
border-right: 11px solid #f99db3;
border-left: 11px solid #f99db3;
background-color: #f5f2f3;
padding: 10px;
font-size: 11px;
font-family: Verdana, sans-serif;
color: #777777;
text-align: center;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
-border-radius: 0px;
box-shadow: inset 0 0 15px #ecebeb, 0 0 5px #d2d1d3;
-webkit-transition-duration: .50s;} 

~ Barrinha com aspas ~

 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;
    }
    blockquote p {
    display:inline;
    }
    blockquote cite {
    color: #999999;
    font-size: 14px;
    display: block;
    margin-top: 10px;
    } 

Barrinhas late

.post blockquote { 
font-family: alegre;
letter-spacing: 2px;
font-weight: lighter;
background: url("http://static.tumblr.com/qbssgmc/Ltomo3rllndomodelo3.png");
border-left: 5px solid #812d50;
border-right: 5px solid #812d50;
padding: 10px;
text-align: center;
border-radius: 5px;
color: #d3977c;
}

@font-face {
font-family: "alegre";
src: url('http://static.tumblr.com/dlelfro/5jMmnnubw/al__gre_sans.ttf');

} 

~ Bolha aspas ~

.post blockquote{ 
font-family: Georgia, Times, "Times New Roman", serif;

font-size: 1em;

margin: 1em 0px;

padding: 1em 1em;

font-family: Georgia, Times, "Times New Roman", serif;

font-style: italic;

font-size: 1em;

min-height: 60px;

}

.post blockquote:before {

display: block;

float: left;

content: "\201C";

font-size: 100px;

margin-right: 10px;

color: #fff;

background-color: #fbeff4;

padding: 15px 12px 5px 8px;

width: 50px;

height: 50px;

line-height: 90px;

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

border-radius: 50%;

}

.post blockquote cite {

position: relative;

display: block;

text-align: right;

margin-top: 5px;

color: #999;

} 

~ Simples 2 ~

.post blockquote {
background: #FFF0F5; /*Cor do fundo*/
border-left: 7px solid #CD6090; /*Cor da borda, estilo, direção e espessura da borda*/
padding: 5px;
margin:10px 20px 10px 20px;
} 

Por hoje é só! Espero que tenham gostado! Eles funcionam em blogger e também wordspress! Você pode escolher o modelo e mudar as cores em todas as parte que tem (# e numeração, para saber mais cores, recomendo esse site >aqui<) Qualquer duvida é só perguntar nos comentários ok? Não esqueçam que estamos em BEDA! Terá postagem todo dia! Então segue o bloguinho e visite sempre ok?! Até mais! Kissus

Redes Sociais do Sweet Magic: Facebook | Twitter | We heart It | Bloglovin | Pinterest *