Working with RGBA - CSS3:

1. Set some nice background image like this:

body{
background:url("http://farm9.staticflickr.com/8010/7330498834_4817db077c_c.jpg") no-repeat;
    color:#fff;
    min-height: 450px;
}

2. Style your content div like this:


 p{
    width: 350px;
    padding:10px;
    font-size: 35px;
    margin:225px 45px;
background: rgba(128, 128, 128, 0.3);
}


OR

p{
    width: 350px;
    padding:10px;
    font-size: 35px;
    margin:225px 45px;
background: rgb(128, 128, 128);
opacity: 0.3;
}




then Here we go  -   http://jsfiddle.net/U373w/3/

Create Engarved text

Here are some tips to make engraved text using CSS3 :

 1. Create a div as:

#your div{

background: #COLOR1;

color: #color2;

text-shadow: 0px 0px 1px #fff;

}

2.Color Combinations:

light seagreen -> teal

lightgray -> gray

lightblue ->Teal

#78A931 -> #475B27

#469FAD ->#272627

#80B848 ->#58812D

#AD3A16 -> #68230E

#EEEEEE-> #6F7376

#FDDB6F -> #8FA0A