100 days of css

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

100 Days of CSS challenge with Parcel, PostCSS and Pug.

License

jasminexie/100-days-css

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

100 days of CSS challenge

100 days of CSS — OR: 100 days of trying not to suck at CSS.

My goal: to write animations with no javascript. Pure CSS (or pure PostCSS, if you will). I’ll make an exception for Pug, because although it’s technically Javascript pre-processing HTML, you can’t really expect me to write 400 divs by hand, lol.

And PostCSS is technically Javascript post-processing HTML, but the whole point of this is to learn PostCSS, really, so that doesn’t count either.

Open localhost:1234/index.html . Please don’t forget the index.html .

Create a new challenge template

Enter a new challenge from the prompt. Name should be a 3-digit number ranged from 0 to 100 (ie. 046).

Open localhost:1234/$/index.html to see the page. Where day_number is a 3-digit number ranged from 0 to 100 (ie. 046).

This is an exercise in the following technologies:

And the following abilities:

• To not give up and not smash one’s computer
• To investigate, explain and enforce industry standards as well as I can.
• To find and bookmark some very useful CSS sites
• To hopefully write some reusable CSS snippets

About

100 Days of CSS challenge with Parcel, PostCSS and Pug.

Источник

100 Days of CSS Illustrations (1-10)

As a personal fun project, I challenged myself to do 100 CSS drawings in 100 days. Today marks a milestone: the 10 th day, so I decided to share the ones I’ve done so far (and to show off a little, I am really proud of some of them 😊) Here are the 10 illustrations/drawings I did in the past 10 days. Click on the image to see the full illustration with the code, and click here to see a CodePen collection with all of the drawings plus some variations.

Day 1: Shark

This one was done from scratch as part of a CSS game I did last week, and it is the one that triggered the whole drawing project idea.

Day 2: Person thinking

This one, like some others from the list, is inspired/based on an illustration from Dribbble. In particular, this one is inspired by Faces by Olga Semklo.

Day 3: Hummingbird

Another one from Dribbble. This was inspired by Ivan Bobrov’s hummingbirds on Dribbble (this and this). And as a challenge, I used only semicircles (although I cheated a by stretching them a little.)

Day 4: Face

This cartoon is from scratch and I really like how it turned out, with the condescending look and smirk.

Day 5: Monster with balloon

Another one from scratch. This one was based on a series of cartoons I did for my daughter 5-6 years ago.

Day 6: Ace Ventura caricature

And yet another from scratch. This one I started doodling without a clear goal, then the idea of making an Ace Ventura caricature popped up, but I wasn’t able to get a good expression.

Day 7: Minimalist Dog

Based on Coffee Dog by Ahsan Kahn on Dribbble. I added some ears, but I didn’t like the result, so I hid them later.

Day 8: Harry Potter

I did two versions of this cartoon from scratch. The one below, and another in which Harry is a bit slimmer as my daughter claimed it didn’t really look like Harry Potter.

Day 9: Cardinal

Based on Cardinal by Jord Riekwel on Dribbble. I later did a versions with colors trying to change it into a Blue Jay, but none of them are as cool as the original.

Day 10: Profile

I really like this one too. even when it doesn’t do honor to the original in which it is based on: Swiss Beatz by Rogie (which is 1,000-times more expressive and nicer than mine). And that’s it for now. Hopefully, there will be 10 more in 10 days 😊

Источник

100 Days of CSS Art — Complete! 🎉

100 days ago I joined the 100 Days Project Scotland which «gives anyone, regardless of age or ability, the framework and permission to get creative». People from all over Scotland have been creating art in various forms — pottery, graphic design, portraiture. and for me, CSS art! In case you missed it, I wrote a little bit about my motivation to take on this challenge here:

Join Me for 100 Days of Pure CSS

Suzanne Aitchison ・ May 16 ’20 ・ 2 min read

5 lessons from 50 days of CSS art

Suzanne Aitchison ・ Jul 4 ’20 ・ 4 min read

Today I finally finished the project, and to celebrate, I thought I’d share a couple of my favourite pieces from the second half 😄

My favourite piece overall — a self portrait!

My favourite piece (which probably says a lot about my ego haha) is a portrait of myself! This was my only attempt in the project to make a human, which felt a bit daunting, but I think it looks like me and I’m really happy with the result!

My favourite CSS animal

I made a lot of animals over the 100 days. They make for really good projects, as they’re instantly recognisable, can be simplified a lot into basic shapes, and also they’re cute, so what’s not to love? I made so many animals, I started a collection in CodePen for them. If you like you can visit my CSS Zoo But since my last update on Dev 50 days ago, my favourite animal piece has been a portrait of my friend’s dog, Colby. Here he is peeping over a picket fence:

My favourite animation

This one is harder to choose! A lot of my animations have been very simple, largely just due to the time constraints of creating an image a day. Now the project is finished I’m looking forward to learning more about animation and creating some more complex stuff! But of the second half of the project, my favourite animation is probably this little hamster wheel:

My favourite «realistic» one

To be honest I didn’t do a lot of realistic images, and one thing I discovered over the project is that I much prefer the fun of finding the most basic shapes within an idea and creating fairly flat illustrations. But of the ones where I did try to make it slightly more realistic, I think this lava lamp is my favourite — my only regret is that I didn’t have time to animate it!

My favourite «weird one»

Part of the challenge with this project has been to come up with an idea to make each day. Something that’s simple enough to be achievable in whatever time I have that evening, but also something that will hopefully be fun and interesting. Some of the ideas that come into my head are. um.. strange, sometimes. My favourite from the «strange» pile is this block of cheese:

What now?

It’ll be strange having more time on my hands in the next little while, it’s become such a habit to make an image every day! One thing I’d like to do more of is writing tutorials here on Dev to help others get started with CSS art. I created one a while ago to make a sheep, and would love to do more:

Источник