I’ve always been impressed by how generous Reagan is with his time and talent. Over the past few months, he’s helped Dave and me beef up our own identities and personal projects, leaving his own site on the back burner- until now! His new portfolio site, powered by Cargo Collective, features a great set of selected works that provides a nice look into his personal style and capabilities. I’ve dropped in some of my favorite items below.
One thing I’ve revisited a number of times since we launched the latest installment of The Many Faces Of… for the Goonies is the Chutes and Ladders style iPad Game. Reagan designed it and Dave built it with jQuery, JSON and CSS3. Similar to the way iBooks saves lots of shelf space on books, I wonder if the iPad, or a larger coffee table version, could save drawer space for board games… could be pretty cool.
We were fairly surprised and even more excited to see that Paravel was nominated for a Net Award for Design Agency of the Year along with 24 other excellent teams. I’d like to extend a big thank you to .Net Magazine for their continued support and to Dave and Reagan, who have devoted more blood, sweat and tears to Paravel than I could have ever expected.
Early in the Summer I had a series of conversations with Phil Coffman about side projects- how they’ve benefitted us, how to balance them, and how much fun they are. Taking the initiative, Phil gathered a group and submitted a panel discussion for SXSW 2011. In addition to Phil and myself, Yaron Schoen, Noah Stokes and Sam Brown have signed on with Josh Brewer serving as our Moderator. Please do check it out. If you think it’d be worth attending, vote it up!
Originally when I CSSed the round avatars on the DesignSwap comments area, I used the -webkit-mask-image property. I was really proud of how neat and effective this was until I realized you could apply border-radius to an image directly. To achieve a round avatar with a 2px beige border, I applied the following CSS to an avatar loading within a div class called avatar-frame.
I love this solution. It yields rounded avatars with no additional images or scripts loading, just an extra line of code. The -moz prefix is disabled here because Firefox doesn’t support this, though they really should. CSS for -moz-border-radius of course works for the div, but not the img. On the bright side, it degrades quite nicely into a square avatar with a 2px border.
Opera is another matter altogether. Because it utilizes the general ‘border-radius’ CSS and doesn’t apply it to an img, Opera displays a square image with a rounded border. I’d say this is a great example of where browser-specific prefixes come in handy. It’d be nice to disable this for Opera until it works.
After really enjoying Inception over the weekend, I thought I’d make a graphic featuring 3 of the totems that the main characters carry around to keep track of whether or not they’re dreaming. My initial Dribbble shot has evolved into this tribute poster. While I was at it, I threw together a few desktop wallpapers for kicks.
[After really enjoying Inception over the weekend, I thought I’d make a graphic featuring 3 of the totems that the main characters carry around to keep track of whether or not they’re dreaming. My initial Dribbble shot has evolved into this tribute poster. While I was at it, I threw together a few desktop wallpapers for kicks.
FontShop has done a lot for web fonts. Their latest contribution, FontFonter, lets you test an ever-expanding set of available fonts on any site you wish. Aside from being the easiest & lowest commitment way to test web fonts, it will come in handy here at Paravel, letting us mix & match web type on the fly.
I use the column-count & column-gap property on the search page of this site to break my Tags list into 4 columns. Because the content is dynamic, I couldn’t just hard code each column, and I didn’t want to waste kilobytes on running a WordPress plugin to achieve an effect that was possible with a single line of CSS. Currently, only firefox and webkit browsers supports this feature and they all seem to do it differently. I’ve noticed that Mobile Safari, Safari and Firefox each render the exact same column-count CSS differently.
My HTML is simply a dynamic unordered list and my CSS looks like this:
Note: the Opera and universal code is future proofing & wishful thinking.
Admittedly, this property needs quite a bit more hashing out before I’d recommend implementing it on the home page of a client site. That being said, I’m happy to continue to use this for my Tags list. It’s lightweight, efficient and a constant reminder that the web is ever-evolving.
I did my fair share of testing this site on an iPad during development. In most cases, the version of Mobile Safari found on the iPad renders pages like any other standards-based browser. Only when I got to native UI elements like search boxes & text fields did I notice an inconsistency. A pre-set styling was being applied in the way of an inner shadow to text input fields and a gradient overlay to search / submit buttons, which also got rounded corners.
After picking through Safari’s CSS Reference I found -webkit-appearance, which changes the appearance of buttons & controls to resemble a native apple UI. I added this code for comment & search forms to retain the basic style I defined in my CSS: -webkit-appearance:none;
There are quite a few parameters for this property that you may want to take advantage of and/or watch out for. Also, If you simply wanted to disable inner-shadows of input fields you could just use -webkit-appearance:caret;.
Originally when I CSSed the round avatars on the 
