chat box effects by css

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.

    .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);


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

Some Quotes

I think he knows what Rome is. Rome is the mob. Conjure magic for them and they’ll be distracted. Take away their freedom and still they’ll roar. The beating heart of Rome is not the marble of the senate, it’s the sand of the coliseum. He’ll bring them death – and they will love him for it. (From Gladiator Movie, Ref Mob mentality)