Aqui ficam os blogs que me ajudaram na construção desse layout. Se esqueci de algum, me avise pelos comentários. Thanks!

37. 4YOU - 2 Blockquotes

|| ||
votem no projeto da Vicky, do Garotas Cupcakes? ficou muito legal. Cliquem aqui pra votar, tá no fim do post e é o primeiro da lista. Isto é, se acompanharam o projeto e gostaram dos presentes.

Oi! Oi oi oi!

Tenho uma frase inspiradora vinda diretamente da minha cabecinha privilegiada - sqn - pra vocês: Vamos viver a vida sem se importar com decepções. - Shakespeare na área, mano véi. (e lá se vai Shakespeare).

Tô com muito fome, logo logo vou almoçar miojo - #ComidaDePobre - Huuuuuummmm!! Pelo menos aqui na Grande São Paulo - não entendo porque chamam de "grande", se não é a maior cidade do país - deu uma esquentada. Tô até sem meu suéter. Sim, eu uso, suéter, e daí? Sou descolada pra caramba mesmo assim - sqn parte 2 - .

Fui dar uma olhada no canal da DisneyMusic no Youtube, e achei uma música bem legal do filme da Tinker Bell, não sei qual dos quatro, chama Smile, é da Sabrina Carpenter. É legal.

Enfim, enfim. Fiz 2 modelinhos de blockquote pra vocês! Ficaram bem simplesinhos, mas eu achei fofo.

Vamos ver???


  • modelo 1

Normal:
Hover: 
O código:
/* Blockquote Por Sonifera Girl */
blockquote {
padding: 7px; /* Tamanho do Blockquote */
background: url("http://4.bp.blogspot.com/-fx02LXDJHvg/Ub6cteWD8JI/AAAAAAAANnA/3RUK8NNI4F4/s1600/4.png") repeat; /* Fundo */
box-shadow: inset 0px 0px 8px #d2d3fa, 0px 0px 5px #d2d3fa; /* sombras da caixa */
-webkit-box-shadow: inset 0px 0px 8px #d2d3fa, 0px 0px 5px #d2d3fa; /* sombras da caixa */
-moz-box-shadow: inset 0px 0px 8px #d2d3fa, 0px 0px 5px #d2d3fa; /* sombras da caixa */
outline-offset: -3px; /* Não mexa */
outline: 1px dashed #3f2748; /* cor da linha pontilhada */
color: #3f2748; /* cor da fonte */
font-family: 'PF Arma Five'; /* fonte */
font-size: 8px; /* tamanho da fonte /*
text-align: center; /* alinhamento do texto, pode mudar para right (direita) ou left (esquerda) */
border-radius: 3px; /* arredondamento - não mexa */
-webkit-transition-duration: .90s; /* Transição - não mexa */
}
blockquote:hover {
padding: 7px; /* Tamanho do Blockquote */
background: url("http://2.bp.blogspot.com/-2OIY81NkZAY/UWHqN5JBUEI/AAAAAAAAI8w/tK5IM2BXywo/s1600/parapostar4.png") repeat; /* Fundo quando passa o mouse */
box-shadow: inset 0px 0px 8px #b8cbfc, 0px 0px 5px #b8cbfc; /* sombras da caixa quando passa o mouse */
-webkit-box-shadow: inset 0px 0px 8px #b8cbfc, 0px 0px 5px #b8cbfc; /* sombras da caixa quando passa o mouse */
-moz-box-shadow: inset 0px 0px 8px #b8cbfc, 0px 0px 5px #b8cbfc; /* sombras da caixa quando passa o mouse */
outline-offset: -3px; /* Não mexa */
outline: 1px dashed #030675; /* cor da linha pontilhada quando passa o mouse */
color: #030675; /* cor da fonte quando passa o mouse */
font-family: 'PF Arma Five'; /* fonte */
font-size: 8px; /* tamanho da fonte */
text-align: center; /* alinhamento do texto, se mudou lá em cima, mude aqui também para right (direita) ou left (esquerda) */
border-radius: 3px; /* arredondamento - não mexa */
-webkit-transition-duration: .90s; /* Transição - não mexa */
}
/* Fim. Se usar, credite. */ 
  • modelo 2
Normal:
Hover:
O código:
/* Blockquote por Sonifera Girl */
blockquote {
padding: 6px; /* Tamanho do Blockquote */
background: #e0cbf5; /* Fundo */
color: #660689; /* cor da fonte */
font-family: PF Arma Five; /* fonte */
font-size: 8px; /* tamanho da fonte */
text-align: center; /* alinhamento do texto, pode mudar para right (direita) ou left (esquerda) */
border-radius: 10px; /* arredondamento - não mexa */
-moz-transition: all 0.2s ease-out;  /*Transição, não altere */
-webkit-transition: all 0.2s ease-out;  /*Transição, não altere */
-o-transition: all 0.2s ease-out;  /*Transição, não altere */
-ms-transition: all 0.2s ease-out;  /*Transição, não altere */
transition: all 0.2s ease-out;  /*Transição, não altere */
}
blockquote:hover {
padding: 6px; /* Tamanho do Blockquote */
background: url("http://2.bp.blogspot.com/-V-CscPit74o/UdMZzrLswmI/AAAAAAAAORM/vyMryeRcm48/s200/30.png") repeat; /* Fundo quando passa o mouse */
color: #df048b; /* cor da fonte quando passa o mouse */
font-family: 'PF Arma Five'; /* fonte */
font-size: 8px; /* tamanho da fonte */
text-align: center; /* alinhamento do texto, se mudou lá em cima, mude aqui também para right (direita) ou left (esquerda) */
border-radius: 10px; /* arredondamento - não mexa */
-moz-transition: all 0.2s ease-out;  /*Transição, não altere */
-webkit-transition: all 0.2s ease-out;  /*Transição, não altere */
-o-transition: all 0.2s ease-out;  /*Transição, não altere */
-ms-transition: all 0.2s ease-out;  /*Transição, não altere */
transition: all 0.2s ease-out;  /*Transição, não altere */
}
/* Fim. se usar, credite. */
Bem, podem ver que está tudo explicado no código, caso queriam mudar alguma coisa. Espero que tenham gostado!

Kiss!

5 comentários:

  1. Ficaram fofos os modelos ^-^

    Beijos ~
    garotas-cupcakes

    ResponderExcluir
    Respostas
    1. Valeu vicky! Brigada! Não sei se você viu, usei seu modelo de lista pra marcadores, eu achei bem fofo.

      Excluir
  2. Ficaram lindinhos os modelos mesmo *o* eu adoro suéter, queria fazer meu namorado usar mas ele acha coisa de gay ;u; (eu tbm uso, acho muito lindo), aqui tbm esquentou (ainda bem) hihi.

    breaking-doubts.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Né? Eu não tenho namorado, mas tento meu melhor amigo usar ou pelo menos gostar do meu, mas ele só fica falando que eu adoro voltar pros anos 80 :)

      Excluir
    2. "fazer" me melhor amigo usar hehe

      Excluir

Oie! Pro favor comentem nos posts, e por favor não xinguem nem sejam mal educados. Aceito críticas, ideias, elogios e tudo mais, mas com educação! E sigam o blog pf minha meta é de 100 seguidores, ajudem pf...

Be happy!

웃 ღ ♥ ♡ ❤ ❥ ❦ ∴ △ ∞ ☆ ★ ✖ 。◕‿◕。®™ ✾
❝❞✥ ✦ ✧ ✩ ✫ ✬ ✭ ✮ ✯ ✰ ✱ ✲ ✳ ❃ ❂ ❁ ❀ ✿
✼ ✻ ✺ ✹ ✸ ✷ ₪ ❃ ❂ ❁ ❀ ✿ ✾ ✽ ✼ ✻ ✺ ✹ ✸ ✷ ♥
✶ ✵ ✴ ❄ ❅ ❆ ❇ ❈ ❉ ❊ ❋ ❖ ●••●♪♫♩♫♭♪ ʚĭɞ ☁
●▂● ●0● ●︿● ●ω● ●﹏● ●△● ●▽●