AD's Blog

Today we are glad to release two useful cheat sheets that will help you quickly look up the right CSS 2.1-property or an obscure CSS 3 property. The style sheets contain most important properties, explanations and keywords for each property. The help sheets were created by GoSquared and released for Smashing Magazine and its readers.

Download the cheat sheets for free!

1. Brighten Colors

If you have a design that you just feel isn’t anything special – stop – crank up the color intensity – then reevaluate. Saturation plays a big role as far as mood goes. If you ever feel like you’re lacking inspiration when it comes to color schemes there are some great online tools, not to mention our own color series.

2. Use Monochromatic Themes Sparingly

Monochromatic themes are great, there are some great black and white designs and sometimes using only a single color makes designing easier. The point is to explore other colors as well without getting too hung up on one in particular. Branching out to more than one color palette means you can provide emphasis with something other than the lightness/darkness of a shade of blue.

3. Layout on a Grid

Here’s the deal, align your text and things will look better, not to mention it will increase your scannability. There should be some rhyme or reason to how you have placed your text, if there isn’t you risk a clumsy look which gives the impression that little thought went into it.

4. Take the Time to Polish

This was discussed wonderfully over at PsdTuts a while back but there are a few key things to keep in mind.

• Don’t be afraid to use shadows sparingly, helps fight the flat and boring look.
• 1px lines are great at clearly defining edges.
• Using faint gradients over text and backgrounds gives a subtle 3D look.

 

5. Defy Image Boundaries

Overlap your images in ways that are out of the ordinary. Wrap around banners, pop-up images, anything that shakes the normal “color inside the lines” mentality websites are so often designed around. If you are fascinated as to how to go about doing this, check out Lee Munroe’s article on Designing Out Of The Box.

6. Add Whitespace

Give your user room to appreciate what you’ve done, it will help them focus on each element and not feel overwhelmed. Think of the padding as the frame for your work.

7. Textures

Adding noise to a background, including some rock pattern that fades into the backdrop, scribbles, whatever. Do something that makes your background a piece of artwork in its own right while complimenting the foreground.

8. Strokes

Don’t have them, use them. Strokes can be used in addition to the above effects to differentiate the foreground from the background. They can be a good substitute if you are trying to avoid gradients and maintain a more 2D look.

The Wrap Up

You’re now armed with a handful of tricks that can have an positive effect on your projects. Use your best judgment, not all of these adjustments are appropriate for every project. If you’re interested in a good example of all these steps put into play, check out Marketcircle’s website.


Content Source : http://buildinternet.com

A very handy CSS command that exists is the min-width command, whereby you can specify a minimum width for any element. This can be particularly useful for specifying a minimum width for a page.
Unfortunately, IE doesn't understand this command, so we'll need to come up with a new way of making this functionality work in this browser. First, we'll insert a

Introduction

If you ever made a web site with the content in a center column and a different background for the body, or with a short lateral navigation bar, probably you experienced the problem of some elements not extending to the bottom of the browser window when the height of the content is lesser than the document area of the browser window.

For simple designs, like pages with a side navigation bar and the rest of the page for contents, faking the layout with a background image can be enough to fix the problem, but for more complex layouts real full height element usually are required. For that cases we can resort to JavaScript to perform some DOM manipulation magic.

The CSS layout

I'm going to use a layout with one fixed-width centered content area, a menu at the top of it and some decorations at the top and bottom of the content area. Let's take a look to the CSS code:

body {
padding: 0;
margin: 0;
background: White url(img/img_116.gif);
text-align: center; /* IE 5.x */
}

#menu {
width: 650px; /* IE 5.x */
width/**/:/**/ 610px;
margin: 0 auto;
padding: 10px 20px;
background: transparent url(img/sample-menu-border.gif) repeat-y left top;
text-align: left;
}

#contents {
position: relative;
width: 650px; /* IE 5.x */
width/**/:/**/ 500px;
margin: 0 auto;
padding: 50px 75px 30px;
background: transparent url(img/sample-contents-border.gif) repeat-y left top;
text-align: justify;
}

You can see a couple of examples of a page with a lot of content and a page with very few content. If you are wondering about the "/**/:/**/", it's an alternative fancy method to the box model hack.

Fixing the layout

The JavaScript fix involves getting the size of the document element and the container we want to resize (in this case #contents), and the position of this element. There is no standard DOM attribute for this, but almost all browsers support the offsetHeight and offsetTop attributes (although Opera needs a bit of tweaking for getting the height of the document).

Then we compare the size of the target element (#contents) with the size of the document minus the top offset of that element. If it's smaller, then a style rule with the proper height is applied to #contents (making a difference for IE 5.x due to its broken box model). Also, the code is attached to the onresize event for readjusting the size if the user makes the browser window bigger.

The resulting JavaScript code would be something like this:

var isIE5=navigator.userAgent.toUpperCase().indexOf("MSIE 5")!=-1;

var targetElementID="contents", targetElementStyleOffset=80;

function adjustHeight() {
if (document.getElementById) {
  var targetElement=document.getElementById(targetElementID),
      documentHeight, totalOffset;

  if (targetElement && document.documentElement.offsetHeight
      && targetElement.offsetHeight && targetElement.offsetTop) {
    documentHeight=document.documentElement.offsetHeight;
    if (targetElement.offsetHeight

Also, for making the script work in Opera 8 and Konqueror 3.4 we need to set the height of the html element to 100%:

html {
height: 100%;
}

For using the code you only need to modify two values and include a call to the function. First, you need to change the values that appear in bold in the script to reflect the following data:

1. The ID of the element that need to be extended (#contents in the previous example, so we'll use the string "contents").
2. The vertical offset generated by the styles applied to the element (margin, padding and border). In the example we have:
   

   padding: 50px 75px 30px;
   margin: 0 auto;

   so we use 80 for the style offset. This offset is not applied to IE 5.x due to its broken box model. See the notes below for an explanation of this.

For activating the script, we can use the onload event, but the best method is including also a call to the adjustHeight() function just before closing the body tag, like:

This usually works fine since all the DOM objects are already defined at that point, and it's much faster that using the onload event, because this event doesn't trigger until all the page is loaded (images and ads included). Anyway, assigning the function to the event ensures that the function will be called.

Following the next link you can see an example of the page with the JS fix applied.

The script works in Firefox/Mozilla, Internet Explorer 5/6/7, Opera 7/8, Konqueror 3.4, Safari and Omniweb (thanks to Stephen Caudill for the Mac feedback), which adds a nice 99% of the current browser pool :-) .

Notes and limitations

• If you need to apply any padding and/or margin to the container you want to resize, you have to express it in pixels, since the script needs that value for setting the proper height. Since the box model doesn't include padding and margin in the dimensions of the boxes, and I was unable to find a reliable way to get the margin and padding values from JS, this manual workaround is needed.
• The script doesn't downsize the target container, only enlarges it. Take into account that the goal of the script is getting a page that extend at least to the bottom of the browser window, not a page that fits always in the browser document area.
• The script doesn't work when the user changes the base font size in the browser after the page is loaded. Simply there is no JS event to catch this. Anyway, the next time the page is loaded with the new size, the script will work fine.