SXSW - South by Southwest 10th Web Awards Winner - Best CSS
blog.aidol.asia youngteens.net a-coon.com

The 'css' category

Stephane Tartelin

In the Print & Illustration, Animation and Sketchbook pages of Tartelin’s website a div containing title and menu is placed on the “left sider” side by an horizontal scrolling div with an overflow:auto. (In this way the first section seems to use a position:fixed property) This div on the right contains several floating images with […]

Les Hautes-Mynes

Les Hautes-Mynes du Thillot web site is a good example of how a touristic brochure could be transfered on web using an horizontal layout. The 460px wide sections are placed side-by-side using CSS floating and contains on the left five links for the javascript scrolling of the page; the same links are replied in a […]

Evanescence

Based on my “The Horizontal Way template”, the official UK website of the rockband Evanescence is divided in six sections linked by the internal anchors of the left sider’s menu. Every section includes on the top a link that allows to scroll to this menu, and another menu – this time inline – on the […]

Stephan Bucco

Power to the images: in Stéphane Bucco’s portfolio the html+css structure is composed by only one absolute-positioned div with a long (32702px) width and fixed (558px) height, where are inserted all the img tags related to the several artworks that are in this way displayed, as usual, side-by-side. A little (in lenght and font-size) description […]

Tulipe (CZG)

The sixth entry from the CZG, Tulipe, could help to show again an important difference from horizontal to vertical design: sometimes divs that are at the same distance from the top of the viewport and contains text with the same font-size but different amount of it can’t have the same width. It could cause problems […]

Koniec

The portfolio of Koniec, spanish designers and illustrators, displays a fixed menu on the left where is possible to select the five horizontal pages showing (in divs with float:left) the published artworks.

Freeware/Delaware

“Freeware/Delaware”, digital home of the japanese “musics_designs” group Delaware, has the numbers ( (2001->2006) to be cited as one of the patriarch of horizontal scrolling. Especially in its ‘vision‘ pages, it displays ten or more squared artwork, 500×500 px big, placed syde-by-side everyone with a simple title (with scheme #’num’/’title’/’date’) on the right.

Pasquin o Panfleto

The ‘drawing showcase’ Pasquín o Panfleto is the first dynamic site-a weblog- listed in these pages. The hp shows a series of images with ‘category’ and ‘comments’ hidden links below; every page related to a post (like this) has a different width (set inline in “content” div) and display the artwork with on the right […]

Radio Zen (CZG)

Instead of the absolute positioning like in the previous CZG designs, the text sections of Radio Zen use the more comfortable float CSS property to be placed side by side, avoiding the calculation and the setting of the distance from the left side of the body. The two menus are displayed inline under the content, […]

Beca / Voices

Beca / Voices is a simple but beautiful example of how Javascript can help for a better navigation of a horizontal site: the content of this site -the introduction of a house music vocalist- is splitted in the three section (containing title+subtitle+one paragraph) that could be displayed after a scroll on the left of the […]


Index of sites