Designer Slash Hacker

I spent last night hacking away at my parked page at I added a bunch of stuff to make it a little more interesting. FYI, I’m not a developer, so this was a total hack based on a bunch of stuff I found on the web. Check out some of the sources below…

Random background image with PHP (Get Code).
In order to randomize the background, I used a PHP script. Then I changed the CSS to call the .PHP file. Then I set up an image folder, and point the PHP to it. I dropped about 15 optimized images, and viola! Randomized background images.

Full screen background image with CSS (Get Code).
In order to make the screen scale perfectly to the browser size, I used some CSS that updates the background on the fly. As a bonus, the site always shows a full image for any screen (even iPhone/iPad).

Custom AddThis button (Get Code)
I used AddThis for sharing/bookmarking, and simply transformed some text into a custom button. To make the menu appear beneath the text perfectly, I added a custom offset. The best part about AddThis is that it has a special custom interface for iPad and iPhone… so my site looks great on mobile devices.

Custom Twitter feed (Get Code)
I added a custom Twitter feed that pulls in my last tweet with a json call. I was surprised how simple it was to do—it’s pretty much plug and play.

IE browser tested
Foo checked out my site this morning and noticed that it didn’t work in IE. My CSS3 alpha background was gone… So instead, I stretched a transparent png as the background, so that it works in IE.

Centered DIV (Get Code)
In order to center the DIV (the black box), I borrowed a little javascript. Now the DIV is centered horizontally and vertically.

Custom Font-Face (Get Code)
I wanted to try loading in a custom font, “Museo”. You basically need to gave the TTF, EOT and SVG and link to them with CSS.

One thought on “Designer Slash Hacker

Leave a Reply

Your email address will not be published. Required fields are marked *