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!
See the Pen Small dropdown menu by Smokie Lee (@xtoq) on CodePen.
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!
See the Pen Small dropdown menu by Smokie Lee (@xtoq) on CodePen.
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.
See the Pen 12 Days of CSS-mas day 10: Ten Lords a Leaping by Smokie Lee (@xtoq) on CodePen.
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.
See the Pen 12 Days of CSS-mas day 9: Nine Ladies Dancing by Smokie Lee (@xtoq) on CodePen.
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.
On the seventh day of CSS-mas, my true love gave to me, seven swans a swimming. So. Many. Birds.
Thanks to Lea Verou and her CSS backgrounds again.
See the Pen 12 Days of CSS-mas day 7: Seven Swans a Swimming by Smokie Lee (@xtoq) on CodePen.
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.
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.
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!
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.
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.