pancake theorem a tech/life blog


Monthly Archives for December 2010

Using CSS border-image to make a neat wooden frame 12.21.2010

[Update 5/25/2011: Check out my border-image generator for Polaroid-like photos!]

CSS border images work in the most bizarrely beautiful way, with a single image being sliced into 9 pieces and used to surround our wonderful content with whatever we please (so long as we’re using compatible browsers-this worked for me on Firefox, Chrome and Safari on the Mac-but we can use regular borders as a fallback).

One thing I wanted to try out was making a wooden frame out of a “wood texture” I found online, and use CSS to display and easily manipulate frame thickness. It’s tedious to put frames around multiple images, especially when you want to test different thicknesses and designs. Even if you don’t want to risk compatibility issues, CSS border-images are a great tool to use when mocking up your design with more efficient trial and error whenever you are putting any image border around your content.

Here is the effect that I got:

dreamboat pete, framed

Continue reading


Making a head explode into confetti with CSS3 is actually not a cure for the common cold, it turns out. 12.14.2010

I was couch-ridden these past few days with the worst cold ever (I can judge, because I once had Mono for 2 months longer than I was told I was supposed to). It left me with little motivation and focus to do real work-also it was the weekend-so I caught up with my RSS feeds, played around with this site’s layout & style, and experimented with CSS3 to see if I can get a head to explode into confetti.

Continue reading