gravitywins

Manor House / Jez (by eveningtweed)

Fri, 30 Jul 2010 17:15:59 -0400

Manor House / Jez (by eveningtweed)

Yago Hortal /via but does it float

Wed, 28 Jul 2010 12:24:30 -0400

Yago Hortal /via but does it float

The Lights in The Old Town by Leonid Afremov

Mon, 19 Jul 2010 11:03:44 -0400

The Lights in The Old Town by Leonid Afremov

Pepper, freelensed

Sat, 10 Jul 2010 17:26:54 -0400

Pepper, freelensed

Some seriously amazing paintings and drawings by David Kassan

Tue, 29 Jun 2010 14:49:42 -0400

Some seriously amazing paintings and drawings by David Kassan

I’m loving The Defamation of Strickland Banks, a concept...

Fri, 25 Jun 2010 11:27:00 -0400

I’m loving The Defamation of Strickland Banks, a concept album by English artist Plan B. The music is fresh, the lyrics are sharp, and the story itself (which charts the rise and fall of a fictional soul singer wrongly convicted of a crime) is pretty entertaining albeit clichéd. The music videos for the album are fantastic as well.

157/365 London eye **Explored N1!! (by fedora365)

Mon, 14 Jun 2010 10:54:05 -0400

157/365 London eye **Explored N1!! (by fedora365)

Embracing HTML5/CSS3 with Modernizr

Thu, 10 Jun 2010 17:31:00 -0400

Modernizr is a killer JS library by Paul Irish and Faruk Ates that uses feature detection to determine what next-generation web technologies are available to your visitors’ browsers. After running its tests, Modernizer stores results in both the markup (as classes on like .borderradius and .no-csstransforms), and in a JavaScript object. These results allow you to write thoughtfully-targeted CSS and JS, which I think is essential to providing a rich experience for users.

Considering a real-world example, say we have a content area we want to fade in after the page loads. Using CSS transitions we can animate the opacity to provide a smooth, GPU-accelerated fade, but not every browser supports transitions yet. Instead of leaving those users out, we’ll use jQuery to plug the holes. Let’s start with this markup:

You’ll notice we placed a .loading class on #content, which we can remove with JS after everything is ready to go. This class provides us a hook to both (1) display an animated spinner image as the page loads and (2) initiate the CSS transition. Here’s what the CSS looks like:

#content.loading { background: url(spinner.gif) no-repeat }
#content.loading p { opacity: 0 }
#content p { opacity: 1 }
.csstransitions #content p {
-webkit-transition: opacity 0.6s ease;
-moz-transition: opacity 0.6s ease;
-o-transition: opacity 0.6s ease;
}

You’ll notice the .csstransitions rule will only be applied to browsers that support it, leaving others to simply toggle opacity. Now let’s look at the JS which handles the loading class and the jQuery fade for other browsers:

$(window).load(Site.didLoad);
var Site = {
didLoad: function() {
var $content = $(‘#content’);
$content.removeClass(‘loading’);
// If the browser doesn’t support transitions use jQ to fade in
(!Modernizr.csstransitions) && $content.hide().fadeIn(‘slow’);
}
};

With that code in place, both sets of users will have #content paragraph elements faded in with either transforms or jQuery. One might argue that it’s a little redundant to target your CSS this way (browsers that do not support new features usually just ignore the rules), but I think this approach is a lot more readable and easy to maintain—plus it helps you actively consider the experience of users with older browsers, rather than just setting and forgetting. Kudos to Paul and Faruk for the great script.

One last consideration

Since both of these approaches rely on JavaScript what if a user has it disabled? If we were to leave the CSS as-is all

elements would be hidden from the user. To account for this, I usually place a “no-js” class on the element so I can apply specific CSS rules for users without JS. As a bonus, Modernizr changes this class to “js” automatically so you don’t have to.

<— HTML —>
/* CSS */
.no-js #content.loading p { opacity: 1 }

Can’t say I ever eat there, but an impressive win for the...

Tue, 01 Jun 2010 10:46:36 -0400

Can’t say I ever eat there, but an impressive win for the internets: Subway Finally Agrees to Tessellate Cheese

Carolina by Lady Danville

Thu, 27 May 2010 15:42:04 -0400

Carolina by Lady Danville

Yulia Brodskaya makes elaborate typographic creations entirely...

Fri, 21 May 2010 10:53:00 -0400

Yulia Brodskaya makes elaborate typographic creations entirely out of paper. She calls them PAPERgraphics

Marilyn /via theimpossiblecool

Sat, 15 May 2010 05:57:33 -0400

Marilyn /via theimpossiblecool

Such a brilliant compositional mind: Thelonious Monk - Round...

Fri, 14 May 2010 09:59:29 -0400

Such a brilliant compositional mind: Thelonious Monk - Round About Midnight

Mads Berg, Illustrator /via ISO50

Fri, 14 May 2010 09:54:00 -0400

Mads Berg, Illustrator /via ISO50

Unbelievably realistic colored pencil drawings by Julia Randall.

Thu, 06 May 2010 11:52:32 -0400

Unbelievably realistic colored pencil drawings by Julia Randall.

"Design is not about innovation. Design is about communication. Innovation in design is usually a..."

Wed, 05 May 2010 12:15:14 -0400

“Design is not about innovation. Design is about communication. Innovation in design is usually a wonderful byproduct or direct result of a particular need. Design that seeks to foremost be innovative will commonly fall apart under its own stylistic girth.”

- Jason Santa Maria | Quotes on Design (via owltastic)

Champion by Kristen Wiig (MacGruber Soundtrack)

Wed, 05 May 2010 09:24:40 -0400

Champion by Kristen Wiig (MacGruber Soundtrack)

Jeremy Keith’s HTML5 for Web Designers looks...

Tue, 04 May 2010 17:24:06 -0400

Jeremy Keith’s HTML5 for Web Designers looks fantastic—instant preorder. I’m a big fan of Stan’s design for the book as well. You know it’s successful both as an individual design and a visual system when my first thought is “I can’t wait to have a full shelf of ABA books.”

Gravité by Renaud Hallée. Falling objects timed to create...

Tue, 04 May 2010 11:25:12 -0400

Gravité by Renaud Hallée. Falling objects timed to create rhythm.

Ego Is by Mobley

Mon, 03 May 2010 13:43:19 -0400

Ego Is by Mobley