How do they do this? (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

Starhugger -> How do they do this? (2/10/2008 23:55:29)

I'm blaming Caz for encouraging me to create CSS templates for my site, when I should be doing other things. [;)]

In the process of looking for inspiration and wisdom, I was browsing through CSS Zen Garden and saw a theme that has sections with graduated colour from top to bottom. Each section seems to have a repeating background that uses a slivered GIF slice that is repeated x-wise. The GIF has the graduation of colour. Fine. No problem.

The mystery is that when I increase or decrease the font size, making each section longer or shorter, vertically, the graduation of colour also stretches and contracts with it -- consistently! So how does a fixed length graphic get stretched when the font increases? (I isolated the graphic with small fonts and large ones, and the background graphic is the same.)

I'm using Firefox, which can adjust the font size for virtually any web page (except Flash). Could it be something that done in Firefox itself? Usually, when I adjust the font size against fixed-size backgrounds, the fonts will just overflow the visual container, so this really surprised me.

I looked at it in IE7 and it doesn't have the kind of font definition that IE7 knows how to adjust, so I can't really test it there.

I'm just very curious how they do that (or what is doing that). Here's the link to the page. Maybe someone else can figure out what kind of smoke and mirrors are being used.

Starhugger



Tailslide -> RE: How do they do this? (2/11/2008 2:29:46)

Actually the background graphic isn't stretching - it just sort of looks like it is.

The easiest one to see this on is the div called preamble. It's got a grey gradient background that's 200px high and is repeated horizontally from top left to top right of the div. The div also has a background colour equal to the darkest colour in the gradient.

So when the div expands, the background image stays at the top of the div as it did before but you can see the dark background colour beneath it in the expanded area.

This is a must-do really for divs with background images in these circumstances (i.e. with a coloured background different to the main content) otherwise you end up with the div content looking like it's breaking out of the div. Also because if images are switched off it can be difficult to see the text otherwise.

With the other divs (the beige ones) they're using the same background image which is nearly 300px high - but you can't see most of it on the smaller divs as it's attached to the top left. So as the div expands, more background image is revealed. Then you've also got the background colour for the div for when the content expands past the height of the background image.



Starhugger -> RE: How do they do this? (2/11/2008 2:51:18)

Fascinating! So it's not actually expanding the gradient itself; it's just expanding the background colour below the gradient graphic, and the colour matches the darkest bottom edge of the gradient. It makes the eye think it's expanding the gradient too, when it's not.

It's interesting too that when you shrink the font down to microscopic, the size of the Div still shrinks with it to less than the height of the gradient GIF, but it seems to hide any overhang at the bottom of the GIF. So you still get the subtle colour difference; it's just not quite as dark at the bottom.

But now I'm not quite sure how they do that either. Is that the default behaviour when you have a graphic declared in a background CSS statement (rather than positioning the graphic itself), where it will only show the area of the GIF that matches the Div's size and then ignores the rest? I expected there to be an "overflow: hidden" statement or something, but I don't see it. Is that necessary only when it's an actual object in the HTML, but not if it's part of the CSS styling?

Thanks Tailslide!

SH



Tailslide -> RE: How do they do this? (2/11/2008 4:19:30)

quote:

ORIGINAL: Starhugger
Is that the default behaviour when you have a graphic declared in a background CSS statement (rather than positioning the graphic itself), where it will only show the area of the GIF that matches the Div's size and then ignores the rest?
SH


Yes exactly. 

#whatever (background:#fff url(images/whatever.jpg) left top repeat-x;}


You quite often will have a background image that's a lot larger than possibly required to allow for expansion/contraction of the div. Divs should ionly be the height of their content unless a height is specified which isn't a great idea most times (although IE gets this wrong) and therefore you only see the amount of background that's appropriate to the content of the div.

This technique is also used for "sliding doors" css trickery such as ensuring that backgrounds for tab navigation will expand enough to enclose the text when enlarged. Same works for elastic or fluid divs backgrounds that will expand or contract a lot. Trick is to make the image big enough to allow flexibility of the background, but not big enough that it takes an age to download.

Use of overflow:hidden is only necessary if you've got a load of floats as without it the div won't enclose the floats (it can't see them). The layout in question just has a load of text so it's not necessary.



Starhugger -> RE: How do they do this? (2/11/2008 4:29:50)

Thanks very much, Tail. I'll have to think about this some more after I've had some sleep. I've run into that thing about divs not being able to see things recently before, so I'll have to chase that down and see how it all fits together. Thanks for the help! [:)]

Starhugger



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.046875