12 Days of CSS-mas day 8: Eight Maids a Milking

Posted on

On the eighth day of CSSmas, my true love gave to me: eight maids a milking.

Finally, a second day without avian creatures! Huzzah! Learning a lot more about SASS with this project, which makes me a rockstar. Damn right.

Made the maids a little diverse, although not as diverse as the real world; it turns out that 5 pixels isn’t really enough area to tell a real difference in color. Who knew? ;D

Yesterday, I added the numbers to the shutters, which tells you what day it is. This was actually way more helpful to me than you, so I can scan through and grab the one I want when I’m linking them or copying styles or what have you.

See you tomorrow!

See the Pen 12 Days of CSS-mas day 8: Eight Maids a Milking by Smokie Lee (@xtoq) on CodePen.

12 Days of CSS-mas: Six Geese A Laying

Posted on

I was supposed to get this out yesterday, but the Star Wars premiere really took it out of me. (Loved the movie!) I’m also unsure if the 12 days of Christmas are supposed to end on Christmas Eve or Christmas Day. Either way, now this one is ending on Christmas Day. It’ll be a nice present.

Today it’s six geese a laying. Seriously, more damned birds. Anyways…I made the eggs a part of the background, although I’m not totally in love with it. Considering taking the eggs out and just having the blue background. Let me know what you think!

See the Pen 12 Days of CSS-mas day 6: Six Geese a Laying by Smokie Lee (@xtoq) on CodePen.

12 Days of CSS-mas: Five Golden Rings

Posted on

On the fifth day of CSS-mas, my true love gave to me five golden rings!

This one is pretty simple because I was gone most of the day doing some real life things. But thankfully, rings are simple to do. I got the background from Lea Verou.

I’ll write some more about this tomorrow, because I learned some interesting things!

See the Pen 12 Days of CSS-mas day five: Five Golden Rings by Smokie Lee (@xtoq) on CodePen.

12 Days of CSS-mas: Four Calling Birds

Posted on

On the fourth day of CSS-mas, my true love gave to me four calling birds! Okay, I didn’t realize how many fucking birds are in the 12 days of Christmas song. It’s like the 6 days of Birdmas, and the 6 more days of other shit. Anyway…

Fun fact: in the original 1780 version of the holiday carol, it was four “colly” birds, which was regional slang for the color black. Because of the regional nature of the term, many other words were substituted until 1909 when Frederic Austin composed the most well-known version using “calling” birds. Read more on Wikipedia. So, even though these birds should technically be black, I used creative license and made them little red birds.

Enjoy! Looking forward to the 5 golden rings tomorrow!

See the Pen 12 Days of CSS-mas day 4: Four Calling Birds by Smokie Lee (@xtoq) on CodePen.

12 Days of CSS-mas: Three French Hens

Posted on

No big long post today, since these are very similar to my doves. The real challenge here was just figuring out a good way to abstract a hen into simple CSS shapes. I have some really complex ideas for a hen, but ultimately they just didn’t work for such a flat design like I’m looking for.

I used more SASS this time (mixins…meh) but ultimately since I’m so new at it, it didn’t save much time. That should change as I get more comfortable with it. I think I will be trying my hand at an HTML preprocessor for the remainder of the days since there will be so many repeated elements.

I switched up the background color for this one, as I wanted to have a grassy, and therefore green, background inside the window and doubling up on greens doesn’t make sense. I settled on the dot background because the pure css grass backround I was trying got way too visuall busy and detracted from the hens. Also one of my favorite Aunts collects chickens and I associate this simple chicken design with those “Americana” gingham and dotted fabric patterns.

See you on day 4!

See the Pen 12 Days of CSS-mas day 3: Three French Hens by Smokie Lee (@xtoq) on CodePen.

12 Days of CSS-mas: Two Turtle Doves

Posted on

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!

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!

PS: I published this on my CodePen blog as well. First post!

See the Pen 12 Days of CSS-mas: Two Turtle Doves by Smokie Lee (@xtoq) on CodePen.

12 Days of CSS-mas: Partridge in a Pear Tree

Posted on

EDIT: This made the front page of CodePen!

I really enjoyed Codevember and I wanted to do it again in December, but with all the holiday stuff I just couldn’t commit to it. I was talking with the husband about it and he suggested I do the 12 days of Christmas! I promptly turned that into the 12 Days of CSS-mas because puns are awesome and ran with it.

I started out deciding that I really wanted a way for the things to “reveal” themselves, so I made a little shutter animation a few days ago to practice. Then I started on the general design of each day. For the partridge, I had a really complicated shape that took me a couple of hours to tweak into submission, then I slapped myself on the forehead and realized I could make this much easier on myself. I still have that other one around just for funsies though.

The hardest part of this was the color, which I’ve always struggled with. It’s not obviously Christmas-y so it couldn’t really be those garish kind of colors, but it couldn’t be too muted or it would just come off as boring. Any constructive criticism is welcome.

Stay tuned for day 2 tomorrow!

See the Pen 12 days of CSS-mas : Partridge in a pear tree by Smokie Lee (@xtoq) on CodePen.