I nearly lost the faith halfway through this one, but it came good in the end:

As I mentioned yesterday, I'm actively pursuing an Owen Davey look in these challenges (for now). The beaver is based on one from a book he illustrated.

That Davey reduces his figures to simple geometric components is part of the draw, of course, but these are still complex shapes to achieve in CSS, I find; there are subtle curves and proportional relationships that are hard to replicate.


In addition to extending my use of linear-gradients, today's main objective was to get to grips with transform. And what do you know - it's hella straightforward!

Only used the rotate functionality so far, but that's good enough.

Seems like z-index only takes effect if the position is set to absolute.


code structure

"Major" problems with my code cleanliness today:

  • no comments at all!
  • only partial BEM-like naming (before I started adding things willy-nilly
  • inconsistent property definitions
  • randomly ordered blocks of CSS
  • non-hierarchical HTML

I've got my head around the absolute attribute now, but as a result I'm relying on it too heavily. I did find that transforming elements played merry hell with my positioning, but that was because I didn't have the elements nested properly in the first place.

Underlying issue - lack of planning and rushing because I'd spend so long on it already.


  • standardise approach so I have a central, nested image wrapper
  • make sure it stays visible in the thumbnail for tweeting, etc.
  • try the dailycssimages display pen?
  • re-use more CSS for efficiency
  • much more commentary - try to write is as I go to make it less onerous.


  • can/should <alt> tags be added to elements other than irmages (.jpg or .png)?
  • should CSS illustrations like this have an <alt> tag for accessibility reasons?
  • if so, where should it go? In the outermost <div>?
  • should the whole thing be wrapped in a semantic tag like <section>

381 0 0