Pleistocene Playground

Fixed Header and FooterLayout re-built using display:tablesand adapted to accommodate the Animated Background-Misty Forest. A basic horizontal Navigation has been added (doesn't display child menu) but a flashier navigation would suit the theme much better and is being worked on.

This page also uses FitText (jQuery) in the header to shrink the #sitetitle when the width demands it. Adding table-layout:fixed to the element with display:table was required for this work properly.

DEMO PAGE: DISPLAYTABLES.HTML (no sub-navigation script)

A little un-styled menu is at the bottom of the screen.

DEMO PAGE: DISPLAYTABLES-CSSNav.HTML (css only; limited)

Not bad but the only way to close the menu again is to click the leaf. I am afraid people are no longer used to doing that making this a UX problem. On the other hand you can go to a page and then come back and find the menu is still open. That might be a good thing.

DEMO PAGE: DISPLAYTABLES-jQuery.HTML (a lightly modified bigSlide.js)

Animated Background - Misty Forest (CSS)

I have also done up an animated green mist. Obviously it does not NEED to be animated but it is a lot more impressive this way.

Still working on blending everything (have one straight line left to eliminate). And have not checked the effect on other computers. It is possible that the gentle swirling effect is lost with different video settings.

DEMO PAGE (WiTH CSS): GREENMIST.HTML

Fixed Header and Footer

I have used the content from an existing site (The Dire Wolf Project) to provide real challenges.

This page also uses FitText (jQuery) on fixed and scrolling elements in the header to shrink them when the width demands it (still working on sizes/proportions)

No menu as yet Has a (lightly modified) bigSlide.js

DEMO PAGE: mDWP.html

Animated Background - Cloudy Sky (CSS)

Fluffy clouds drifting along the top of the page using CSS only. (as seen on this page)

INCOMPLETE. Works in new chrome and firefox browsers but one other new browsers does not constrain the clouds properly. Need to look into one day.

I have applied the animated clouds to Text as well (chrome only)

DEMO PAGE (WiTH CSS): CLOUDS.HTML

CSS Ribbons and Banners

DEMO PAGE: RIBBONBANNERS.HTML

SVG Filters & CSS Filters

fractalNoise

SVG PATTERN: 'WHITE CARBON'
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNiIgaGVpZ2h0PSI2Ij4KPHJlY3Qgd2lkdGg9IjYiIGhlaWdodD0iNiIgZmlsbD0iI2VlZSI+PC9yZWN0Pgo8ZyBpZD0iYyI+CjxyZWN0IHdpZHRoPSIzIiBoZWlnaHQ9IjMiIGZpbGw9IiNlNmU2ZTYiPjwvcmVjdD4KPHJlY3QgeT0iMSIgd2lkdGg9IjMiIGhlaWdodD0iMiIgZmlsbD0iI2Q4ZDhkOCI+PC9yZWN0Pgo8L2c+Cjx1c2UgeGxpbms6aHJlZj0iI2MiIHg9IjMiIHk9IjMiPjwvdXNlPgo8L3N2Zz4=");