I’ve been meaning to post a quick thank you to Gene Crawford and the rest of the fellas at unmatchedstyle.com for a while. They recently had me on one of their designer chat sessions to talk about Paravel and ye olde blog. It’s always an honor to see some of the bits & bytes we’ve worked on covered on their site, and this was no exception. After the session, I had the opportunity to talk with Gene further about what UMS is all about and was really impressed to hear about their dedication to the design community and how they strive to go the extra mile in considering all the tiny details that make websites both attractive and usable. UMS, thank you for your hospitality, time and support. It’s appreciated.
With no clear purpose or plan, I’ve resolved to experiment with CSS3 on a regular basis. Some of these note-posts may be more useful and practical than others, but the only way to know for sure is to learn by doing. That being said, here is another experiment with background-clip: text and @font-face via Typekit. When I finished Volume 2 in my Quoting Lebowski series the first thing that came to mind was that I bet I could CSS this. Here is the webkit happy code for this live example, sparing you all the structural bits from style.css:
Some of the class styles may seem oddly titled. I sourced them from the first few letters from each line of text. At the moment this will only work in webkit, so fire up Safari or Google Chrome and check out the example.
Update: Thanks to Jess Brown‘s recent contribution via Dribbble, I’ve been able to revise the code, retaining the double shading effect without having to resort to coding the same text twice: View Example
If building a multi-million dollar social media site was easy, I’d be typing this from the deck of my anti-matter powered yacht… in orbit. Just about everyone I know in the web design & development game has fielded an RFP for a social networking site buildout. While sometimes a real budget and scalable plan are at the core, it’s usually someone who’s seen a site like Twitter or YouTube and wants to replicate its success with an astronomically low budget and a ‘build it and they will come’ approach. I thought this all too common scenario was a great topic for Volume 2 of my Quoting Lebowski design series. This time, I’ve borrowed words from the uneven-tempered Walter Sobchak to Theodore ‘Donny’ Kerabatsos.
Feel free to download any of the following resolutions:
In another round of CSS3 experimentation, I wanted to see if it was possible to sequentially transition the opacity of 3 or more elements via CSS without having them all begin fading at once. While it seems painfully obvious now, I wasn’t aware that the transition-delay property existed. It’s only compatible with webkit browsers like Safari or Google Chrome at the moment. In this example, I’ve got 4 layers (.dl1 thru .dl4) stacked via position: absolute. When you hover, each layer sequentially fades away with .5 second transition-delays.
I began this experiment as a part of a combination of CSS3 visual effects that I may throw together as an Easter egg bit to a personal site. At the moment, I wouldn’t recommend using this unless it provides for interaction with purely bonus content. For example, you could fade a series of alternate profile photos on a staff contact page. Here, I’ve created a scenario showing the design process of a recent blog post from initial sketch to final product.
I’ve been following the progress Cameron Moll has made in designing his Colosseo Letterpress Poster on Dribbble for a few months now. Getting regular insights into what it takes to pull something like this off reinforces the value in both his design ability and dedication to craftsmanship. Happily, the poster I ordered arrived this morning. I’ve got plans to get it framed in the next week or so & will post more when I get it back. In the meantime, go and check out colosseotype.com.
I had a lot of fun dabbling in CSS3 on a recent post, but had to hold back a bit to keep things looking presentable in most browsers. To carry out the DIN typeface I chose into the header, I used a transparent png with the letters knocked out to achieve that subtle yellow to blue fade animation. After seeing a shot of my code on Dribbble, Chandler Van De Water challenged me to create the effect with selectable text. Happy to oblige, I came up with this example:
A pet peeve of mine is seeing blog comments or tweets neigh-saying innovative strides in web development. I see the issue of cross-browser compatibility to be completely separate from forward thinking experimentation. This is about progress, which is essential to our industry. It’s like saying, “Those compact discs sound amazing, but they won’t fit in my tape deck.” As a cathartic design exercise, I made a cute little graphic illustrating my feelings on the subject. This may actually spark an entire series wherein I address common web gripes with movie quotes. In this case, I’ve used the words of The Dude from The Big Lebowski to sum up the whole durned thing.
Please don’t take it too seriously, and please do pardon the foul language. Remember, this isn’t about people who use Internet Explorer 6. It is about those who hinder progress by focusing on current or past conventions.
Recently, via Dribbble, I’ve had the privilege of seeing some of the progress Shaun Inman has made on his latest project, Mimeoverse: Mimeo and the Kleptopus King. It’s an iPad, iPhone & iPod Touch game where you collect power-ups that upscale the character as well as the bit resolution of the game world itself. From story writing and musical composition to pixel art, I’m amazed at the wide range of skills required to pull off something like this.
Shaun is now tumbling the innovation at blog.mimeoverse.com. Check it out and save your pennies for what I think will be an epic multi-touch game.
Chris Meeks, e-friend, designer and all around good guy, has launched a new project called Daily Layout. He will be creating unique page layouts every weekday in a variety of capacities, spanning from illustrations and posters to screen prototypes. He’s already well into posting; be sure to check out his fancy pants archives page. A few of my favorites thus far are his fixed gear, infographic #1 and muse.
