Pure CSS Images Bucket

What I've done while participating the in Daily CSS Images challenge.

Challenge City

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?

I'm done for a while. This took up a lot of morning time. I miss JavaScript. I'll do another one of Coding Artist's challenges, but not for a few months. Ballance.

30 June 2017

See the Pen Daily CSS Images Day 50 - Party City by Katy Cassidy (@ihatetoast) on CodePen.

Dance Dance Revolution pad

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?

29 June 2017

Make your backend happy: 'Ave a Pynt

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à

28 June 2017


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.

27 June 2017

See the Pen Daily CSS Images Day 47: Cake by Katy Cassidy (@ihatetoast) on CodePen.

Piñata Star

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.

26 June 2017

See the Pen Daily CSS Images Day 46: Piñata by Katy Cassidy (@ihatetoast) on CodePen.

Jupiter and its moons

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.

23 June 2017

See the Pen Daily CSS Images Day 45: Space Mascot by Katy Cassidy (@ihatetoast) on CodePen.


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.

22 June 2017

Brisbane Magpie

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.

21 June 2017

Pink Fairy Armadillo

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).

20 June 2017

Dirty Gerty

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.

19 June 2017

Nintendo 2DS

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.

16 June 2017

See the Pen Daily CSS Images Day40: Nintendo 2DS by Katy Cassidy (@ihatetoast) on CodePen.

Key bored, key bards, keys bared

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.

15 June 2017

Roz always monitors

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.

14 June 2017

WarGames vs Cat

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.

13 June 2017

See the Pen Daily CSS Images Day 37: Laptop by Katy Cassidy (@ihatetoast) on CodePen.

Animal Cell phone

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.

12 June 2017

Elm logo tangrams

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.

9 June 2017

See the Pen Daily CSS Images Day 35: Elm logo by Katy Cassidy (@ihatetoast) on CodePen.

Frankie Says React

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.

8 June 2017

Coming into Vue

Day 33: VueJS logo

My least favourite. I can't even talk about it, that's how much I don't like this.

7 June 2017

See the Pen Daily CSS Images Day 33: VueJS logo by Katy Cassidy (@ihatetoast) on CodePen.

Angler vs Angular

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.

6 June 2017

Flipping out with JS

Day 31: Javascript Logo

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.

5 June 2017


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.

2 June 2017

Down the hatch

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.

1 June 2017

See the Pen Daily CSS Images Day 29: Download by Katy Cassidy (@ihatetoast) on CodePen.


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.

31 May 2017

See the Pen Daily CSS Images Day 28: Cogguccino by Katy Cassidy (@ihatetoast) on CodePen.

Rosie the Riveting Bug

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.

30 May 2017

App Store Icon

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.

29 May 2017

Captain America's shield

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.

26 May 2017

Iron Man does not do shirts

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.

25 May 2017

See the Pen Daily CSS Images D24: Iron Man by Katy Cassidy (@ihatetoast) on CodePen.

Some come equipped for the task

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.

24 May 2017

See the Pen Daily CSS Images Day 23: Wolverine by Katy Cassidy (@ihatetoast) on CodePen.

Green Lantern Ring

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.

23 May 2017

See the Pen Daily CSS Images Day 22: Green Lantern by Katy Cassidy (@ihatetoast) on CodePen.

Paul Cassidy's Superman

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.

22 May 2017

See the Pen Daily CSS Images Day 21: Superman by Katy Cassidy (@ihatetoast) on CodePen.

Mike in Mittens

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.

19 May 2017

Werewolfgang Amadeus Mozart

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.

18 May 2017

Stewart the Vampire

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.

17 May 2017

Delicate thing

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.

16 May 2017

See the Pen Daily CSS Images Day 17: Zombie by Katy Cassidy (@ihatetoast) on CodePen.

Dr. Frankenstein with a frank 'n' stein

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.

15 May 2017

See the Pen Daily CSS Images Day 16: Frankenstein by Katy Cassidy (@ihatetoast) on CodePen.

Pie gonna die!

Day 15: Pie

I started out with a simple pie. I love practicing my SCSS tricks I'm learning like - for. Also applied it to getting the pie crust looking good. I love these challenges even though they take time from my JavaScript and own code. Wait. This is my own code.

After I did the pie, I found that the pie filing looked like blood and then my twisted personality took over.
12 May 2017

See the Pen Daily CSS Images Day 15: Pie by Katy Cassidy (@ihatetoast) on CodePen.

Little thief

Day 14

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.

11 May 2017

See the Pen Daily CSS Images Day 14: Cheesecake by Katy Cassidy (@ihatetoast) on CodePen.

Grumpy TacocaT

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).

10 May 2017

See the Pen Daily CSS Images Day 13: Grumpy Tacocat by Katy Cassidy (@ihatetoast) on CodePen.

Tears of joy or sadness?

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?

9 May 2017

See the Pen Daily CSS Images Day 12: Hamburger by Katy Cassidy (@ihatetoast) on CodePen.

That's amore

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 ...

8 May 2017

See the Pen Daily CSS Images: That's amore (pizza) by Katy Cassidy (@ihatetoast) on CodePen.


Day 10: Pencil Jar

I focused on using mixins for repeated code (pencils and paperclips), opacity and border width for dimensions.

5 May 2017

See the Pen Daily CSS Images Day 10: Pencil Jar by Katy Cassidy (@ihatetoast) on CodePen.


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.

4 May 2017

See the Pen Daily CSS Images Day 9: Calendar by Katy Cassidy (@ihatetoast) on CodePen.

Family squabble scribbles

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.

3 May 2017

See the Pen Daily CSS Images Day 8: Notepad by Katy Cassidy (@ihatetoast) on CodePen.

Henry the 1/8

Day 7: Ruler

I saw a chance for a homograph play. Ruler that is a tool or a monarch?

2 May 2017

Wakey! Wakey! CSS and Bac-y

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?

1 May 2017

See the Pen Daily CSS Images Day 6: Clock by Katy Cassidy (@ihatetoast) on CodePen.

Dory close up

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?!

28 April 2017

See the Pen Daily CSS Images Day 5: Dory by Katy Cassidy (@ihatetoast) on CodePen.

1970s disco tiger medallion

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.

27 April 2017

See the Pen Daily CSS Images Day 4: Tiger by Katy Cassidy (@ihatetoast) on CodePen.

Beaver Cleaver beaver with a cleaver

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.

26 April 2017

See the Pen Daily CSS Images Day 3: Beaver by Katy Cassidy (@ihatetoast) on CodePen.

Ellaphant Fitzgerald

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.

25 April 2017

Dizzy Cub

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.

24 April 2017

See the Pen DailyCSSimages Day 1: bear cub by Katy Cassidy (@ihatetoast) on CodePen.

Intro code-along

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.

24 April 2017