Day 50: Party City
Just fun with animations. It might be nauseating, but think of it as the consequence of too many drinks celebrating the end of a challenge. All the challenges are windows. The trees are a green that I divided into thirds by RGB and had the opacity at 0.33%. Who said that you can't use math here?
Day 49: DDR pad
Exhausting! So many working parts to move. I think it's the symmetry that vexed me. It's full of clip-path, so some browsers won't be able to see it, but watchagonnado?
Day 48: Craft Beer
I don't drink beer, so the task of creating a "craft beer" was doing my head in. I tried to make my own brand but that got too complicated. I then reminded myself that Py Ladies of Austin was looking for a southside place to meet up. I had joked about calling it Pynts. Et voilà
Day 47: Cake
Nothing fancy here. I don't know how to do a for-loop where my blobs can curve, so while nothing is fancy here, I have added another stinkin' item on my to-learn list.
Day 46: Piñata
Very little time today, so left it as a clippy star with squares of box-shadows. With more time, I'd like to make two stars that look like they're one, but split to release the candy. Also to have the squares over the stars to look like they're on top and not nested in.
Those were things I had thought about, but I have a day of appointments, and FINALLY my idea-eyes did not get larger than time-stomach.
Day 45: Space Mascot
I wanted to focus on a planet and make it semi-educational. I remember Jupiter's satellites (Io, Europa, Ganymede, Callisto) with this mnemonic: "I eat guacamole and chips." I wanted to get them to orbit, but I don't have the time to set up their path with a curve AND have them disappear around Jupiter. I'd like to come back to that.
Day 44: Robot (espresso robot)
She might be one of my favourites. She is cute, makes the good stuff, and is animated because she's full of endless coffee. I kept most of the animations set to infinite because watching her relaxed me.
Day 43: Animal mascot
First off: this is a city mascot, not an AFL footy one.
Ok. Now that's out in the open. I lived in Brisbane for 8.5 years and was beaned by these fellas every stinkin' day. I commuted by bike and ran, so beaned I was. I like them, though. I wanted to make this one cute, but with an eyeball so we all knew what he could do.
Day 42: Cute Critter
I love the pink fairy armadillo, so when I had the option to do this challenge, I knew which animal I'd do. I would have loved to show it look more like an armadillo (bands), but then I'd lose more time than I can afford to give today. I am learning to kill my darlings (Thank you, Stephen King).
Day 41: Mascot for a startup
As someone who doesn't have a car, I found ride share companies useless for many things that are dirty or messy. How do you get from a nursery to home with manure? Or get your big smelly dog to the vet or groomers? You call a ride share that's not afraid to get dirty. Yucky Truckies maybe? So their mascot is Dirty Gerty.
Dirt on the face is hard to do.
Day 40: Nintendo 2DS
This is not responsive. I am sorry. No, I am not. This is my daily challenge, and I've done what you see here in the time I will give myself for it. It's Friday. It's time to look at clouds from both sides now.
When this is over, I'd like to return to make all of mine responsive, but this is my morning routine, not my entire day. Oh my cod, I am feeling too guilty about this.
Day 39: Keyboard
After working on making my Z key (would've been my first) look the way I wanted, I came up with a different plan. Such is life. Sorry about the puns. Not really.
Day 38: External Monitor
Monitors are things and people. I loved Roz, so since she was not an option for Monsters, Inc., I used her in this one. Not the detail I'd want for her if she were the main subject, but my actual subject was the monitor with content and reflection.
Day 37: Laptop
I couldn't deal with the keyboard, so I smothered it. I am sure you can still tell that it's a laptop. A laptop that remembers great grea great grandpappy in the 1983 movie WarGames.
Day 36: Cell phone
I say "mobile". When I hear "cell", I think animal and plant cells or a jail cell. From there I just made a simple old clipart-style image of a phone with cells as the buttons. Not my favourite, but done in a short amount of time. I am most pleased that I didn't overdo it when I don't have the time for it. See? I lern gud.
Day 35: Elm logo
There are spaces between the shapes in the actual logo; however, I have a busy day and this is what I'm putting out there. I will return to add spaces, though. It bothers me enough. I did enjoy working on the animation and playing with triangles that were not created by clip-path. It's not mobile-friendly as there were too many values that were done with px and not %. Again, see above-mentioned busy day.
Day 34: ReactJS logo
Ok. I loved doing this one. I have always thought of Frankie Goes to Hollywood when I hear React. When this challenge came up, I knew exactly what this 80s child would do.
Day 33: VueJS logo
My least favourite. I can't even talk about it, that's how much I don't like this.
Day 32: Angular logo
I did the logo quite quickly. I was done and then went for a ride. During that ride, I thought of the fish. I think that I found just doing the Angular logo too boring. It doesn't even lend itself to animation the way the JS logo did. I blame the shape of the A. That sucker is hard if we are not using text.
It's a simple task: Yellow with a JS, so I took the opportunity to experiment with animations, flipping pixels. No. Really. As in transform/rotate, not as in "flippin'!". I am not sure I could do this with box-shadow, so I just made many divlettes. Bless 'em. I'll experiment with animating box-shadow squares, but that might be a weekend task, not to be done in an hour or two.
Day 30: Bar Graph
Bar graph made me think of all the ways I could make a graph for a bar: beer pulls, cans, caps, etc. I looked up bar apps and saw ParTender's app. Their look influenced how I approached the design. Well. The way Wonder Woman influences young girls. Sure. Most of it's fantasy, but we can still wear the same boots.
Day 29: Download
Instead of an arrow and a harddrive, I wanted to have a theme for the download. I don't enjoy wine, but I like the way it looks. I might do more of these as food- and drink-related themes.
Day 28: Cogs
At first I planned to have a head where the forehead faded and one could see the cogs in the brain. As I built the face with the brain hole (not an insult), I saw a cup. Then I went from there to wanting to show the effects of coffee. Again, the plan was for the coffee to disappear and show cogs, but since this wasn't my original plan, I hadn't built my HTML out to support this. I "cheated" and just turned the pupils into cogs. Next time around, I'd like to build many cogs all connected.
Day 27: Bug
Not happy with this but the mind took over. I saw a ladybug. I saw lady. I saw the polkadots. Together in my head, I saw Rosie's bandana. Getting bug legs to be like human arms is hard. I am spending too much time creating an image and not enough playing with animation. Time. THERE'S NEVER ENOUGH TIME! Caveat: Hey, I found a lost cat with cerebellar hypoplasia. I posted it on Facebook, took the cat to Austin Animal Center, and by the time I got home, they had located its owner. I didn't commit, but I did a good thing.
Day 26: App Store Icon
Because of this being an A made of design tools, I thought it would be easier than the others. I was wrong. I had decisions to make about whether the ruler was under the paintbrush and pencil and to have those two have a border or if to have the ruler broken into pieces. I chose the later so that I could have more depth to the background with a gradient and then a shine overlay.
Day 25: Captain America
This is pretty basic. I wanted to add animation, but I also wanted to do otherthings today. I lost a lot of time creating the perfect triangles to make my pentagon only to remember that equilateral triangles make hexagons. Derp.
Day 24: Iron Man
I had no idea what to do. He's so full of lines at angles ... Ugh. I remembered late in the game to do a mixin for lines. Saved me. Also it was great practice for arguments in mixins.
Day 23: Wolverine
I'm not familiar enough with Wolverine to choose a look, but it seemed they all had the blades in common. Of course. He's not Mr. Squishy Pillows.
Day 22: Green Lantern
Drawing the ring at this angle was difficult. I had to fudge and add fixes. Happy with it. I'd love to try to perfect it, but not as a challenge. Just as a "let's obsess about the little things" fun time.
Day 21: Superman
I chose a specific strip to copy from a blog post I found. I wanted to highlight the S on his cape because that's what Paul Cassidy added. He's my grandpa, so it was a way to have a PHC day. I don't care that it's not really my best. It's too big and has too much for the time allotted, but I just had to do a PHC Supe.
Day 20: Mike or Sully from Monsters, Inc.
I knew something from Monsters, Inc. was coming up, but I thought it was any monster. I had mentally planned for Randall. I kept it simple with Mike because I wanted to not spend as much time on it. Do other projects. I was on fire until I hit the hands and feet. Oh noes! I don't have the time left to plan for that. Hellooooo mittens and booties.
Day 19: Werewolf
I had no idea what to do, so I started with the body. As I sketched, Mozart came to mind. I went from there.
Day 18: Vampire
I named him Stewart since he looks like a former student of mine. He is not a vampire. He's a nice young man with a good complexion and an abhorrence to drinking blood.
Day 17: Zombie
I do not understand why zombies are always angry. They have it made. This one has manners, but before she turned, she was a feral redneck, so it just goes to show, you never know how they'll turn out. Had fun with this. Did it relatively quickly, too.
Day 16: Frankenstein
Frankenstein is not the monster but the doctor, so I played with a little Gene Wilder and funnery with punnery. I made size a variable and regret it. Won't do that again. Also made it too big.
Day 15: Pie
Main objective for me was to time my keyframes to that it looks like the mouse is stealing the cherry. I have a long way to go with animations, but I'm getting there. I also did the blobs of glaze using an iteration in Pug, so I'm happy to be thinking about ways to make this easier.
Day 13: Taco
Just playing with taco and cat and figured that Grumpy Cat would be a good excuse to play with curves (frowns) and shadows (fur blend).
Day 12: Hamburger
I did not want to just do the burger and patty combo. I also understand that on days where I teach, I don't have the time to get too fussy. Instead of getting detailed with the burger, I added a background and mood. Is he happy to be eating McD's or is he sad to be hooked on convenience?
Day 11: Pizza
I wanted to do something different on a day I had not a lot of time to do it. Lesson learned. I don't like this one. I am happy for a few things, like the picnic blanket done in organised box-shadow pixels and the starts that are all random box-shadows of one original star. Other than those, I'm not happy with the lovers. Ah well ...
Day 10: Pencil Jar
I focused on using mixins for repeated code (pencils and paperclips), opacity and border width for dimensions.
Day 9: Calendar
I consider this complete for the task—it is a calendar— but my original plan was to have the days turn into raindrops and fall off of the calendar. I'll return to this in a new Codepen and finish it. I worked a lot with mixins, especially with media queries, so the time lost learning that was worth it. Also to use list items instead of just divs was useful for v1. I think v2 will probably use divs and copies of divs for the animation.
Day 8: Notepad
I kept this one relatively simple. There are no animations or anything too fancy. Short on time and had enough to think about with :before. I wanted to learn how to curl a page, but that would be more than what I had time for. That, my friends, is what the weekends are for.
Day 7: Ruler
I saw a chance for a homograph play. Ruler that is a tool or a monarch?
Day 6: Clock
I did not want to go analog because I wanted to experiment with the digital blinkies and find a use for animation. Also, browser compatibility on Codepen for the project is doing my head in. I need to check out preprocessors to do that. Again? When?!? Can't I just punish people who use IE8?
Day 5: Dory
With this challenge, I am finding keeping up with all of hte vendor prefixes in Codepen annoying. Yeah yeah. I need to up my template for an autoprefixer, I am sure. But when? WHEN, DAMMIT?!
Day 4: Tiger
This time around I tried to focus on just the face and not get too caught up on the details. This is a daily challenge. I can't let this be an all-daily challenge.
Day 3: Beaver
The next time I do a Google images search for “beaver”, shoot me! These are not supposed to take all day, but I'm making it that way. My habits are changing so that I don't do as many duplicates. This is a great exercise for me and my mildly sassy attitude.
First time with Pug, too. Not convinced but open to change.
Day 2: Elephant
It's Ella Fitzgerald's birthday today, so I listened to her as I created this Ellaphant Fitzgerald. I kept it minimal with just a quotation from a song that has “stampede” in it and an old-fashioned mic. Women do not like being compared to elephants, so I was nervous about offending. Take no chances.
Day 1: Bear cub
I started with the koala from the tutorial and played and tweaked from there. I find that this brings out the obsessive in me. Knowing when to stop? Yeah. I'm not good with that.
Beginner’s Guide to Pure CSS Images by Michael Mangialardi
A quick tutorial I tweaked before I start Daily CSS Images. This was the most helpful explanation of
position: absolute I've had.