Question

I am trying to create a little 3d raised “panel” or “box” on my site. I found a similar example on this page where they have this page with windows that are “raised” off the page with a title box. In this case, they are using an image for the whole box and just the text in the middle is actual text on the page.

I wanted to see if this can be replicated using CSS or I should really move over to photoshop for this sort of thing and do it all as images. (if i have to)

does anyone have any suggestions on if this can be replicated using pure html and css, javascript.

As a second question, if it has to be done using photoshop and images is there are any good place to get photoshop “templates” where you wouldn’t have to put this together from scratch.

Answer 1

Here’s something similar using CSS3 for the fancy parts:

http://jsfiddle.net/RrfJb/ (view in a WebKit browser such as Chrome)

It can be made to work in “all browsers”.

• For Firefox it’s as easy as adding the -moz prefix versions.
• For IE, use CSS3 PIE for the gradients and box shadow, and this tool to generate transform CSS.

---

.box {
    width: 300px;
    position: relative;
    background: -webkit-linear-gradient(top, #888 0%,#fff 30%);
    box-shadow: 3px 3px 5px #666;
    padding: 12px
}
.box > h2 {
    background: #ccc;
    float: left;
    padding: 8px 16px;
    position: relative;
    top: -18px;
    left: -21px;
    -webkit-transform: rotate(-2deg);
    font: bold 18px sans-serif
}
.box > p {
    clear: both
}
<div class="box">
    <h2>Welcome to website!</h2>
    <p>Lorem ipsum dolor sit amet..</p>
</div>