How would you encode this: mesh forms

Question

I am the person who learns best by example. I'm currently immersed in web development after fifteen years of developing desktop applications. I’m still used to all the web technologies used to develop modern websites, and everywhere I look, I see cool user interface elements and wonder how they are implemented. So I thought I would ask you web experts ... wexperts :)

What are some straightforward or creative ways that you could encode this grid reversal arrow ...

The basic layout for this page looks like ...

• What does the html / css code look like?
• Do you split an image into multiple images or can you use one image?

I am sure this is a really simple concept, and it completely scares me. Sorry if this is a weird question, remember I'm a note! :)

Thanks in advance for your help!

Here is a link to the original tutorial where I found these images

Answer 1

If you look at your layout, the title bar includes a height from the top of the green window to the bottom of the window.

background: green url(images/header-bottom.jpg) no-repeat bottom left; 

This jpg file includes the last 70 such pixels in height, including the entire arrow. Since your title and navigation are at the bottom where the arrow goes, the containers will be exactly as you show.

It also allows you to have submenus and content to have only the background color, since the only gradient that you think has in these two regions is in the same zone as the arrow in the title bar.

Answer 2

You can make the image of the rectangle, which is wide and short, to process it. Use the same colors as the rest of the page for it to fit. Check it in all browsers so that the image is displayed in the same way as the html colors. With some image formats, this is not the case, at least in some browsers.

Answer 3

There are so many ways to do this ... there are two or three ways that are better than most.

Here's an image of what Bellakian and Sean are talking about. Ignore the black fragments of the top of the text below, an inaccurate screenshot taken on my part.

alt text http://img171.imageshack.us/img171/9392/picture6e.png

You can make the green part of the arrow transparent and save it as a gif or png, since the slope seems to be 45 degrees (there are no jaggies in the GIF). You still have to edit the image to match the substate colors and background colors if you ever change them, but the transparent triangle will automatically display the background color of the header.

You will also need to remove the fields between the header, subnav and content containers.

The Photoshop guy who did this clearly wanted the background to appear “naturally” by creating margins between the title and the sub-content / content, but this is not possible without non-semantic markup with an arrow. The way you could do this without even using CSS is to simply place the image right after the title between the title and subnav / content.

 <header> <img src="arrow.gif" /> <section class="subnav" /> <section class="content" /> 

Then make the line transparent instead of the arrow. Now you will need to change the image if you ever changed the title, subnav or background color of the background, but not the background color of the body. This does what Photoshop guy wanted in spirit, but ultimately does not satisfy the markup.

I see that this concept is very surprising in Photoshop, you only need to change the background colors of each of the sections, and transparency takes care of the rest, cool! If you were confused about how to do this, and make sure the concept of the photographer guy is true to yourself, I don't blame you. This is not possible with basic HTML and CSS with images. Perhaps with SVG you can do this.

For fun, here is a super-optimized sprite way to do this. This requires that you set a huge vertical transparent space between the arrow and the top gradient of the content. Then use this background in the UL subnav and div / section of the content container. Set the background to 0 - (verticalspace + arrowheight) and repeat-x for the content. 3k single HTTP request.

alt text http://img37.imageshack.us/img37/8503/arrowy.gif