Carl The CSS Pig

Guess what? I am going to be completely unoriginal here and admit that I think CSS positioning is a total pain to get the hang of. I assume tears and blood have been shed over this topic for years and years. Or maybe it's just my tears and blood being shed. Either way, I feel like it should be discussed.

I set out to create an illustration, of sorts, using HTML and CSS to practice positioning. I chose a pig, obviously, and ran into the following challenges which I needed to investigate further: image rotation, creating a CSS triangle, and absolute vs. relative positioning. Also, his name is Carl. Screen Shot 2014-01-08 at 11.55.53 AM

All the shapes were created by styling divs. I placed all the divs within a main div, being the Carl's head. I positioned his head relatively, and all other parts absolutely. I found this article helpful as a general overview of the issue.

I had to learn how to create triangles using CSS in order for Carl to have ears. CSS Tricks provides a useful article on this. Assuming your div has a class of "arrow-up", your CSS would look like this:Screen Shot 2014-01-08 at 12.11.22 PM

In order to manipulate Carl's ears I needed to rotate the second one that I created to mirror the original. While they should have the same class, the second ear with need an additional class in order to select it separately for this alteration.  I found this to be helpful concerning rotation, and below is the CSS:Screen Shot 2014-01-08 at 12.07.59 PM

While I plan to keep going with this, I needed a break for the day. Creating life is hard work.

View this little guy on CodePen.