Full size preview
Shades of Grey Layout- right click save

About the Layout

Note: Internet Explorer users will not see the text shadows, box shadows, but minus these small differences the layout has been tested and works in Firefox, Safari, and Internet Explorer 6.0 and above.

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.
• Layouts have a clean design in order to allow for the most customization and not overwhelm the content.
• Credits for the images are included on the layout.

Full size preview
Elastic CCS3 Layout- right click save (see no below)

About the Layout

Note: Internet Explorer does not yet support css3 drop shadows. Otherwise the layout works in Firefox, Chrome, Safari, and Internet Explorer 6.0 and above.

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.

Full size preview
Elastic CCS3 Layout- right click save (see no below)
Elastic CCS3 Layout with IMAGES- right click save (see note below))

About the Layout

Note: Internet Explorer does not yet support css3 gradients, drop shadows, and other components of the layout above. The first download is for a layout that will, thus, look significantly different in Internet Explorer. The second download is for a layout that uses images for gradients and, thus, the layout looks similar in Internet Explorer to the way it looks in standards compatible browsers (ie Firefox, Safari, Opera, etc)

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.

The CSS listed below is a slight variation of the CSS I used for the quote box in this layout. As you can see the CSS that controls even a small part of the design can become quite lengthy. When you add in the rest of the typography and structure and the CSS can look overwhelming.

p.quotebox {
color: #ffc;
font-size: 3em;
font-family: Baskerville, Garamond, Palatino, Georgia, serif;
font-weight: bold;
text-align: center;
text-shadow: 2px 2px 2px #000;
background-color: #300;
border: solid 1px #333;
-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);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 5px;
}

Break It Down

• CSS for the text color color: #ffc;
• CSS for the font-size: font-size: 3em;
• CSS for the font-family: font-family: Baskerville, Garamond, Palatino, Georgia, serif;
• CSS for the font-weight: font-weight: bold;
• CSS for aligning text: text-align: center;
• CSS for the text-shadow: text-shadow: 2px 2px 2px #000;
• CSS for the background color for the paragraph: background-color: #300;
• CSS for the border around the paragraph: border: solid 1px #333;
• CSS for the text shadow: text-shadow: 2px 2px 2px #000;
• CSS for the shadow around the paragraph box:
  -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);
• CSS for making rounded edges around the paragraph box
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
• Code for the padding between the text and the edge of the box padding: 5px

Only Use the CCS You Really Need

Taking Out the CSS3

If you need to design a site that looks the same in all browsers you need to take out the CSS3 which is not yet universally supported most notably by Internet Explorer. Below is the CSS without the CSS3. While CSS3 has some wonderful uses the fact it exists does not mean one always needs to use it. Look at your design and decide whether it really does need a drop shadow for the box, a shadow for the text, and rounded corners. Having made quote boxes before in some case the CSS3 helps. In other cases a drop shadow can easily be eliminated without sacrificing clarity and for some designs sharper edges look better than round ones.

p.quotebox {
color: #ffc;
font-size: 3em;
font-family: Baskerville, Garamond, Palatino, Georgia, serif;
font-weight: bold;
text-align: center;
background-color: #300;
border: solid 1px #333;
padding: 5px;
}

Reevaluate the Necessities

• Does the font need to be bold or is the font you are using thick enough that you can remove font-weight: bold
• Should the text be aligned to the center? Sometimes in narrow columns left aligned text is better and, thus, you can leave out text-align: center.
• If all you want is a drop quote you do not need background-color: #300; or border: solid 1px #333;
• For the box shadow in the original code, rgba was used in order to adjust opacity. If you prefer hex and are not adjusting opacity then use hex.

In Conclusion: Other Methods to Handle CSS

Often the best design or the best design for an element is complicated and takes a substantial amount of CSS to accomplish. There are a lot of websites and it pays (often literally) to stand out. However, especially when you are starting out vast amounts of CSS can be intimidating. Comments in the CSS file help and the more experience you have the more you can easily find the specific CSS you needed. Clearly laid out CSS also helps. However, even with these additional tricks for both the design itself and your own sanity in dealing with the CSS it is a good idea to break down the CSS you have and only use what you actually need.

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.

Border Properties

• border-width: This is the width of your border (ie 5px)
• border-style: none (no border), solid, dotted, dashed, double, groove, ridge, inset, outset
• border-color: You can use a color name, hex value (ie #369), or RGB value (ie rgb(0,0,255))
• To make a border with different styles on each side use: border-top-style, border-right-style, border-bottom-style, border-left-style

Thick Brown Border

The CSS

img.nameofclass {
border: 3px solid #300;
padding: 5px;
background: #630;
}

The xhtml:

Blue Double Border

The css:

img.nameofclass {
border: 5px double #399;
padding: 3px;
background: #9cc;
}

The xhtml:

Orange Inset Border

The css:

 img.nameofclass {
border: 5px inset #fc6;
padding: 3px;
background: #c30;
}

The xhtml:

Green Ridge Border

The css:

img.nameofclass {
border: 8px ridge #cf9;
padding: 2px 2px;
background: #063;
}

The xhtml:

Blue Variable Border

The css:

img.nameofclass {
border-top: 8px groove #399;
border-right: 5px solid #063;
border-bottom: 8px groove #399;
border-left: 5px solid #063;
padding: 2px;
background: #fff;
}

The xhtml:

How to use the code listed above

• Replace “nameofclass” with whatever name you want to use for the type of images you want to have a particular border. If you wanted a certain border for all pictures of buildings you might use img.buildingpics. It is best not to use the name of the picture (ie TowerofLondon.jpg) unless you will only be using a specific border for one picture.
• “Name of Image” is usually the name of the file or a very brief description of it (ie TowerofLondon)
• The xhtml will be used in the part of your document where you want the image with the border. On this page I used the xhtml in the body of the document in div with the main content just below the h2 heading.
• The CSS portion will go in your stylesheet.