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.
>
Effects
-
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.
Utility
-
Palette Test
-
A javascript-powered layout that will change color
based on your input to test palette choices for
web site layouts.
Experimental Layouts
-
Plaine
-
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.
-
Nausicaä
-
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.
-
Bob
-
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
-
Urban
-
Three columns where the main column is the far left and the two
right columns are much narrower.
-
SDD
-
Originally intended for a blog, this layout makes
heavy use of images and CSS3 gradients to provide
texture and atmosphere.
-
Rowdy
-
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.
-
Dial
-
Two columns with a top-to-bottom
page frame and gaps between columns.
-
Cameo
-
Very unfinished.
-
University
-
Just a masthead and horizontal menu.
Tutorials
-
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.
Misc
- 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.