Freelance Web Development

I had a long time gripe about the DigitalColor Meter that ships with Mac OS X. It would be nice to use it for web development when you want to copy a color from an image to make text of the same color with CSS. But the way this utility works drove me nuts…

Setting the pulldown to “RGB as Hex Value, 8-bit” sounds right. Then put the aperture over the color you want, hit command+shift+c and you have the hex rgb in your clipboard. Nice! So go paste that into your css editor and you get:

Note the quotes

So now I have to go in and remove the quotes manually each time. But then, it still does not work when you view the web page. Turning on hidden characters reveals…

What a mess

“… just… like… WHY, Steve?” An otherwise nice utility is a real pain to do anything useful with.

Well, tonight I found a good workaround for this. In the preferences, turn on “Drag in swatch drags out the color”:
Then, Instead of command+shift+c, do a command+shift+h. That holds the color instead of copying it:

Then drag that chip in the middle to where you want to copy the hex…

And there you have it:

Now… as to why it is holding F39200 but dragged F88D00? I have no idea! Comments, suggestions, etc are welcome.

Mac OS X CSS, DigitalColor Meter, Mac OS X

Sometimes a client will ask me to make a styles upload form, and of course modify the ugly ‘Browse…’ utility. But we’re very limited to styling upload forms. We cannot rearrange the buttons, nor change the ‘Browse’ label. Even with CSS the browse button and the file name field act… funky.

So I’ve come up with a way to make it appear as if we’ve styled the ‘browse…’ button and file name field… with only CSS. Since I did not specify any widths in pixels, we will have a nice cross browser solution. Then by adding some javascript we have total control of the file name, and even add an icon.

And we’re going to make it so that the fancy form only shows in a modern browser (Safari 1.0+, Firefox 1.0+, Internet Explorer 5.5+/Win, Opera 8+). It will degrade gracefully when images, JavaScript, and/or CSS are not active. The markup validates to the XHTML 1.0 Transitional DOCTYPE.

Fancy Upload

Live Demo

I’ll have this up on github shortly!

Fancy Upload CSS, file upload, JavaScript