As with most of my builds this year, our Whitechapel site uses quite a few new CSS3 properties. Lots of rgba color, @font-face for headings and navigation, some transitions for anchor elements, and I threw in a @media query to keep things under control on iOS devices.

Scott Pargett, our art director, is huge on texture, and likes to blend in lots of subtle elements that play off of each other. Transposing a Photoshop composition like this into HTML and CSS is no small feat.

For instance, breaking up the background image that is applied to the body element from the glowing magma cracks (applied to a nested div element) that appear behind the news module on the home page was particularly difficult. Multiple nested layer modes using Pass Through, Color Dodge, and Multiply were used to create the glowing effect. These elements are dependent upon one other to render properly, but must be separated out into separate images because they are not used on every page. I ended up just masking out the darker portions of the image with the brush tool. The hard part was isolating the proper layers, and hiding the ones that weren’t needed.

CSS3 really makes these texture tricks easier. Heavy use of rgba color makes the main events listing very elegant and a snap to do. Using the nth-child(even) pseudo selector on table row elements, I applied a 1px border of rgba(171, 138, 75, 0.08) that blends nicely with a rgba(0, 0, 0, 0.25) background zebra striping on the rock image applied to the body. I threw in a hover state with a transition effect to help you keep track of where you are on the wide table.

My roll in this project certainly wasn’t the most challenging. Ben Borowski, former BKWLD developer gone solo was contracted to produce a Flash animation for the header. His only asset: a flattened image of the album art. Despite this limitation, he was able to pull some amazing smoke, static, flames and throbbing effects out of it. He packaged this sucker up in a really easy to plug-in way, too. He’s always been ridiculously professional down to the last detail, even on rush jobs.

Credits

Scott Pargett, design and layout; Joel(ctrl) Fatherree, project management; Ben Borowski, Flash animation; me, CSS HTML Javasript.