html - creating block

Question

I have to create block like this:

alt text http://img689.imageshack.us/img689/5397/samplek.png

How can I do this faster using css+html?

Answer 1

You have to create 8 images with transparency support.

4 images for sides: top, left, right, bottom

4 images for corners

For the middle part you can have a div and fill it with this background color.

If you're talking about pure CSS way, then you need to know that its current state does not allow you to have neither round corners nor shadows in a cross-browser way.

When you have your images you can glue them together like this:

<div style="background: url('/topleft.png') no-repeat;">
  <div style="background: url('/topright.png') right no-repeat;">
    <div style="background: url('/bottomleft.png') bottom no-repeat;">
      <div style="background: url('/bottomright.png') bottom right no-repeat;">

        <div style="padding: 0 5px; background: url('/top.png') repeat-x;">
          <div style="background: url('/bottom.png') bottom repeat-x;">
            <div style="position:relative; left: -5px;
                        background: url('/left.png') repeat-y;">
              <div style="position:relative; left: 10px;
                          background: url('/right.png') right repeat-y;">

                <div style="position:relative; right: 5px;
                            background: #fff68f;">
                   We got it!
                </div>

              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>

P.S. Yea, it's crazy, I know.

P.S. #2: To make it "fast" you could combine them in some master image and make use of the CSS sprites technique. But for it to work you have to accomodate for sufficient empty space between the images (read the article to understand why), otherwise these 9 nested divs can explode even further.

Answer 2

CSS3 gives you some nice options but most of them are not cross-browser supported yet (like the -moz-border-radius property).

Answer 3

Possibly something like this:

<div id="block"></div>

<style type="text/css">
 #block{
  background:transparent url(http://img689.imageshack.us/img689/5397/samplek.png) 0 0 no-repeat;
  height:279px;
  width:222px;
}
</style>