It is something strange for CSS effects article from a programmer. But yes today I am sitting on PC and check out some CSS effects after some explore I get the cute box can be used for a chat box.
These is generated after some css3 special effects like shadow, radius, transform. The css can be applied like that.
<style>
.box {
width: 300px;
min-height: 50;
border-radius: 5px;
box-shadow: 3px 3px 5px 6px #ccc;
padding: 15px;
margin: 10px;
font-family: arial;
font-size: 13px;
transform: skew(-10deg);
-webkit-transform: skew(-10deg);
}
</style>
Screenshot for resulted box is
While all effects work on FF20 on without using -moz prefix, While for strange reason Chrome 25 still need -webkit prefix to apply transform effects.
You can check the demo from http://jsfiddle.net/RqQbp/