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.
z-index only takes effect if the position is set to
"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.
<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
- should the whole thing be wrapped in a semantic tag like