I always try keep my HTML as simple as possible, specially when coding forms. Forms tend to requiere a lot of markup to make them look nice, to position the labels, to have useful hints, error messages, validations, etc. Using CSS3 to reduce the amount of HTML is ideal.
In this case, I am using my friend selectors :before and :after to accomplish something that normally would require HTML code (supposing we are avoiding loading images).
The HTML code is as simple as:
<div class="bubble">Hello World!</div>
And here’s the CSS:
/* the bubble is white, assuming it is floating over dark background */
.bubble{
color: #444;
background-color: #fff;
font-size: 24px;
height: 30px;
line-height: 1.2em;
padding: 0.2em 1em;
border-radius: 8px;
-moz-border-radius: 8px;
box-shadow: 5px 5px 0 rgba(0,0,0,0.25);
-moz-box-shadow: 5px 5px 0 rgba(0,0,0,0.25);
-webkit-box-shadow: 5px 5px 0 rgba(0,0,0,0.25);
/* positioning relative to its parent */
position: absolute;
bottom: 10px;
right: 10px;
}
.bubble:before,
.bubble:after{
border-bottom: 10px solid #fff;
content: "";
height: 0px;
position: absolute;
right: -20px;
top: 10px;
width: 0px;
display: block;
border-right: 20px solid transparent;
}
.bubble:before{
top: 20px;
border-bottom: none;
border-top: 10px solid #fff;
}
It’s important to use RGBA to specify alpha transparency so no matter the background color it always will look as a shadow. Thats means: less code to edit if a color changes.
