HTML, CSS, and JavaScript Design Notes

Picking Colors

Guessing the RGB hex values for the color you're looking for on a page is no way to go. Make the web work for you and use a color picker. My favorite html color picker.

Centering in CSS

Centering is easy in CSS for inline elements, but not for block-level elements. Below is an example of inline centering.

This text is part of a paragraph with the text-align property set to center.

So far so good. However, what happens to block-level elements in the context of "text-align: center", like a table, within a div?

Yarg! What happened? Simply put, the text-align property doesn't apply to block-level elements (unless you use Internet Explorer, but IE is doing it wrong in this case).

How would we fix the above example? The answer is margins, and widths. Our first step is to set the width of the div tag to be the length of the page.

Next we set the left and right margins of the table to be auto.

Put it all together and you have...

Rounded Corners

The biggest stylistic shortcoming of the border-box model of HTML and CSS is everything needs to be in a boxy grid. Basically, one can think of an HTML document as a giant spreadsheet with a lot of leeway regarding columns and rows. If you want curves or diagonals, you have to fake it, either by using images, or by piecing a bunch of boxes together in clever ways. To demonstrate this, I'm going to take a look at how rounded corners have been done in HTML documents.

The technique I'll be illustrating is sometimes called the Sliding Window method. It involves using a six cell table with four corner images used as background images in the corner cells. The middle cells on the top, left, right, and bottom slide or grow to fit the needs of the content of the very middle cell.

First you need to make a corner image (or steal one). I made the one below using gimp and the ellipse selection tool. I am by no means a professional graphic designer, but anybody should easily be able to create their own (possibly even in windows paint) in case you can't find one.

Rotate around the above image until you have four

Place them in a tabular grid of cells with background images set. I've kept the border and padding attributes so the grid can be seen in the example below.

Below is the what it should look like once you've removed the border, cellpadding and cellspacing values of the table.

As can be seen, I didn't quite get pixels in the corner image aligned right to the side of the middle cells and so it looks like something sticks out. That helps demonstrate some of the disadvantages of doing rounded corners in this way.

There are more advanced techniques that involve only CSS rather than background images. Some even use Javascript to dynamically setup rounded corners on existing HTML. Rather than re-implement these myself, I'll link to them instead.

The future of doing rounded corners correctly will be via the CSS 3 border-radius property. The below is one div with it applied. Unfortunately, if you aren't using a very modern browser (such as Google Chrome), the below example will still just look like a sharp edged box to you.

This demonstrates the border radius property. This cell is a single paragraph tag. However, it currently only works on Google Chrome.

Gradients

Gradients are a popular way to add style to a web page. Unfortunately, the only cross browser compatible way to do them is still background images, but that's changing slowly. Below are some CSS gradient examples for mozilla and webkit based browsers.

Animation with jQuery

Javascript allows one to dynamically change the style properties of the document tree. Done in clever ways with timers, this can create animation effects. Crafting these effects by hand is arduous. The jQuery javascript library, however, makes this much more expressive and simple.

The above code only took five lines of Javascript and only three of those lines truly contained content:

  $(document).ready(function(){
    $("#slidetitle").click(function(){
      $("#exampleslide").slideToggle();
    })
  });  

In plain English this reads, "Please, jQuery, when the document has loaded, add an event handler to the tag with the id 'slidetitle' so that when the mouse is clicked on the box generated by this tag, the paragraph with the id 'exampleslide' is animated into or out of view."