Printable Version

Web Projects - Other

11/07/2008

In this article you will find examples of my personal web projects. Some of these projects resulted from various graphics design experimentations conducted in CSS. Screen shots are included and working examples are also available for those who wish to explore menu design in CSS.

Home Page v2 (2008)

Version two of my Home Page has been completely restructured. It no longer operates through static HTML pages, the content is now handled by a custom content management system, written entirely in PHP. The CMS operates by parsing site's directory tree and looks for content files. Valid content files are categorised and indexed according to the directory structure they were found in. The indexed content is cached locally on the server in order to speed-up content retrieval. The cache required only a single update, all subsequent page loads would fetch the indexing information from the cache. The visual appearance of the web site as also changed dramatically. Version two of this web site was specifically designed to manage large number of articles and image content. Readability, clean appearance and the ease of navigation was a priority.

Figure Home Page v2 1

CSS Fly-out Menu v2 (2006)

The CSS Fly-out Menu v2 is basically an improved version of the first CSS Fly-out Menu. The original menu had a fixed width, which forced the two-column layout to rely on XHTML table markup. However, using table markup defeated the principle of separating content from the layout. The improved CSS menu in this demo removes the aforementioned constraints and allows fully customisable page layout, as demonstrated by the changeable theme system. The second version also features a new trick for pre-loading all icons in the menu, thus eliminating redundant HTTP requests.

Figure Fly-out Menu v2 1
Figure Fly-out Menu v2 2 Figure Fly-out Menu v2 3

CSS Fly-out Menu (2006)

This is a demonstration on how to implement a CSS Fly-out Menu without using additional JavaScript code (for standards compliant browsers only). The project features multi-level sub menus, complete with menu icons, headings and dividers. The whole menu system is based on a series of nested unordered lists. Each nested list corresponds to a submenu, which only gets revealed when the mouse cursor hovers over its parent list item.

The menu should work with all standards compliant browsers. While the menu is a pure CSS implementation by nature, this is not entirely true for Internet Explorer 6. Unfortunately, the menu requires a JavaScript hack to get the hover feature functional under Internet Explorer 6.

Figure Fly-out Menu 1

Forest Glade Menu (2006)

The Forest Glade Menu is basically a PNG transparency experiment. The background image is actually composed of four layers. The layers consist of a forest background, the actual tree, the mound and the haze on top, ordered from bottom-up respectively. The layers slide under each other in order to maximise the image visibility under different screen resolutions.

The layers were spliced together from images found on various stock photo web sites, such as Flickr and morgueFile. These images were edited and filtered extensively to get the desired look — particularly the grass mound and the forest background. All layers contain transparency information for a smooth blending effect (with the exception of the forest background). This just demonstrates how effective transparent PNG images can be. Unfortunately, Internet Explorer 6 lacks support for PNG images with alpha channels, therefore some visual elements had to be sacrificed in the menu icons.

The menu does need some tweaking though. In some rare cases the menu icons may not line up horizontally as they should. This issue seems to appear in Firefox 2 from time-to-time, which can be resolved by refreshing the page. The menu is also broken in Internet Explorer 7.

Figure Forest Glade Menu 1

X-Rayed Box (2006)

The X-Rayed Box is an interactive experiment designed to get an X-Ray effect by using CSS code. The concept was based loosely on a demo called "An Image Magnifier", obtained from the CSS Play web site

The background floor texture is actually a 300 DPI scan of a cheap bookshelf that can be typically found at furniture stores. Originally, the scanned wood had a Teak colour, so layered filters were used to achieve that lacquered light Mahogany look. The specular highlight on the floor was also faked. It consists of an ordinary radial gradient applied with a wood grain transparency mask. The box was also scanned, with shadows added and slightly resized to match the X-Ray image. The X-Ray image was obtained from the Vidisco image gallery

The demo works quite well under Firefox 2, Opera 9.5, Safari 3.1.1 and Internet Explorer 6. However, the page was not tweaked to support Internet Explorer 7 at this stage. Internet Explorer 6 users will also notice that hover transitions are not very smooth when the mouse is moved upwards. This is due to a z-index CSS bug in Internet Explorer, which apparently has no solution at the moment.

Figure X-Rayed Box 1

Home Page (2006)

Before 2008, the old home page served as a means for throwing my previous projects into a single web site. It consisted of a graphical index page, which allowed visitors to browse a small collection of articles. Each article had a side menu bar, complete with icons that corresponded with each article.

The most challenging aspect of the project was getting the sliding CSS menus working properly on the index page. The actual concept behind the menu was inspired by demos found on the CSS Play web site. Despite the challenges, the menu was conceptually simple. Each row consisted of a HTML list, where each list item corresponded to a menu icon. The icons were also accompanied with a caption text, but they were hidden by default. The caption was only revealed when the mouse hovered over its respective menu icon

The other challenge was to get the rounded bounding box effect happening. It was based on the "sliding doors" technique, where the collapsing box uses several background images sliding under each other to give the illusion of a re-sizable box. In all honesty, the implementation of the box was not as elegant as one could hope for. The background images used for the box were rather large and wasted a lot of memory. The box seemed to have a bug too; sometimes it refused to collapse under Firefox 2.

Figure Home Page 1
Figure Home Page 2 Figure Home Page 3