Because I Can!

My test pages for doodads and effect

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.

CROSS BROWSER: not checked much. Works in new chrome and firefox browsers
FALLBACKS: need some

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

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


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.

CROSS BROWSER: not checked much. Works in new chrome and firefox browsers
FALLBACKS: could use some work


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


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)


SVG Filters & CSS Filters


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


Stitched Patch

Love it, but the :before element that the "stitching" is one covers the patches' contents making it impossible to click on links.

The patch's contents need to be raised one z-index level above the stitching. (Lowering the stitching would place it below the patches' background)

Chat Bubble

I haz chat bubble!

I Also!

Corner Ribbon

Nice find. The ribbon's size is static so looks far too small on huge elements. The ribbon's text is written in the html page, but it might be difficult to edit it in some WYSIWYG site editors. Then again making DIVs seems to be difficult in WYSIWYG Browsers anyway and the ribbons cannot be added to the img tags directly because :before and :after pseudo selectors wont work with IMG.

For Sale

Puppy 1 (Male)

Sir McStudly, ESQ (Sire)
Lady Donna Giva (Dam)

Learn more....

For Sale

Puppy 2 (Female)

Sir McStudly, ESQ (Sire)
Lady Donna Giva (Dam) )

Learn more....


Puppy 3 (Male)

Sir McStudly, ESQ (Sire)
Lady Donna Giva (Dam)

Learn more....

Feature Banner

The text in this banner is built-in to the CSS. The only way to change the text is edit the CSS. A new .class (and .class:before) for each additional phrase. This would have been needed for color changes anyway.

Anders Grimsrud's Single Element Banner