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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm36ehPimX9QjCAZKIRggjkPNqOdz6VyBa8pF5ghKkE0Lua6Wapbl_69g0cMLzSerZPhrPPmwVKKa60APVwLRveQMoHDX65D2XBDjTR2Kn-cGuV1SGxTGa2T2aZegMyS4zvPdPQUrm4Pw/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj8ECSb9IbiAjaQHHPVT5ZgR_DHojxF0vSMTheKSPiqi9zqw9mKnoIa6TnNkmZ3Z08gqNGoLF_z_D-xyoelRx4HYGXVh3o1bxWJqpL5c0fzuCWxsL5auewfD4hIq0eSj0rZo33ljRbevc/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi05336N27YoSo04SNABTVrLvCtwIqs754BXEwLgEMHnIsMTBSvJeXaZmZ73R1LC6duoM3x99CfOMfQk91giLW2y-9_Mfqtiu8WGJpEshW8U7erOE8g9o0Dq9_a4Ab7pqZKZQSXZh6pCmY/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCKX7uBzRedyhKqNIcGpawwGD6PFAscDa5vYnSJEZOIIjjKl_hmPvInYLvpyoxwCELj9FzIqcv3EDnAPyBlb8N8TJ7nn0M0HbFrxwVor4qoC45yh09c5EQFhBqssxq3nLQMx9TXVJ2140/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