Home » css » chat box effects by css

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 http://jsfiddle.net/RqQbp/


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s