How to create the css for this graphic?

HTML & CSS
1

Hi Folks, Can someone help me create the css for this graphic (attached)

I need the graphic to expand vertically depending upon the amount of text.

Many thanks

2

If its a fixed with and not transparent at the corners then the simplest method is to do it in four slices.

Cap the top with one image and cap the bottom with another and then repeat the borders on the wrapper. You would also need an inner content element to repeat the vertical fade.

Here’s a quick example using your image.

http://www.pmob.co.uk/temp/redbox.htm

Just view source as I have kept the code simple so that it is easy to understand.

The only caveat is that it needs a min-height because of your vertical fade as you can’t change the bottom corners and so have to have them at the end of the fade.

Hope that was what you wanted :slight_smile:

3

OR, you could recreate it using CSS3. :smiley:

The rounded corners CSS is not really supported by IE yet - they promise support in IE9 - but there is an .HTC hack that you could use to get rounded corners in IE. You’ll also need to include an image for the gradient for IE and Opera which do not support CSS gradients.

** If you do use the .HTC hack, it is highly recommended not to use any other .HTC files on the same pages.

.box {
	padding: 0px 10px 0px 10px;

	background:url(/images/bg_texture.gif) top repeat-x #FFFFFF; 
	/* this sets a repeating image for the background gradient for IE and Opera. It is covered by the CSS gradient in other browsers. */

	background: -moz-linear-gradient(top, rgb(200, 54, 54) 0%, rgb(255, 255, 255) 100%); 
	background: -webkit-gradient(linear, left top, left bottom, from(rgb(200, 54, 54)), to(rgb(255, 255, 255)));
	-moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
	display:block;

	behavior: url(border-radius.htc); 
	/* if you use this work around for IE you need to include the border-radius.htc file. Write the location of this file relative to your html page, not this css file. */

	border-radius: 20px;
	border:4px solid #FF0000;
}

Then all you need in your html is to add the class (or id) to the div you want styled.

<div class="box">
	<p>sample text</p>
	<p>More text here.</p>
</div>

Ta-da! And only one image as a backup for browsers that don’t support CSS gradients. Also, the gradient in the example will stretch along with the content since it is defined in percentages of height or width. If you don’t want the stretching, you can take out the bits for -moz-linear-gradient and -webkit-gradient and just use a background image for your gradient in all browsers.

4

Good css3 example huit.:slight_smile: Hopefully in a few years we can forget about older versions of ie and use a lot more of the good stuff.

5

Thanks Paul! I’m eager to use all these new CSS tricks, but if you tell customers it’s not fully supported (like with IE) then they don’t want anything to do with it. Hopefully the release of IE9 will be the turning point.

Good stuff indeed! :slight_smile:

6

Thanks guys, thats just what I was after.

Very very grateful