CSS3 for Web Designers – Dan Cederholm – A Book Apart

Really glad to see that this book is in its second edition… last revised February 2015.

Using CSS3 Today

Understanding CSS Transitions

  • Even though it is in draft, CSS transition support can be found in Safari 3+, Chrome 2+, Firefox 4+, Opera 10.5+, and IE10+.
  • http://www.w3.org/TR/css3-transitions/
  • Why not use JavaScript, particularly given all the popular frameworks being developed?  For non-critical UI it may be simpler just to add a few lines of CSS code.  But keep it simple and appropriate.

Hover-Crafting with CSS3

  • “Our job as designers is not to simply dress up the bottle and make it look pretty, but rather to find ways to enrich the story and enhance the message.”  Interaction is easily enhanced by CSS and not missed by those that don’t support it.
  • When using RGBA to assign colour values, specify a solid colour first as a fallback for older browsers that don’t support RGBA.

Transforming the Message

  • According to the W3C… CSS transforms allow elements style with CSS to be transformed in 2 or 3 dimensional space…
  • Bear in mind you can set a transform-origin.
  • Scale,  rotate, skew and translate…. then add the transition on top of that for a good effect.
  •  A demo by Paul Hayes using skew and transitions to create multiple 3D cubes from simple chunks of hypertext, http://www.paulrhayes.com/experiments/cube/multiCubes.html.
  • The Web Trend Map uses skew to place avatars on an isometric grid, creating unique data visualizations from otherwise flat elements (http://webtrendmap.com).

Multiple Backgrounds

  • Parallax scrolling – background images move at a different pace to foreground images which creates an illusion of depth.  This could be used when the browser resizes. https://en.wikipedia.org/wiki/Parallax_scrolling
  • Here I’m layering the four images, with the clouds at the bottom and stars on top in a comma-delimited list. (Notice the stacking order starts with the image “closest” to the user.)  I’m also repeating each of these horizontally, and setting them at differing horizontal positions (using positive and negative values) to make each layer “shift” at different speeds as the window is resized. And finally, I’ve fixed them in a locked position on the page with the fixed value.  The almost-black background color of #1a1a1a is added in last as a separate background-color rule.  Notice there are no dummy wrapper divs to layer them.
  • body {
      background: url(img/space-bg.png) repeat-x fixed -80% 0;
        url(img/stars-1.png) repeat-x fixed -130% 0,
        url(img/stars-2.png) repeat-x fixed 40% 0,
        url(img/space-bg.png) repeat-x fixed -80% 0,
        url(img/clouds.png) repeat-x fixed 100% 0;
      background-color: #1a1a1a;
  • Older browsers will lose the look and feel, so you can initially  specify a single fallback background image for browsers like IE7 and 8 which will simple ignore the multiple backgrounds.

Enriching Forms

Leave a Reply

Your email address will not be published. Required fields are marked *