Ausblenden:

var ausblenden = new Fx.Style('id-der-box', 'opacity', {duration: 500});  // Effekt initialisieren
ausblenden.start(1,0); // Ausblenden starten (von 1 (sichtbar) bis 0 (unsichtbar))

Größe ändern:

var resizebox = new Fx.Style('id-der-box', 'width', {duration: 500});  // Effekt initialisieren
resizebox.start(0); // Größe ändern starten, vom aktuellen Wert bis 0

Danach blende ich die Box noch komplett aus:

$('id-der-box').setStyle('display','none');

Jetzt stand ich allerdings vor dem Problem, das die mootools nicht mit der Ausführung des einen Effekts warten bevor der nächste gestartet wurde. Die Folge war, dass das komplette Ausblenden sofort zugeschlagen hat ohne die beiden anderen Effekte abzuwarten. Nach langem erfolglosen suchen in der Dokumentation und im Forum von den mootools habe ich mich dazu entschlossen die onComplete-Funktion zu nutzen. Durch die Verschachtelung sicher kein eleganter Weg, aber es Funktioniert erst einmal:

var ausblenden = new Fx.Style('id-der-box', 'opacity', {
duration: 500,
onComplete: function () {
// hier jetzt den 2. Effekt initialisieren
var resizebox = new Fx.Style('id-der-box', 'width', {duration: 500});
// .. und starten ..
resizebox.start(0);
}
});  // Effekt initialisieren
ausblenden.start(1,0); // Ausblenden starten (von 1 (sichtbar) bis 0 (unsichtbar))

Das ganze habe ich in einem Demo zusammengefasst.

Wo aber bei der (Neu)Gestaltung anfangen?

Die CSS Intensivstation und Layout Gala geben einem ein solides Grundgerüst für mehrspaltige CSS Layouts. Dies ist zwar noch keine komplette grafische Gestaltung, aber kann immerhin etwas Arbeit abnehmen.

Ein weiterer Schritt sind Open Source Web Design, Open Source Templates, Open Designs und Open Webdesign, welche Templates verschiedenster Authoren zur freien Verwendung zum Download anbieten. Vorschau und Kommentierung sind bei allen Templates möglich. Die Qualität reicht dabei von sehr einfach und schlicht bishin zu sehr ausgefeilten Templates. Auch sehr Vielseitig ist CSS Zen Garden. Hier erhält ein und die selbe Seite durch die Verwendung verschiedener CSS ganz unterschiedliche Aussehen. Auch hier kann man die verwendeten Dateien herunterladen und weiter verwenden.

Sucht man nur Inspiration, kann man sich diese auch von bestehenden Websites holen. Große Firmen geben hier oft gut umsetzbare Ideen, aber auch viele kleinere geben sich um so mehr Mühe dem Besucher grafisch einen Leckerbissen zu bieten. Auch hier haben sich einige Seiten diesem Thema angenommen und bieten einen Überblick und Links zu diesen oft sehr Aufwendig gestalteten Seiten an. One Pixel Army und Web Creme bieten diese in Blog-Form an, andere Seiten wie CSS Remix und Best Web Gallery in Form einer Art Gallerie, wie man sie von Fotoalben her kennt.
Smashing Magazine widmet sich ein einem Artikel gar einem ganz eigenem Thema der Webseitengestlatung: dem Footer-Bereich.

Aber auch immer mehr Firmen, die mit der Gestaltung von Webseiten Geld verdienen, öffnen sich der Web-Gemeinde. Templaterie z.B. stellt aktuelle Projekte und Entwürfe, sowie einige Tips rund um die Web-Arbeit in ein eigenes Blog. Aber auch ganze Templates werden von Firmen wie Studio7Designs oder Six Shooter Media zur privaten Verwendung angeboten.

Für wen eine aufwendige Webseitengestaltung allerdings nichts ist, kann sich auch den oft sehr gut gemachten vorgefertigen Templates für Blog- und CMS-Systeme bedienen. Hier wird man auf der Seite den Anbieter meist sehr schnell fündig. Hier fehlt zwar der Anreiz des eigenen, individuellen Layouts, allerdings spart es einem sehr viel Zeit und Mühe und man muss sich nicht in die Programmierweise der Templates einarbeiten.