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;
}

• place them between <style type=”style/css”> and </style> before the closing </head> tag
• Create or crop some background graphic into a 500 x 250 pixel size

Place the (X(HTML) in the place on your site you want this to appear.

<div class=”outerbox”>
<div class=”innerbox”>
<h1>Stop and smell the roses</h1>
</div>
</div>

Thanks for visiting LearnWebDesign. I hope you find this trick useful.

No Comments »