Dan Rubin – CSS3 for Everyone

Sean Carmichael

July 28th, 2011

Play

Incorporating CSS3 into your designs allows you to create innovative designs with less code and reliance on images. The level of compatibility with many of the browser options out there is already impressive and it continues to grow. Taking advantage of the new CSS3 features helps to shift heavier visual elements to the browser itself.

Dan Rubin is one half of Webgraph and part of the Sidebar Creative team. He’s a great designer and a fantastic teacher. In his virtual seminar, CSS3 for Everyone, Dan shows examples of web sites currently employing CSS3 well, enhancing the user experience. He also demonstrates how using CSS3 pseudo-elements gives you more flexibility with how you can style elements.

Dan and Adam ran out of time to answer all of the great questions from our audience. So they caught up to address the remaining ones for this podcast.

Here’s an excerpt from the podcast.

“…I recommend checking out dolectures.com built by the folks at Paravel. It’s a beautiful design. But if you view it in a desktop browser, and re-size your browser up and down, make the browser window really small. You’ll see that this is a properly responsive design. [It] uses media queries as well as fluid grids and web fonts and, behind the scenes where needed, they’re using structural CSS to achieve things without having to incorporate JavaScript.

It’s a great example of a site that you could look at and not [realize] it was doing a lot of special stuff. And that’s really the point here. The point isn’t to use CSS3 to throw these bells and whistles around everywhere in plain sight. For it to be useful to us, it has to save us time. It has to improve our work flow and improve our output.

And that’s why it’s exciting to me and to everyone else who’s actively using it now. It saves time, it makes testing easier, and it makes things like responsive web design possible in the first place. It allows us more flexibility, especially if you’re a designer, to kind of have this one-to-one or closer to one-to-one relationship between what you’re doing in a visual design app like Photoshop or Fireworks where you can use opacity.

One of my favorite tricks is to use lots of layers of either black or white and to layer on top of either images or other colors that I’ve set in the design. [I then] use opacity to vary the level of detail and the level of mixture of that color. You can do that in Photoshop and you can transfer that directly to RGBA colors and do the exact same thing without having to do any weird conversions or use your color picker.

Once you start actually doing that and experiencing how that changes your work flow, you realize that it’s not about making things flashy and adding all sorts of animations and transitions and hovers and drop shadows and making everything have a rounded corner. That’s not what it’s about. It’s about how it changes the way and improves the way that you build and design…”

Tune in to the podcast to hear Dan addresses these questions:

  • Can images, HTML, and other characters be inserted through the before and after pseudo-elements that you discussed?
  • Can you use CSS3 when designing for mobile, specifically iOS and Android?
  • Do you have a list of live websites that currently leverage CSS3 well?
  • What tools do you use when designing with CSS3?

What are your experiences with CSS3? Share your thoughts with us in our comments section.

Recorded: July, 2011
[ Subscribe to our podcast via Use iTunes to subscribe to UIE's RSS feed. ←This link will launch the iTunes application.]
[ Subscribe with other podcast applications.]
[ Transcript Available ]

One Response to “Dan Rubin – CSS3 for Everyone”

  1. Will Says:

    Sweet interview. Anyone interested in finding out more about how to use pseudo-elements should check out Nicolas Gallagher’s articles:

    http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/
    http://nicolasgallagher.com/css-background-image-hacks/

Add a Comment