tutorial

Blockquotes Personalizados 2

julho 27, 2013,2 Comments


E aee galeraa!
Cara consegui escaxerenquiar o dedo, ta inchado e dói =/ Levei uma vida pra digitar um dos capítulos da minha fic, e tá difícil de escrever isso, mas eu quero mostrar pra vocês 6 blockquotes, calmem aí que eu não tô repetindo nenhum dos que já têm no blog, são todos diferentes dos outros tá? bora?
Pra colocar, se você já tem blockquote no blog, vai no HTML dele e procura por blockquote e apaga o que você já tem pra aplicar o que gostou, se você não tem ainda vai em Modelo > Personalizar > Avançado > Adicionar CSS e cola o código do blockquote ali que por ali você já pode vizualizar :D

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;
}

(o mais pedido rsrsrs)
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;
}


Gente 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, ah, e ninguém aí quer postar no meu blog de imagines? Tem vagas lá! Se quiser clica aqui e preenche a fichinha pelos comentários mesmo (www) juro que vou ler tudo com carinho >.< rsrs
Bejauuum pra vocês, até <3

xXNanda
---------------------
Tags: tutorialAuthor: Alaska

Lorem ipsum dolor sit amet, cotur acing elit. Ut euis eget dolor sit amet congue. Ut vira codo matis. Sed lacia luctus magna ut sodales lorem.

You Might Also Like

2 comentários:

Assinar: Postar comentários (Atom)