1
Background
A friend of mine shared a link to a web-design site. Its layout interested me since it broke the norm of having a traditional link-based menu, and instead scales the pages you want as you click on them. It uses Flash "painted on top" of HTML, so I don't think there'd be an issue with the site on the grounds of accessibility: but I thought it would be a good challenge to see if the same thing [which if you're on Linux and use Compiz-Fusion will look similar to the Expo effect, and on Mac looks like the Dock] was possible using the only things I know, namely HTML, CSS, PHP and a minuscule amount of DOM methods.
The answer is: yes! It took me six fourteen hours in total to work it all out; and there are lots of things that could be improved, but it does show the new and free technologies in stylesheets are really opening up things for designers and non-designers [like me!] to create some amazing things.
2
Caveats
This probably isn't going to work for you if you're not using
- Opera 10.51
- the latest versions of Safari, Google Chrome and other Webkit browsers
- whichever beta-testing build Firefox is up to
Because they're the only browsers that "see" the CSS3 I've used. I tested this in Opera 10.51, Opera 10.10, Google Chrome, Firefox 3.5.3 and Internet Explorer 6.0. Opera 10.51 does it in time but is a bit jerky; Google Chrome is a bit laggy on colour changes, but is smoother on the scaling. I don't know why. Firefox 3.5.3 doesn't do transitions, but the scaling works. Opera 10.10 doesn't do anything, but the layout is fine. It's readable in Internet Explorer, which is as much as you can hope for.
The use of the onfocus attribute means that you'll have to write a page with a Transitional doctype; or use HTML 5. I added page numbers at the top of each section so you don't need Javascript for the page to work.
3
Browser jiggery-pokery
The magic bit is the CSS3 transitions and transforms module. But there's a catch here, since each browser uses its own proprietary mark-up for this, I have to enter more code. Erm... well done Browser Chaps. I think you've literally taken the web to the Eighties again.
So I used server-based browser detection to switch the extension [-moz-/-o-/-webkit-] in the CSS depending on the browser, as well as protecting the "elderly" Opera versions from the sizing I had to use. I had to do it this way because you cannot degrade gracefully between browsers that are all heading towards one standard. As the range of difference becomes smaller, each one looks the same. So the only way you can tell them apart is by asking the browser what it is.
View the source code as your browser sees it, or look at the PHP file source.
CSS3 is bad at scaling up; but it's fine at scaling down. After lots of thinking, the solution that I found was to scale down the content box and then relatively scale the divs inside. Then it's working out the positioning and sizing, which is trial and error.
HTML doesn't allow hyperlinks within hyperlinks; but I found a Javascript/DOM method that allows me to update the location on the page: so each div has code that looks like this:
div id="section" onclick="body.className='c'; location.href='#section';" onfocus="body.className='c'; location.href='#section';"
So I was able to link to the section dynamically, then style the section appropriately in the CSS using the :target selector. Sweet.
4
But seriously, why?
You can actually access each section from a keyboard without losing any visual loveliness [well, you can in Opera, which allows you to cycle through elements in a page]. I didn't check with the Exhibit-E site, and you can probably do it there too: but I think it might be trickier with Flash. Here, it's just natural browser behaviour. Also, those people who can't or don't use Flash still get a design fest, but without a plug-in.
Unlike the Exhibit-E page, what you see here is literally what you get: on that page I can see four pages, but the source gives me one [which I think is very tidy, by the way]. Looking at the source here gives you ALL the content that you can see. This has pros and cons.
Thanks
CSS3 transitions and 2D transforms by David Storey and Molly E. Holzschlag was the starting point, and constant reading. Most of the dev.opera articles are of exceptional quality and are well worth a read: and there's no better place to start than Opera's Web Standards Curriculum.
