CSS3 makes such pretty boxes. This one is a transparent red (#f00) on a yellow (#ff0) background to make a nice orange. It uses border-radius, rgba transparency, box-shadow, and text-shadow properties. These look like the image in Firefox 3.x and Safari, and should also work in Chrome. The text-shadow can be viewed in Opera. All versions of IE display a yellow box with a square-cornered black border, and no shadow on the text. IE does do transparency, but the text in the box is also transparent, unless you resort to removing it from the box-parent.
The css:
body {
background-color: #ffff00;
font-family: Verdana; sans-serif;
font-size: 12px;
color: #000;
}
#boxabc {
width: 250px;
background: rgba(255, 0, 0, 0.6);
border-top: 1px solid #aaa;
border-right: 2px solid #444;
border-bottom: 2px solid #444;
border-left: 1px solid #aaa;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
-khtml-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
padding: 15px;
}
.shadowtext {
font-size: 16px;
text-shadow: 2px 2px 2px #666;
font-weight: bold;
}The HTML:
<div id="boxabc>
<p class="shadowtext">Praesent Eleifend</p>
<p>Lorem ipsum dolor sit amet,...</p>
</div>
