Challenging to make an elegant elephant! I knew it had to be stylised in order to keep it simple, but I wanted it to be less grotesquely cartoonish than yesterday's effort.
After a quick image search I decided that a reasonable attempt could be made by judicious use of negative space. Basically I was going to start with a big solid form and shape it as much by taking "bites" out as by adding shapes in.
[NB - the pen has been revised since I wrote this post - substituting fork of original to which these comments apply...]
I'm pretty pleased with the results. Just a matter of lining up the curves of the main
<div> elements, really, and messing with them until they look right.
I was worried about how to do the ear shape, since it's so irregular, but it turned out to be easy once you understand that
border-radius can be specified on each side, just like the margin and padding attributes:
border-radius: 20px 50px 10px 100px; (no idea what shape that throws out!)
The other main learning was the gradient, obviously, and that turned out to be similarly easy (if you're not accounting for different browser types, just as with border-radius):
background: linear-gradient (to right, (rgba(100,100,100,0), (rgba(100,100,100,1));
Where the last parameter is the opacity at each side of the element. I feel like I'll be using this a lot in future, for that modish mid-century design aesthetic.
I'm going to see how close I get get to the vibe of the wonderful Owen Davey using CSS.
What else? I used a little flexbox container for the toenails, but I realise now that was probably not necessary the way they ended up.
I would've liked to add a tail-tuft, but after 2.5 hours the law of diminishing returns would not allow it.
At least, I did to some degree. And while it certainly makes my elephant sketch cumbersome, I can totally see the benefit of being able to visually parse the class definitions by name. On a more complex project it would be incredibly worthwhile. So I'm going to try to keep that up and figure it out more.
I'm also going to try to be consistent about the order in which I define attributes within a class. I don't know if this part of any other standard, but the way I'm working at the moment is by quality from primary to secondary to tertiary, as defined by philosophical tradition (Hume? no Locke?):
width and height are primary qualities and come first border-radius is to do with shape, and also primary (though less important) color is a secondary quality positioning is the least "intrinsic" of the qualities and comes last