The Design Idea

CSS box-shadows can be applied to the document body using before and after pseudo elements. This creates the illusion of having the page contents scroll beneath the edges of the top / bottom page boundaries. Taking that idea one step further, why not employ this technique for another effect. Maybe with a familiar object like the Tardis? The idea could be used for a blog, a website, or maybe a tumblr dashboard, just to name a few.

The Components

The Tardis consists of five parts: three parts image and two parts code. The graphics consist of a Tardis dissected into three parts: Top, sides and bottom. The graphics could have easily been created with appropriate edges to provide the shadow effects. Shadows created with CSS were used instead. The code consists only of CSS and HTML; no scripts were used.

Noteworthy

Box-shadows were used for the top and bottom of the booth. This gives the illusion of post content entering / exiting a lit area.
A gradient background was used inside the booth to give the illusion of depth. Once again this could have been done with a graphics program. Instead, CSS was used as both an exercise and for future versatility.
The bottom of the booth is a fixed footer. The sides should expand / contract depending on the height of the browser window. Resize your browser to test the action.

Drawbacks

All components and content are fixed position and fixed width. Although this may not raise any alarms, it is definitely not the direction layout design is heading.

The excess amount of vendor specific CSS required for cross-browser compatibility becomes very evident when applying techniques designed to replace graphic effects. Welcome to the modern age Tower of Babel.

Probably the biggest drawback is the area above the Tardis. Since the post content has to appear to exist only inside the booth, the background behind the Tardis needed to be set to a solid color. My brain is working on that...

Compatibility

Chrome - Check
Firefox - Check
Internet Explorer - What the...?
Opera - Check
Safari - Check

That's all I have, for now!

Example Text

Lorem ipsum ellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

Another Example

Lorem ipsum ellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

Final Example

Lorem ipsum ellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.