Skip to content

Gmail/Twitter/OSX Style Buttons with CSS

Largely inspired by Gmail buttons, combined with Twitter’s simple but elegant buttons plus a blog post on “realistic looking buttons with CSS3“… I have attempted to make a “cheap” (minimal code) replica of said buttons.

My objective is to have similar looking buttons to put in pre-production or internal use only projects. So the problems in IE8 are negligible to me since the people I work with and I don’t use IE. :) Ultimately, when a design is fleshed out by our designer, we generally use an HTML service for production HTML/CSS which results in buttons that are a lot more complex.

The end result in FireFox:
FireFox
The end result in Safari/Chrome:
Chrome/Safari
The end result in IE8: (yes, IE is not so great)
IE8

A few problems are:

  • The elements for a “group” of buttons must have no space between each other.
  • Padding is bad for <input> and <button> elements in IE.
  • Positioning is bad for <a> elements in IE.

 

Download the files (includes the PNG background):
Download

 
And the code:

Disclaimer: HTML/CSS is my second language. I am by no means an expert.

PHP Time Based UUID Function (GUID)

In my desire to find the “right” UUID function to use in my application, I grew to like the MySQL UUID() results produced because they are partially time based. But I didn’t like that I have to make a database call every time I want a new UUID.  I didn’t find any similar functionality in PHP or from user based PHP functions, so here’s my efforts.

It clocks in at 100,000 results in about 1.36 seconds on my 2.8Ghz Intel iMac.

We produce results looking like this:

Converting Ticks to a Timestamp

I recently had to deal with a SQLite database that stored the timestamps as ticks.  Having to first research what a tick is, I created a simple function that will convert a tick value to a timestamp or MySQL datetime value since I couldn’t find anyone else who had done such a thing yet.

You can download it here or view it below.

The only tricky part (aside from figuring out what a tick is) was calculating the number of ticks between 0001-01-01 to 1970-01-01. Also of note: a tick is apparently a popular way to store date/time values for Microsoft.

Bug with Adobe Flash on Mac when uploading files to a redirected URL

Just spent almost the entire day trying to figure out what I was doing wrong when trying out many different flash multi-file uploading widgets. All of them would give me a 302 redirect http error, even when testing locally.

So after much searching and reading and studying… and finally testing this on my Windows machine (which works fine); I’ve decided this is a bug in Flash 9 for Mac.

There’s not a problem when it’s uploaded to a script directly which returns a 200 OK header response first. But when you use a framework that uses mod_rewrite for every URL, it’s not easy to get around that.

If anyone else has had experience with this I’d love to hear from you. Very frustrating! Maybe it’s fixed in the Flash 10 beta? Maybe it’s not a bug; it’s a “feature”, right?

UPDATE: I went ahead and installed Flash10 hoping for the best, but with no luck. I was able to contact someone at Adobe who told me the Flash scripts will have to be recompiled in Flash10 to see if Flash10 would help. So installing Flash10 on my computer won’t make the scripts any different.