Blockquote Kawaii

This evening i want to share css blockquote kawaii.
How to customized blockquote style?

Find .post blockquote { or .blockquote , usually in different templates , different code also.
Then delete your own blockquote code, replace with my code.


Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Code blockquote kawaii style 1

blockquote {
width:450px;
display:block;
margin: 1em 20px;
padding:10px;
box-shadow:inset 2px 2px 0px #F5A9A9,inset -2px -2px 0px #F5A9A9;
border: 2px dashed #F5BCA9;
color:#222;
font:12px verdana;
-moz-transition: all 1.5s ease-in-out;
-o-transition: all 1.5s ease-in-out;
-ms-transition: all 1.5s ease-in-out;
transition: all 1.5s ease-in-out;
}
blockquote:hover {
box-shadow:inset 500px 200px 0px transparent,inset -500px -200px 0px transparent;
}

 Don't forget to save yout template. Done.


blockquote kawaii style 2
live demo
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Code css:

blockquote {
width:auto;
display:block;
margin: 1em 20px;
padding:10px;
box-shadow:inset 3px 3px 10px #9F81F7,inset -3px -3px 10px #9F81F7;
background:#D0A9F5;
border: 2px inset #9F81F7;
color:#fff;
font-size:12px ;
-moz-transition: all 1.0s ease-in-out;
-o-transition: all 1.0s ease-in-out;
-ms-transition: all 1.0s ease-in-out;
transition: all 1.0s ease-in-out;
}
blockquote:hover {
box-shadow:inset 380px 0px 0px #BE81F7,inset -380px 0px 0px #BE81F7;
color:#fff;
}