Deep in the depths of Castle Ruthsarian is this, the chamber of experimentation. Here ye shall find many examples of CSS black magicks in their most raw and hiddeous form. Those who venture forth dare not expose such experiments to the public eye. Such disregard for the black arts may expose many great and terrible page breakings; let ye be warned!

Experimentation Chamber
Your are standing in a dank chamber deep within Castle Ruthsarian, with a boarded side door.
Ther are many dubious experimentations here.



Wrap-Around Box
A box that appears to horizontally wrap around it's parent. 100% CSS.
Connected Drop Shadow
A box with a drop shadow with the shadow directly connected to create the appearance of a 3-D box.
Responsive Layout
A layout that changes shape to best fit the available viewport width. In other words, a regular web site that turns into a mobile-friendly web site without any need for a second web site or javascript. 100% CSS.
Password Masking
Entering text into a password box does not provide any feedback to the user that they've entered the key they intended. This can lead to users inputting the wrong password and getting frustrated because they think they've done it correctly. This explores alternative options to the password box that would help alleviate this problem.


Palette Test
A javascript-powered layout that will change color based on your input to test palette choices for web site layouts.

Experimental Layouts

A minimalist approach to markup. The goal of this layout is to achieve as much as possible, visually, without any markup used only for visual formatting.
The goal here is to develop a 3-column layout that has gaps between each column. Each column also needs to have a border around it and it must be able to have separate background colors for each column, and the columns must carry the full height of the web page regardless of which column is tallest.
Started out as an experiment in overlaying borders of varying sizes to eventually achieve a blurred-edge. It has since changed into a layout with a thick border that has a smaller border around the thick border, both on the inside and outside of the thick border.
Diane : One
A fixed header and footer with the area inbetween scrollable content.

Abandoned/Unfinished Layouts

Three columns where the main column is the far left and the two right columns are much narrower.
Originally intended for a blog, this layout makes heavy use of images and CSS3 gradients to provide texture and atmosphere.
A wholly CSS driven horizontal menu that includes angled lines between each menu item created just with CSS.
Flux & Puck
Flux and Puck are the same layout. Puck represents an earlier point in the development process, but could be used to progress in a direction different than Flux.
Two columns with a top-to-bottom page frame and gaps between columns.
Very unfinished.
Just a masthead and horizontal menu.


IE Boxing
An exploration of a rounding error in IE that occurs when floating multiple elements next to each other with the intent that the total width of these elements be 100% of the available width. Under certain conditions, the right left most box will be pushed down despite the widths being properly set. A workaround is offered.
IE/Mac Version Hack
A CSS hack that allows you to target CSS at IE/Mac 5.0 and 5.1 separately.
Wide Images
Images inside fluid layouts can create problems if they are too wide for the available width of their parent container. This explores one possible solution for using wide images inside a fluid layout.


Equal Height Columns With Borders
Equal heigth columns with background colors and borders with a gap between the two. All done through CSS without use of JavaScript of images.
IE Sucks
A rant on the state of Internet Explorer's layout engine between the time that IE7 and IE8 were released. IE8 and IE9 have since addressed these problems.