This demo displays several Cascading Style Sheet (CSS) techniques which can be used to produce top-quality web design. It is unfortunate that Microsoft's Internet Explorer browser still does not fully support CSS1, and as such, IE does not render the page correctly. Two main alternative browsers - Mozilla's Firefox and Apple's Safari do render CSS1 correctly, and it is advised that you view the page in one of them to be sure to get the full effect. There are some ugly workarounds for IE which can be implemented in some cases, but I have chosen not to in order to have readable code, and to display several techniques simultaneously. It is possible to have more than one stylesheet applied to a webpage, and you may choose a stylesheet for this page from the menu in the top-left. Select "plain" to view the raw HTML page without any CSS...if you dare!

The Curve

First, take a look at the curve in the top right. Chances are, you don't see much on the web with curves like that (unless you're thinking of different kinds of curves)! HTML is all about tables, divisions and other boxes; nothing curvy in sight. Hence web sites tend to be angular. Even digg.com's top 10 curvy websites mostly just have buttons with rounded corners. If you want a website to stand out (in a good way), it needs to be different, and curves are a good way to show off your design skills.

Go ahead and change the text size. See how it wraps around the corner? Admittedly it is not an exact wrapping for very small text sizes, but certainly good enough for design purposes. Also resizing the screen maintains the wrapping. So how is it done? As I have said, HTML does not have any curved elements available, so images are the way forward! Text may be wrapped around images by means of the very useful CSS property float. Unfortunately, the <img> tag is rectangular, so to wrap to a non-rectangular shape, the image must be broken down into rectangle strips. These strips may be floated and stacked, ensuring there is no margin around them:

The outer edges of the shape should be the same colour as the background (use web-safe colours) or transparent (use .gif or .png). The above curve is made from just ten strips, which seems quite adequate for most purposes, and the outside of the curve is the same as the background, while the inside uses the distorted background trick described below. If a more accurate wrapping is needed, more strips can be used, but care should be taken not to overload the viewer with downloads. The strips need not be consistent heights, on the contrary, more effective wrapping may be produced with tall strips for steep gradient curves, and short strips for shallow gradients. This is demonstrated in the "leonardo" style sheet, which uses thin strips at the bottom of the curve, as opposed to the "shark" style sheet, which uses even strips.

The Background

Let's have a look at the background of the "shark" stylesheet. It appears that the main content is framed within some distorted glass. Even as you scroll down the page, the distorted image stays put. This is achieved by using two images - the original background image (shark1.jpg) and a distorted version (shark2.jpg) created by using the water filter of a popular graphics package. The original image is mapped to the background of the body, and the distorted image to the main content div. The background should be fixed so it doesn't scroll with the other content, and positioned at 0,0. This is relative to the viewport, not the element, which is why the images overlap perfectly, yet the distorted image is only visible where it intersects the division. The following code achieves this:

Using that code in the body {} style and the same code, with the alternate background in the div {} style acheives the desired effect. It is wise to include a background colour attribute, similar to the colour of the background, in case the image is not loaded and the text becomes invisible. Also make sure the background images cater for larger screen sizes.

The Cutaway

At the top left of the content box, there is a cutaway section with an image in it. Note that in IE, this may not be correctly rendered. The cutaway is comprised of a png image with transparency within a div. The division has the background image set as above to give the effect of an irregularly shaped content box. If you have no background image, you may simply set the background colour to that of the body. Now here's the clever part: The cutaway div is inside the content div, and yet you don't see the outer border around the cutaway (unless of course, IE has put one there)! This is because the margins on the top and on the left are set to negative values! Browsers can cope with this and the cutaway will cover the corner of the main content div. Finding the correct value for the negative margins is fairly simple: First, find the padding used in the content div, then add the border width. So in this example there is a 3px border around the content, and inside padding of 10px:

The float is so that the text wraps around the cutaway. The right margin should be the same value as the padding (here 20px) to keep the same padding on the inside of the cutaway, but the top and bottom margins might require some adjustment for the best presentation. The left margin is equal to -(padding + border-width).

The Javascript

Dynamically changing stylesheets is possible in some browsers, but not all. However, it is possible to change stylesheets by javascript, which is what the selection box in the top left does. Adding stylesheets to the selection is as simple as placing the link tag in the head with the relevant reference to the css script, ensuring that the stylesheet is named. The javascript obtains this information and assumes all the necessary images are located within a folder of that name within the images folder. When the stylesheet is changed, all the image sources are dynamically changed, and all other stylesheets are disabled. I will not go into how this all works, but it is possible to view the source and work it out if you know javascript.

It is worth preloading the images used in the stylesheet if dynamic changes are required. Otherwise, the browser will probably see an intermediate stage using different images, and in the worst case, the browser will not resolve all of the images, so the page will be left with part of the old stylesheet applied. This is especially noticeable when using the curve technique or other techniques with lots of images. To preload images, you simply need to create an array object to hold the images, then for each image, set an array item to be a new Image() object, and assign the src attribute so that the browser caches the images.

This will enable the smooth transition between stylesheets. Since the script is run in the head section of the document, the page will not load until the images are cached, so make sure none are missing!