Pure CSS Images Bucket

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.

Sharpened

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.

April

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