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

Regular readers of this blog will know I’m a huge fan of Firefox (the ultimate browser for developing web apps) and Sitepoint (a set of wonderful resources for web developers and designers).

What makes Firefox the best tool for web developers (and others)? It’s the extensions. And now, for a limited time, Sitepoint is offering a middlingly useful extension, CodeBurner for Firefox, which gives you access to their wealth of HTML and CSS reference material, right from your browser. This used to be an addon to the awesome Firebug extension, but now is stand-alone.

To celebrate the release of this new version of CodeBurner, Sitepoint are giving away a PDF book on developing Firefox extensions. This is supposed to be a limited time offer (30 days) so hurry up! (On the other hand, once you give away a PDF for free, it’s kinda hard to start charging for it.)

Sitepoint has a tremendous library of books for sale, and they’ve really hit a sweet spot in the market: I’ve purchased nearly every title they’ve ever published. Their books are well written, professionally edited and delivered in a timely fashion. Their customer service is also beyond reproach. I once complained a book had arrived slightly damaged, and received another copy a few days later. Top notch.

OK, gotta go now. I’m keen to get into developing my own FF extension!

I spent most of last night viddying Google Tech Talk videos on YouTube. They’ve got terrific stuff there. Too bad about the res.

One of the videos was about , a commercial product which takes HTML/CSS and converts it to a paginated PDF, suitable for printing in book format. (Yes, a dead tree type book.)

Awesome. Except for the price.

Too bad, too, because I could really use something like this. A couple of years ago I did a project for a company called CityFax, in which we had to produce, and email out documents in PDF format. We used a very serviceable PHP library to generate the PDF pages; but it was grueling work putting them together. Why learn a new language if you can do the same thing with the tools you already use every day? (i.e. HTML and CSS)

So I went in search of an open source version of this tool. And sho’nuff my brothers, it’s out there. XHTML2PDF, is an open source, dual license project which produces PDF’s for a living. It’s written in Python, but has command line versions for OS X, Linux and Windows.

Next time I need to generate a PDF, this is my go-to tool.