Image Map

23 setembro 2013

Blockquotes fofos ~.~


Olá unicórnios!

Oi. Tudo bem com todos vocês? Comigo está tudo perfeitamente otimo :) Vim aqui antes que de começar a novela viver a vida e.ê Não posso perder essa novela! E antes de tudo, me sigam no tumblr, obg dinada.

Eu to meio sumida daqui, mas é porque agora eu to me dedicando mais à minha pagina no face, da Selena Gomez g~g qualquer dia eu divulgo aqui, ok? Hm. Nossa, veio um cheiro de acetona aqui, pensava que ara alguem querendo me matar, mas é só minha mãe mesmo fazendo suas belas unhas no meio da sala de estar e.e

O post de hoje trata-se de caixinhas de texto para usar em posts destacando alguns pontos que o leitor deva dar atenção; isso é super útil em tutoriais, para que não haja possibilidade de perder-se em meio aos códigos e esquecer alguns detalhes, ou para fazer suas citações destacadas cada uma de uma forma, servindo como blockquote.



Os blockquotes são esse aqui:


blockquote {
background-color: #ffffff;
padding: 10px;
font-size: 8px;
font-family: silkscreen;
color: #000000;
text-align: center;
box-shadow: inset 0 0 10px #8B1A1A, 0 0 3px #8B1A1A;
-webkit-transition-duration: .50s;
}


blockquote {
background-color: #CD3333;
border: 1px solid #8B1A1A;
outline-offset: -3px;
outline: 1px Dotted #fff;
padding: 8px;
font-family: 'silkscreen';
font-size: 8px;
color: #ffffff;
Text-shadow: 1px 1px 0px #000000;
text-align: center;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 2px;
box-shadow: inset 0 0 12px #8B1A1A,1px 1px 1px #8B1A1A;
}


Esse aqui só fica assim se sua barra de rolagem não for personalizada, se for onde tem as setinhas vai ficar da cor do fundo da barra de rolagem.

blockquote {
background-color: #F6F6F7;
padding: 7px;
font-family: 'silkscreen';
font-size: 8px;
color: #000000;
text-align: left;
box-shadow: inset 0 0 2px transparent, 0 0 5px transparent;
-webkit-transition-duration: .50s;
overflow: scroll;
}
blockquote:hover {
background-color: #f7f8f5;
padding: 7px;
font-family: 'silkscreen';
font-size: 8px;
color: #000000;
text-align: left;
box-shadow: inset 0 0 2px transparent, 0 0 5px transparent;
-webkit-transition-duration: .50s;
}

Esse tem hover

blockquote {
background: #F7F8F7;
border: 1px solid #000000;
color: 000000;
font-family: 'silkscreen';
font-weight: normal;
font-size: 11px;
text-align: right;
padding: 7px;
border-radius: 25px;
}
blockquote:hover {
border: 2px solid #CD3333;
}


Tem hover

/*Blockquote em Hover By: Birthday Cake
----------------------------------------------- */
@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }
blockquote {
background-color: #f5f5f5;
padding-top: 5px;
padding-bottom: 5px;
font-size: 8px;
font-family: silkscreen;
color: #5c5c5c;
text-align: center;
box-shadow: inset 0 0 5px #EEEEEE, 0 0 4px #ccc;
-webkit-transition-duration: .50s;
}
blockquote:hover {
background-color: #f5f5f5;
padding-top: 5px;
padding-bottom: 5px;
font-size: 8px;
font-family: silkscreen;
color: #bfbdbd;
text-align: center;
box-shadow: inset 0 0 5px #EEEEEE, 0 0 4px #ccc;
-webkit-transition-duration: .50s;
}


Tem hover

Blockquote {
font-size: 8px; font-family:'silkscreen';
padding: 3PX;
background: #fff;
border: 2px solid #c9d0d6;
-webkit-border-radius: 2PX;
-webkit-transition-duration: 1S;
}
Blockquote:hover {
-webkit-border-radius: 2px;
border: 2px solid #c9d0d6;
font-size: 8px; font-family:'silkscreen';
padding:3PX;
background: #fff;
-webkit-transition-duration: 1S;
-webkit-transform: rotate(2DEG);
}/* seleção de texto colorida */
*::-moz-selection {
background: #c9d0d6; /*---Cor de fundo--*/
color:#FFFFFF; /*--cor da fonte--*/
}



Então é isso, espero que tenham gostado >.< rsrs
Bejauuum pra vocês, até <3

3 comentários:

  1. Que lindos os modelos, amei! :3
    beijos
    quemprecisadetvparaverbeyonce.blogspot.com

    ResponderExcluir
  2. O último modelo é muito fofo :3

    Beijos da Lets | Vida de uma SONE

    ResponderExcluir
  3. Oii ameii o post super legal! Retribuii minha visitinha? Tem Vagas para postadores lá bjuuus

    http://birthdaykawaii.blogspot.com.br/

    ResponderExcluir

|