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;
}
Redes Sociais do Sweet Magic: Facebook | Twitter | We heart It | Bloglovin | Pinterest *
