NOTE: Thanks to @davidmogar for giving me the tip that allows the shutters to transform like real shutters. No complex 3d transforms needed! I am continuously surprised at how simple things are once someone else has looked at them for you. Thanks again!

NOTE 2: This was originally published on my personal blog

I really like the simplicity of the first day's design, and I definitely wanted to continue in that same vein for the remainder of the challenge. At first I was going to have the same bird but just facing different directions, but then I thought about how easy it would be to create half circle wings along with the body and, well, I think they turned out great.

It's pretty simple to create these birds. First you start with the .bird container. You need a container so you can transform the children without messing up the stacking order (z-index), which is important to stack the wings with the body on the flying version, or if you want to scale either of the birds up or down.

Next you create the body element and 2 pseudo elements which serve as the wings (or 1 if you're doing the non-flying bird). I personally like to make the height of the element exactly 50% of the width, but adjust to your liking. To make these half circles, you want to set them with a border-radius:0 0 [width of element] [width of element]. This means that the top left and top right corners will be sharp, and the bottom left and right will be perfect quarter circles. Why not use the width of the element instead of 100%? Great question. The larger your border-radius is, the more overlap the corners have. When the corners overlap, the browser then has to re-calculate the radius until the corners no longer overlap. You want to give it the value that the browser will go ahead and calculate to save on rendering time. This article explains it better than I ever could.

  .body {
  background:#b3ecfb;
  background:#bec3c6;
  border-radius:0 0 7rem 7rem;
  bottom:0rem;
  display:block;
  height:3.5rem;
  position:relative;
  width:7rem;
}

For the flying bird, you want to set the transform-origin to "100% 0" so that we can rotate at the point where the wings meet the body (if our bird is facing right) rather than the center of the wing element. Set a transform:rotate with different degrees to both elements to "fan" the wings out. Position accordingly.

  .body:before,
.body:after {
  border-radius:0 0 5rem 5rem;
  bottom:0;
  content:"";
  display:block;
  height:2.5rem;
  position:absolute;
  transform-origin:100% 0;
  width:5rem;
}

Now for the head. I went simple on these, because I thought they looked better this way. The .head is an element with a border-radius on every corner except one, depending on which way you want the head facing; this sharp corner is the "beak." I used some non-100% radii because I liked the oval shape of the head, but do what you think looks good. Position absolutely and voila! If you want an eye, simply make a pseudo element from the .head element and set border-radius:50% and position.

  .head {
  background:#bec3c6;
  border-radius:1rem 2rem 0 2rem;
  display:block;
  height:2.5rem;
  position:absolute;
  right:-1.5rem;
  width:2.5rem;
  z-index:1;
}

.head:after {
  background:#fff;
  border-radius:50%;
  content:"";
  display:block;
  height:.5rem;
  left:1rem;
  position:absolute;
  top:1rem;
  width:.5rem;
}

The bush is just a green version of my clouds from my mountain header, attached to the bottom of the "window". And there you have it, the second day of CSS-mas!


779 0 6