The Layout

Full Layout
View the CSS

About the Layout

This liquid layout does not include any images. Liquid layouts have the advantage that they adjust based on the size of the monitor.

This layout uses css3 extensively. Internet Explorer does not support css3 and while the basic structure works on Internet Explorer 6 and up some of the coloring and other styling elements will be different.

Text Drop-Shadow

#header h1 {font-size: 5em; text-shadow: 2px 2px 2px #000;}
#header h2 {font-size: 1.5em; text-shadow: 1px 1px 1px #999; }

I adjusted the size of the text-shadow based on the size of the font and the comparative importance of emphasizing h1 (Website Title) vs h2 (Website Subtitle, Information, etc). I also adjusted the color of the text shadow. In most designs I use a gray text-shadow (#ccc or #999) rather than black (#000). However in this case the h1 headline benefited from the extra contrast. For h2 I made the text-shadow a similar color to the text color. If your text needs a text-shadow to help it stand out and using #000 does not work try using gray or a color more similar to text color.

Remember that Internet Explorer does not yet support css3 so if the text is completely unreadable without the text shadow you need to make the text stand out using a different method, use a different stylesheet for Internet Explorer, or accept the fact that some people will have trouble reading the text.

Box Shadow

-moz-box-shadow: 5px 5px 0 rgba(72, 72, 72, .5);
-webkit-box-shadow: 5px 5px 0 rgba(72, 72, 72, .5);
box-shadow: 5px 5px 0 rgba(72, 72, 72, .5);
padding: 5px 5px 5px 5px;

I used rgba rather than hex for the box shadow in order to vary the opacity (in this case to .5). Subtly can also be adjusted by choosing a moderate gray. To make it more natural choose a color that has a similar, but lighter warm or cool tone (ie a blue-gray shadow for a blue bordered image).

Gradients

background-image: -moz-linear-gradient(100% 100% 90deg,#8B5742,#5C3317);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#8B5742),to(#5C3317));
background-color: #300;

• 90deg sets the direction for the gradient and makes it go from top to bottom.
• background-color: #300 is used as a backup for browsers that do not support css3. I also chose to use a ‘web safe’ color.
• If you want the gradient to be viewable on browsers that do not support css3 gradients you need to add background-image: url(gradient.png). I chose not to and accept that some users will see the layout differently in order to create a layout without using any images.
• You can use RGB instead of Hex for gradients.

Rounded Corners

-moz-border-radius: 5px;
-webkit-border-radius: 5px;

Slightly rounded corners are used in the navigation and in the quote in the right column because the more subtle feel of rounded corners fits the more subtle tone of the design.

Layout in Internet Explorer 8

Download the PDF

Terms of Use

• You may use the css3 layout linked to above with attribution (http://www.literaryspring.com).
• You may use up to 80% of the css without attribution.
• You may not repost this post nor distribute the PDF file. Instead please direct people to this post.