I created this unusual graphic effect in only a couple of minutes, using a background image I already had on my computer. The topmost box is NOT a graphic but is styled with special background color, and special border styles, heights, and colors – to make it look like a picture frame.

Here’s how you do it:

• Use these three “class” rules

div.outerbox
{
margin:0 auto;
width:500px;
height:250px;
background:url(img/roses.jpg) no-repeat;
border:4px solid black;
border-color:#eee #aaa #ccc #ddd;
}

div.innerbox
{
width:400px;
height:180px;
margin:30px 50px;
background-color:#fff;
border:10px solid black;
border-color:#eee #aaa #ccc #ddd;
/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
}

div.innerbox h1
{
margin:30px 20px;
font-weight:bold;
color:#000;
text-align:center;
}
Continue Reading »

No Comments »