Only supported in Webkit and Gecko, at the moment. Not available in Opera or IE.

section#mysection {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-width: 15em;
-moz-column-width: 15em;
column-width: 15em;
-webkit-column-gap: 5em;
-mox-column-gap: 5em;
column-gap: 5em;
-webkit-column-rule: 2px solid #ff0000;
-mox-column-rule: 2px solid #ff0000;
column-rule: 2px solid #ff0000;
}

Cannot:

• select a given column
• size columns differently
• specify percentages

column-rule property allows for border type effect between columns.

Text Shadow

text-shadow: 1px 1px 5px #BCBCBC, -1px -1px 3px #FF0000;

In this example, we have two shadows separated by commas. The first element is the horizontal offset, the second, the vertical offset; the third is the blur; and finally, the colour.

Text Stroke

Only available in Webkit. Draws a border around the text.

-webkit-text-stroke: 1px #000;


Also comes with text fill:

-webkit-text-fill-color: #fff;


This overrides the color attribute in Webkit.

RGBA Colour Opacity

Same as rgb() colour, but adds a fourth parameter for opacity. The opacity parameter is between 0 and 1, inclusive; where 0 is fully transparent, and 1 is fully opaque.

background-color: rgba(255,255,255, 0.5);

rgba() is available in all standards compliant browsers, and IE 9+. There is a workaround for dealing with the wrong-headed browsers:

color: #aaa;
color: rgba(200, 200, 200, 0.5);
As you can see we declare two values. In the case of standards compliant browsers, the rgba() declaration, which comes second, overwrites the first, and we get the benefit of the transparency. For the ludicrous browsers, the second declaration will be ignored, and they get the first declaration color.

We can also use a transparent png for backgrounds.

background: transparent url(bg.png);
background: rgba(255, 255, 255, 0.5);

This will not work with IE6, but anything after that will be OK. I encourage dropping support for IE6, to motivate individuals and corporations to upgrade, or better yet, switch to standards compliant browsers.

Target Selector

Applies styling when the selector is in a target state. Which is to say it is the target of a hash mark in the URL.

#container:target {
  background-color: #f6f6f6;
}

Adjacent Sibling Selector

From CSS2:

h2 + p {}
Will select the second element when it immediately follows the first. (Reference)

General Sibling Selector

From CSS3:

h2 ~ p {}
Selects all p’s that share a parent with the h2. (Reference)

The time has come, the walrus said, to sit your fat ass down and learn TextMate. How can you code if you don’t know your tools? So, for now, just a few links I think I may want to keep around.

Multi-Stroke Key Bindings
Revert To Default Bundles
GetBundle