09/12/2014

4 Modelos para Blockquote (Caixa de Códigos)

Oie...Trouxe mais alguns modelinhos para blockquotes com efeito quando se passa o mouse. Basta copiar o código que preferir e colar acima de /b:skin em seu HTML.



Modelo Rosa



blockquote{
padding: 20px;
font-size: 11px;
font-family: 'Open Sans', sans-serif;
color: #FFADAD ;
text-align: justify !important;
text-shadow: 0px 1px 1px #FF8989;
display: block;
border-radius: 2px 2px 2px 2px;
-webkit-box-shadow: 0 1px 4px
rgba(216, 86, 86, 0.3), 0 0 40px
rgba(243, 88, 88, 0.1) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 1px 4px
rgba(216, 86, 86, 0.3), 0 0 40px
rgba(243, 88, 88, 0.1) inset;
background-color: #fee;
background-image: url(http://1.bp.blogspot.com/-zZxLNYxh5E8/UCE7HjSsx5I/AAAAAAAAC_8/zFS1Vzuviiw/s1600/wvpl4z.gif);
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: 0px 0px;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;
transition:all 1s;
}
blockquote:hover {
background-position: right 50%;
background-size: 20px 20px;
}
-


Modelo Azul
-

blockquote{
padding: 20px;
font-size: 11px;
font-family: 'Open Sans', sans-serif;
color: #9DDCFF ;
text-align: justify !important;
text-shadow: 0px 1px 1px #CDE3FF;
display: block;
border-radius: 2px 2px 2px 2px;
-webkit-box-shadow: 0 1px 4px
rgba(86, 159, 216, 0.3), 0 0 40px
rgba(181, 219, 255, 0.1) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 1px 4px
rgba(86, 159, 216, 0.3), 0 0 40px
rgba(181, 219, 255, 0.1) inset;
background-color: #EEEFFF;
background-image: url(http://4.bp.blogspot.com/-6O0K1FTMd58/UCE7G-cpm3I/AAAAAAAAC_s/KJJ3HosRTlc/s1600/tumblr_m89suqJSmm1qdlkyg.gif);
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: 0px 0px;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;
transition:all 1s;
}
blockquote:hover {
background-position: right 50%;
background-size: 20px 20px;
}
-


Modelo Verde
-

blockquote{
padding: 20px;
font-size: 11px;
font-family: 'Open Sans', sans-serif;
color: #5FFAE1 ;
text-align: justify !important;
text-shadow: 0px 1px 1px #79D6C0;
display: block;
border-radius: 2px 2px 2px 2px;
-webkit-box-shadow: 0 1px 4px
rgba(21, 241, 250, 0.3), 0 0 40px
rgba(173, 255, 255, 0.1) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 1px 4px
rgba(21, 241, 250, 0.3), 0 0 40px
rgba(173, 255, 255, 0.1) inset;
background-color: #EEFDFF;
background-image: url(http://3.bp.blogspot.com/-GWNBXVmfq4c/UCE7BejTNwI/AAAAAAAAC-M/HH0gdOxr5zs/s1600/tumblr_m89rec8DYB1qdlkyg.gif);
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: 0px 0px;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;
transition:all 1s;
}
blockquote:hover {
background-position: right 50%;
background-size: 20px 20px;
}
-


Modelo Lilás
-

blockquote{
padding: 20px;
font-size: 11px;
font-family: 'Open Sans', sans-serif;
color: #F4BBF8 ;
text-align: justify !important;
text-shadow: 0px 1px 1px #F9BAFF;
display: block;
border-radius: 2px 2px 2px 2px;
-webkit-box-shadow: 0 1px 4px
rgba(255, 184, 235, 0.3), 0 0 40px
rgba(218, 56, 212, 0.1) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 1px 4px
rgba(255, 184, 235, 0.3), 0 0 40px
rgba(218, 56, 212, 0.1) inset;
background-color: #FCEEFF;
background-image: url(http://3.bp.blogspot.com/-b3mku5gUVoQ/UCE7GS5LazI/AAAAAAAAC_g/ByNotNm5_lo/s1600/tumblr_m89st7w2bh1qdlkyg.gif);
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: 0px 0px;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;
transition:all 1s;
}
blockquote:hover {
background-position: right 50%;
background-size: 20px 20px;
}
-

Créditos: Reino Kawaii

Nenhum comentário:

Postar um comentário