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.

<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 

Image

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

Your email address will not be published. Required fields are marked *