HTML & CSS: text overlay with shadows and round corners

Tweet

Today, I'm going to explain a simple effect that is getting quite popular on web sites: we will position a text over a main container. The box will have shadows and round corners. Something like:

It will be an easy solution with full browser compatibility... please follow me...

HTML
The HTML part of this exercise contains just two divs: the first is the main container (with the "Lorem ipsum..." text) and the second is the overlaying box ("This text is over..."). The first div has a class="longText". The second div has a class="over". We will use CSS to style the two divs.
So, here is the HTML:

<div class="longText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at lacus lorem, eget tristique sapien. Maecenas malesuada est eget urna dictum sollicitudin. Nulla facilisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec erat purus, faucibus vel convallis eget, luctus sit amet elit. Curabitur non libero quis tellus vulputate luctus non eget velit. Suspendisse sed enim nisi, ultrices molestie turpis. In hac habitasse platea dictumst. Donec purus lacus, commodo nec malesuada at, faucibus non erat. Etiam commodo neque et justo consequat sagittis. Nullam rhoncus turpis sodales dui molestie sollicitudin. Ut vel tellus eu est dictum lobortis id sit amet nisl. In nec justo purus.</div>
<div class="over">This text is over the main container.<br> It has round borders and shodows!</div>

The text used in the example is a bit long, just because we need enough space to place the overlay.

CSS

Now we need to style the two divs. Let's start with "longText":

.longText {
    width: 50%;
}

To obtain the overlay effect, we just reduce the width of the div. It is just for the understanding of the example (to make the long text go down vertically and to make the overlay effect more visible).
Now the "over" div:

.over {
    font-size: 16px;
    font-weight: bold;
    color: #000000;
    text-align: left;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 0 10px #000000;
    -moz-box-shadow: 0 0 10px #000000;
    box-shadow: 0 0 10px #000000;
    border-top: 1px solid #FFFFFF;
    border-right: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    border-left: 1px solid #FFFFFF;
    behavior:   url(/PIE/PIE.htc);
    background-color: #FFFFFF;
    padding: 15px;
    position: absolute;
    top: 40px;
    left: 40px;
}

Do I need to explain everything here? Probably not, but I need to make some remarks.
The rounded corners are achieved with border-radius; the shadows with box-shadow.
The position is absolute (40px from top and left).
The following rule is used to call PIE:

behavior:   url(/PIE/PIE.htc);

If you don't know what CSS3 PIE is, see my article about it. If you don't want to use it, just remove the above line.
It is clear that you can change border widths, colour and style, colour of text, border radius and so, according to your personal taste and needs.

I hope you've enjoyed the solution.