W3schools.com More Elaborate Css Box Model

[ericpollard]

Hi, first post here. Great site and forum as well. I was reading the tutorial for the CSS Box Model at http://www.w3schools.com/css/css_boxmodel.asp and noticed the box that contains 'Example code'. This box is more of what I was looking for and not really the basic box with a solid colored border. I've been searching this site for a reference on how to accomplish this, but I have not been able to find anything. Does anyone on here have a link to a page that would explain how to create the example code box? The part I don't understand is it has a gradient all the way up the box. I understand how to mimic this with a 3 part image that is much simpler as far as coloring goes, but the gradient that seems to run smoothly from bottom to top seems like it would not work with the method I have used in the past.

[thescientist]

although not the best example, I think they are using tables with a background image. You could use a div instead with a background image, and then position other elements inside it, like they do.

[jeffman]

A gradient like that is a background image 1px wide, set to repeat endlessly in the horizontal axis. In this case it is a .gif 100px tall, and it comes in at 517 bytes. That's small and efficient. Even more complicated gradients can be incredibly small files. If you keep to variations on a single hue, most gradients can come in at less than 256 colors, or even 128 colors, so the .gif format is very efficient for them. They fill huge spaces almost instantly, so they are very useful. As thescientist explained, other elements, like textareas, can go in front of them, because the gradient is in the background.Gradients are not nearly as efficient when you put them into large 2 dimensional images.