22 de mar de 2014

Modelo de blockquote hover

Olá pessoal!!! Hoje começa a maratona de tutoriais, e eu estou muito feliz pois agora consigo fazer alguns tutoriais eu mesma!!! E outra vocês gostaram do novo lay? Mundinho cor de rosa  (≧∇≦)
Eu me inspirei no lay do Garotas Cupcakes, por que eu achei coisa mais linda do mundo aquele lay >3<
Aliás falando em lay lindo, eu me afiliei ao blog mais fofo do mundo: o Milk Cake. Gente esse blog é a perfeição, além do nome já ser fofo o lay e mais ainda. É da minha amiga Babi, e vale a pena dar uma olhada e muito fofo.
Bom chega de fofuras e vamos aos tutos!!! Hoje eu vou mostrar um modelo de blockquote em hover ok?
 
 

 Pra começar procurem por :
]]>
E acima disso cole o seguinte código :

        /* Blockquote By: Sugar Cookie */

        blockquote {

        border-right: 10px solid #FFB6C1; /* Cor da borda direita antes do hover */

        border-left: 10px solid #FFB6C1; /* Cor da borda esquerda antes do hover */

        background-color: #FFFAFA; /* Fundo do blockquote antes do hover */

        padding: 10px; font-size: 12px;

        font-family: Verdana;

        color: #FFB6C1; /* Cor da fonte antes do hover */

        text-align: center;

        -webkit-border-radius: 0px;

        -moz-border-radius: 0px;

        border-radius: 0px;

        -webkit-transition-duration: .50s;

        }

        blockquote:hover{ /* Quando passa o mouse */

        background: #FFFAFA; /* Fundo do blockquote no hover */

        border-left: 10px solid #EED2EE; /* Cor da borda esquerda no hover */

        border-right: 10px solid #EED2EE; /* Cor da borda direita no hover */

        font-size: 12px;

        color: #EED2EE; /* Cor da fonte no hover */

        text-align: center;

        font-family:Verdana;

        -webkit-transition-duration: .50s; }
Bom então é isso espero que vocês tenham gostado, beijoooos ♥

Nenhum comentário:

Postar um comentário