Little dropdown menu I recreated in code based on this Dribbble. Going to try to do some code every other day in January and see if that’s a realistic goal!
On the 10th day of CSS-mas, my true love gave to me, ten lords a leaping. Jumping jacks. Yeah.
Getting sick today so this is about the limit of my abilities. I’m sure I’ll look at this code tomorrow and be all embarrassed, but until then, here you go! I look forward to only displaying instruments with the next two days.
Another day without birds! It’s like it’s Christmas or something!
As we get more and more elements in the space, the details need to be dialed back to avoid visual clutter. That’s why these ladies are less detailed than the maids yesterday.
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!
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!
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!
It was my week off of school, so there’ve been just a flurry of real life things going on like burning, holiday stuff, animal things, and birthdays. Oh well, just means I have less to type!
- 12 Days of CSS-mas: I started a new self-imposed challenge which I call the “12 Days of CSS-mas.”
- Day 1: Partridge in a Pear Tree (my site) (CodePen)
- Day 2: Two Turtle Doves (my site) (CodePen)
- Day 3: Three French Hens (my site) (CodePen)
- Day 4: Four Calling Birds (my site) (CodePen)
- Also posted my first post on my CodePen blog! It’s the same as the post here on my personal blog, but I figured that most people won’t want to go to both places, so it might be beneficial to cross-post. It wasn’t that much work…at least one time…starting to overthink…
- Drew a little picture of my daughter for my mom’s birthday.
- Updated my About Me page with a timeline visually inspired by something I saw on PatternTap and forked from my Codevember entry. Idea shamelessly adapted from the amazing historical pages of Chris Coyier and Aaron Draplin.
- Received my Verizon exclusive Google cardboard headset! Last ones in town. FUCK YEAH!
- Started my newest term in school on 12/14. I am going to attempt to write about my struggles with class every Sunday. If only I had Reddit-like votes to encourage me…hey that’s a great WordPress plugin idea…
- Talked to my best friend for a couple of hours this weekend! First time in a long time we’ve talked on the phone. He just released a tabletop game about learning about your friends called Treehouse Dreams; it’s on my list of things to get after the craziness of the holidays has dissipated. You can also check out some other games he’s working on.
- Playing quite a bit of WoW this week. Not because I particularly enjoy Warlords of Draenor (I don’t) but because I like old content. Which is all we have…hahahaha…
- Watched the season finale of Doctor Who. I didn’t like Clara’s death in The Raven (I’m apparently in the minority on that one) so I really enjoyed this particular episode…right up until they had Me and Clara go triapsing off across the galaxy. I could spend hours talking about why, but I won’t bore people without being asked. Maybe I’ll make a big post about it so I can really rile up the interwebs…
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!
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!