CSS Speech Bubbles

by Umar

HTML

<div class="red bubble bottom left s-shadow">
    Red bubble, tail positioned at bottom left with south shadow.
</div>

<div class="green bubble bottom center s-shadow">
    Green bubble, tail positioned at bottom center with south shadow.
</div>

<div class="blue bubble bottom right s-shadow">
    Blue bubble, tail positioned at bottom right with south shadow.
</div>

<div class="red bubble top right s-shadow">
    Red bubble, tail positioned at top right with south shadow.
</div>

<div class="green bubble top center s-shadow">
    Green bubble, tail positioned at top center with south shadow.
</div>

<div class="blue bubble top left s-shadow">
    Blue bubble, tail positioned at top left with south shadow.
</div>

<div class="red bubble top left n-shadow">
    Red bubble, tail positioned at top left with north shadow. 
</div>

<div class="green bubble bottom left se-shadow">
    Green bubble, tail positioned at bottom left with south-east shadow.
</div>

<div class="blue bubble bottom right sw-shadow">
    Blue bubble, tail positioned at bottom right with south-west shadow.
</div>

<div class="gradient bubble bottom center s-shadow">
    Gradient bubble, tail positioned at bottom center with south shadow.
</div>

<div class="bordered bubble bottom center s-shadow">
    Bordered bubble, tail positioned at bottom center with south shadow.
</div>

CSS

body {
    font-family: sans-serif;
    font-size: 11pt;
}

.bubble {
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;

    padding: 10px;
    position: relative;
    width: 280px;
}

.red {
    color: #f0f0f0;
    background: #a00;
}

.blue {
    color: #f0f0f0;
    background: #00a;
}

.green {
    color: #f0f0f0;
    background: #0a0;
}

.gradient {
    color: #404040;

    background-image: -webkit-gradient(linear, left top, left bottom, from(#f0f0f0), to(#a0a0a0));
    background: -webkit-linear-gradient(top, #f0f0f0, #a0a0a0);
    background: -moz-linear-gradient(top, #f0f0f0, #a0a0a0);
    background: -o-linear-gradient(top, #f0f0f0, #a0a0a0);
    background: -ms-linear-gradient(top, #f0f0f0, #a0a0a0);
    background: linear-gradient(top, #f0f0f0, #a0a0a0);
}

.bottom {
    margin: 30px auto;
}

.top {
    margin: 30px auto;
}

.bottom.red:before {
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(60%, transparent), color-stop(60.1%, #a00));
    background: -webkit-linear-gradient(top left, transparent 60%, #a00 60.1%);
    background: -moz-linear-gradient(top left, transparent 60%, #a00 60.1%);
    background: -o-linear-gradient(top left, transparent 60%, #a00 60.1%);
    background: -ms-linear-gradient(top left, transparent 60%, #a00 60.1%);
    background: linear-gradient(top left, transparent 60%, #a00 60.1%);
}

.top.red:before {
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(60%, #a00), color-stop(60.1%, transparent));
    background: -webkit-linear-gradient(top left, #a00 60%, transparent 60.1%);
    background: -moz-linear-gradient(top left, #a00 60%, transparent 60.1%);
    background: -o-linear-gradient(top left, #a00 60%, transparent 60.1%);
    background: -ms-linear-gradient(top left, #a00 60%, transparent 60.1%);
    background: linear-gradient(top left, #a00 60%, transparent 60.1%);
}

.bottom.blue:before {
...