Today is the start of #100DaysProjectScotland 🎉 I'll be taking part for the first time, making 100 pure CSS images. I'm totally new to CSS art but I'm hoping after 100 days my skillz might improve! 😁👩‍💻 I'll add everything to a @CodePen collection: https://bit.ly/100daysCSS 
Suzanne Makes 100 Things In CSS - a Collection by Suzanne Aitchison on CodePen

As part of the [100 Days Project Scotland 2020](https://www.100daysscotland.co.uk/) I'm setting out to learn how to make images from nothing but CSS! Lots of project participants will be crafting,...

https://bit.ly/100daysCSS
Day 1 is a little blinky mouse 🐭 I had some fun trying to figure out how to make the (slightly) curly tail. You can check it out on @CodePen here https://codepen.io/aitchiss/full/MWaGBKZ #100DaysProjectScotland
Day 2 is a corgi pupper🐶 Had some challenges with this one trying to get triangular ears without pointy tops - harder than I thought! Figuring out that you can use masking techniques in CSS to do these kind of things. CodePen is https://codepen.io/aitchiss/full/zYvmWrp #100DaysProjectScotland
Day 3 is me refusing to get up this morning, but re-imagined in CSS 😄 TIL the default timing function for animations isn't linear... CodePen is at https://codepen.io/aitchiss/pen/xxwymaG #100daysProjectScotland #100daysProjectScotland2020
Day 4 - I need to do some laundry. So I made a @CodePen of my washing machine instead of doing it 💁🏻‍♀️ You can view the pen at: https://codepen.io/aitchiss/pen/GRpwOGK #100daysProjectScotland #100daysProjectScotland2020
Day 5 - my co-worker shared a pic of his cat squishing into a box, so I immortalised Rupert in CSS. Link to the @CodePen (in which I overuse `skew`) is here https://codepen.io/aitchiss/pen/mdeaJOB #100daysProjectScotland #100daysProjectScotland2020
Day 6 - nearly the weekend! Today's effort is a surgeonfish 🐟 It could use a lot of refactoring but I'm gonna squish the perfectionist tendencies otherwise 100 days is gonna be loooong. @CodePen is at https://codepen.io/aitchiss/full/abvPXVO #100daysProjectScotland #100daysProjectScotland2020
Day 7 - fun fact - it is an extremely rare occurrence for me to go an evening without a chamomile tea. Looking forward to a nice cuppa and a chilled Friday night this evening 🍵 Nothing fancy but the @CodePen for this is at https://codepen.io/aitchiss/pen/pojGdzX #100daysProjectscotland
Day 8 - SWOOSH! This one was really fun - I might play around a bit more with the animation later as it's not 100% as I want it. And yes, this is a totally accurate representation of my basketball skills 💁‍♀️ Check it out on @CodePen https://codepen.io/aitchiss/pen/ZEbwgVx #100daysProjectScotland
Day 9 is #AnimalCrossing 's Tom Nook. Since lockdown started I've racked up a lot of debt to this guy. Had a bit of fun with box shadows for this one. @CodePen is at https://codepen.io/aitchiss/pen/ZEbqJJP #100daysProjectScotland #100daysProjectScotland2020
Day 10 is Lyra! I've been 'borrowing' this pup a few times a week for years now, and I'm missing her a lot during lockdown. I hope she approves of her CSS-ified portrait. @CodePen is at https://codepen.io/aitchiss/pen/rNOKPLG #100daysProjectScotland #100daysProjectScotland2020
Day 10 is Lyra! I've been 'borrowing' this pup a few times a week for years now, and I'm missing her a lot during lockdown. I hope she approves of her CSS-ified portrait. @CodePen is at https://codepen.io/aitchiss/pen/rNOKPLG #100daysProjectScotland #100daysProjectScotland2020
Day 10 is Lyra! I've been 'borrowing' this pup a few times a week for years now, and I'm missing her a lot during lockdown. I hope she approves of her CSS-ified portrait. @CodePen is at https://codepen.io/aitchiss/pen/rNOKPLG #100daysProjectScotland #100daysProjectScotland2020
Day 11 - Only been back at work for a few hours so far this week but already daydreaming about a cheeky gin and tonic this evening. Have a wee look at the @CodePen https://codepen.io/aitchiss/pen/eYpXodg #100daysProjectScotland #100daysProjectScotland2020
Day 12 - This is what happens in my head when I realise for the 100th time I'm looking at production and not my local instance💡Check out the 4 div wonder on @CodePen https://codepen.io/aitchiss/pen/GRpLvoY #100daysProjectScotland #100daysProjectScotland2020
Day 13 - I wanted to play around a bit with 3D shapes, so today is a Rubik's cube (in pastel colours, of course 💁🏻‍♀️) You can find it on @CodePen at https://codepen.io/aitchiss/pen/bGVyEEZ #100daysProjectScotland #100daysProjectScotland2020
Day 14 - a rosy maple moth! I only found out these cuties exist last week; thought I'd have some fun trying to recreate in CSS. Not my favourite so far but we can all agree these moths are cute 😍 @CodePen at https://codepen.io/aitchiss/pen/BaoeGeV #100daysProjectScotland
Day 14 - a rosy maple moth! I only found out these cuties exist last week; thought I'd have some fun trying to recreate in CSS. Not my favourite so far but we can all agree these moths are cute @CodePen at https://codepen.io/aitchiss/pen/BaoeGeV #100daysProjectScotland
Day 14 - a rosy maple moth! I only found out these cuties exist last week; thought I'd have some fun trying to recreate in CSS. Not my favourite so far but we can all agree these moths are cute @CodePen at https://codepen.io/aitchiss/pen/BaoeGeV #100daysProjectScotland
I stopped posting these for a bit there, but been keeping up progress in the background. Day 15 was a wee owl pal - @CodePen is at https://codepen.io/aitchiss/pen/wvKLqpR #100daysProjectScotland #100daysProjectScotland2020
And day 16 was a removal van. Our home move got postponed due to lockdown.. really pleased to be finally moving out of temporary accomm at the end of this month @CodePen of it is here: https://codepen.io/aitchiss/pen/NWGQWav #100daysProjectScotland #100daysProjectScotland2020
Day 17 was a cheeky wee latte - check out the @CodePen at https://codepen.io/aitchiss/pen/BaoXvvO #100daysProjectScotland #100daysProjectScotland2020
And day 18 is a window box of pansy flowers - this was one of my favourites so far and I learned a bit about scoped CSS variables in the process😊 Check it out in @CodePen https://codepen.io/aitchiss/pen/jObgdwE #100daysProjectScotland #100daysProjectScotland2020
Day 19 was some watermelon for the little heatwave we had ☀️ Had a little fun experimenting with box-shadows to make the curved stripes - have a look on @CodePen https://codepen.io/aitchiss/pen/jOWNazw #100daysProjectScotland #100daysProjectScotland2020
And day 20 was a little bobbin of thread, partly inspired by me missing my sewing machine locked away in storage. Need to work on making the centre look more round 🤔 It's on @CodePen at https://codepen.io/aitchiss/pen/XWXWBPZ if you have any ideas 😄 #100daysProjectScotland
Day 21 things got a little bit meta and I made a CSS picture of a picture 🖼 You can find it on @CodePen here https://codepen.io/aitchiss/pen/VweYmEM #100daysProjectScotland #100daysProjectScotland2020
Day 22 I made a cactus 🌵 I'm doing it all without any JS and the most vanilla of CSS/HTML so I'll admit adding a bunch of spikes was out of the question 😅 Find the smoothest of cacti on @CodePen https://codepen.io/aitchiss/pen/vYLOBEK #100daysProjectScotland #100daysProjectScotland2020
Day 23 - for some reason I really wanted to make a toaster animation since I started this project. And day 23 it became a reality. The animation looks smoother in @CodePen than in this gif-ified version https://codepen.io/aitchiss/pen/XWXbgWX #100daysProjectScotland #100daysProjectScotland2020
Day 24 - I love bees, so here we are 🐝 Had some fun using clip-path to make hexagons - have a wee look in the @CodePen https://codepen.io/aitchiss/pen/XWXbBdX #100daysProjectScotland #100daysProjectScotland2020
Day 25 felt like a milestone, and I made some animated rainbows to celebrate - it is pride month after all 🏳️‍🌈 Have a wee look at the @CodePen at https://codepen.io/aitchiss/pen/dyGYOWo #100daysProjectScotland #100daysProjectScotland2020
Aaaand finally we're back up to date with day 26 with some playing cards ❤️♣♦♠ The @CodePen lives at https://codepen.io/aitchiss/pen/wvMMKMj #100daysProjectScotland #100daysProjectScotland2020
Day 27 is a little *experiment* (see what I did there?) that coincides nicely with the latest #codepenChallenge - check out the @CodePen at https://codepen.io/aitchiss/pen/YzwqzBr #100daysProjectScotland #100daysProjectScotland2020
Day 28 and I made a wee piggy on @CodePen ❤🐷 https://codepen.io/aitchiss/pen/abdNKGR #100daysProjectScotland #100daysProjectScotland2020
Day 29 is a cheeseburger 🍔 (100% vegan, of course 🌱) - made in @CodePen at https://codepen.io/aitchiss/pen/ExPygPP
It was too wide so I changed it 😁 Now I'm going to step away...
Day 30 - I made a wee ladybug (ladybird to us UK folk) over my morning coffee🐞 - inspired by the fact I was also listening to the latest @LadybugPodcast 😀 Check her out on @CodePen https://codepen.io/aitchiss/pen/eYJzywB (and definitely check the podcast out too!) #100daysProjectScotland
Day 31 and I feel like a nice, gentle, calming candle is in order. Check out the @CodePen https://codepen.io/aitchiss/pen/PoZzrKb #100daysProjectScotland #100daysProjectScotland2020
Day 32 and I don't know where in my brain this came from, but it's a dog sliding down a slide. Partly inspired by this week's @CodePen #codepenChallenge prompt. Check out his happy wee face: https://codepen.io/aitchiss/pen/qBbaKGM #100daysProjectScotland #100daysProjectScotland2020
Day 33 is a duck. He looks a bit lonely 💔 🦆 You can visit him in his @CodePen at https://codepen.io/aitchiss/pen/GRojLzx #100daysProjectScotland #100daysProjectScotland2020
For day 34 I made three leafcutter ant pals 🐜. I absolutely LOVE ants in all their many varieties so really enjoyed this one. Check out the @CodePen here: https://codepen.io/aitchiss/pen/ExPNJYr #100daysProjectScotland #100daysProjectScotland2020
Day 35 is a puffin! You can see him in all his cuteness on @CodePen at https://codepen.io/aitchiss/pen/vYLgdBm #100daysProjectScotland #100daysProjectScotland2020
Day 36 and I made a grumpy wee teddy bear 🐻 Think she needs a hug. You can visit her in @CodePen at https://codepen.io/aitchiss/pen/ZEQeGXz #100daysProjectScotland #100daysProjectScotland2020
Day 37 is one for all the Rick & Morty fans - Pickle Rick! If you don't watch Rick & Morty, then I guess it's just an out of context pickle with a face 😂 Via @CodePen https://codepen.io/aitchiss/pen/jOWBbNO #100daysProjectScotland #100daysProjectScotland2020
Day 38 and I'm slipping a day behind because guess what? I just moved house yesterday! So here's a quick little key for today. The @CodePen is at https://codepen.io/aitchiss/pen/ZEQKjyQ #100daysProjectScotland #100daysProjectScotland2020
Day 39 - another quick and simple one while I'm in unpacking hell 😅 Since yesterday was a key, today is a little padlock https://codepen.io/aitchiss/pen/RwrgboR #100daysProjectScotland #100daysProjectScotland2020
Day 40 - I'm back up to date 🎉 Please enjoy this happy wee sheep 🐑 - you can visit her in @CodePen at https://codepen.io/aitchiss/pen/RwrgWLy #100daysProjectScotland #100daysProjectScotland2020
Day 41 - gotta fit in plenty ice cream before the thunderstorms arrive in the next few days, so I made a wee scoop of raspberry ripple in @CodePen ☀️ https://codepen.io/aitchiss/pen/gOPRvMw #100daysProjectScotland #100daysProjectScotland2020
Day 42 and I made some cogs! The animation looks smoother in the @CodePen if you want to check it out at https://codepen.io/aitchiss/pen/NWxvqey #100daysProjectScotland #100daysProjectScotland2020
Day 43 is a wee hot air balloon🎈 check it out in @CodePen at https://codepen.io/aitchiss/pen/zYrdmqa #100daysProjectScotland #100daysProjectScotland2020
Day 44 is a wind turbine! Gotta love that green energy🌱 As always the animation looks a bit nicer if you check her out in @CodePen at https://codepen.io/aitchiss/pen/qBbPEZX #100daysProjectScotland #100daysProjectScotland2020
Day 45 and I tried to make a little shower animation 🛁 It's not _quite_ right but I still like it for a quick lunchtime effort 😁 See it in @CodePen at https://codepen.io/aitchiss/pen/yLezodg #100daysProjectScotland #100daysProjectScotland2020
Day 46 and looks like a wee alien pal has gone out for a zoom. mind and not get beamed up eh 👽 check it out in @CodePen - https://codepen.io/aitchiss/pen/VwervVm #100daysProjectScotland #100daysProjectScotland2020
Day 47 is a parrot - I needed a bit of brightness in my day so thought some fun with gradients in primary colours ❤️ Check her out in @CodePen https://codepen.io/aitchiss/pen/XWXzxGq #100daysProjectScotland #100daysProjectScotland2020
Day 48 - I've been missing the gym in lockdown, so I made a little bench press rig in @CodePen https://codepen.io/aitchiss/pen/qBbpmdV 🏋️‍♀️ Very simple shapes in this one so had a little time to have some fun with gradients #100daysProjectScotland #100daysProjectScotland2020
Day 49 - nearly halfway! It's been another rainy day in Edinburgh (Scottish summer eh), so here's an umbrella 🌧 made in @CodePen https://codepen.io/aitchiss/pen/yLepqez #100daysProjectScotland #100daysProjectScotland2020
Day 50 and we're halfway 🎉 I made some balloons in @CodePen to celebrate 🎈 https://codepen.io/aitchiss/pen/gOPvbOm #100daysProjectScotland #100daysProjectScotland2020
Day 51 is a lobster🦞 - fun fact: one of the first pieces of clothing I ever made was a skirt in a cutesy lobster print😄This fella lives in @CodePen at https://codepen.io/aitchiss/pen/eYJVGyd #100daysProjectScotland #100daysProjectScotland2020
Day 52 is a wee cupcake. Not a huge fan of cupcakes generally, but they make a cute CSS picture! I'm off to eat a tonne of biscuits instead 😂 Check it out in @CodePen at https://codepen.io/aitchiss/pen/jOWzEKv #100daysProjectScotland #100daysProjectScotland2020
Day 53 - it's a lovely sunny day here in Edinburgh, so here's a... penguin 😂 Feel free to pop on over and visit him in @CodePen at https://codepen.io/aitchiss/pen/KKVoeGK #100daysProjectScotland #100daysProjectScotland2020
Day 54 - having recently moved home, everything is kind of in disarray except our lovely new bathrooms 😂 so here's a nice little bathroom scene in @CodePen https://codepen.io/aitchiss/pen/gOPzLRv #100daysProjectScotland #100daysProjectScotland2020
Day 55 - it's a little plant in a plant pot! I enjoyed this one 😄 You can see it in @CodePen at https://codepen.io/aitchiss/pen/rNxvPGB #100daysProjectScotland #100daysProjectScotland2020
Day 56 - a seal! My partner actually suggested this one to me, and I think 10 out of 10 for him on a great idea. You can visit this water pupper in @CodePen https://codepen.io/aitchiss/pen/ZEQRpax #100daysProjectScotland #100daysProjectScotland2020
Day 57 - thanks to @TechThomas for the suggestion to try a Japanese mascot! This morning I made a CSS Shinjokun. I first heard about Shinjokun when John Oliver did a segment about their feud with Chiitan 😂 Check out the @CodePen https://codepen.io/aitchiss/pen/NWxzzEL
Day 57 - thanks to @TechThomas for the suggestion to try a Japanese mascot! This morning I made a CSS Shinjokun. I first heard about Shinjokun when John Oliver did a segment about their feud with Chiitan Check out the @CodePen https://codepen.io/aitchiss/pen/NWxzzEL
Day 57 - thanks to @TechThomas for the suggestion to try a Japanese mascot! This morning I made a CSS Shinjokun. I first heard about Shinjokun when John Oliver did a segment about their feud with Chiitan Check out the @CodePen https://codepen.io/aitchiss/pen/NWxzzEL
Day 58 is a highland coo (or cow to the non-Scots) - thanks to @V_Emmersonn for the idea! She's looking a wee bit sad so feel free to visit her in @CodePen and cheer her up a bit https://codepen.io/aitchiss/pen/VwedgVp #100daysProjectScotland #100daysProjectScotland2020
Day 59! @amit_sheen suggested I make something from a film - one of my faves is Withnail & I, so I made a British phonebox you can use to call your agent if you go on holiday by mistake - via @CodePen https://codepen.io/aitchiss/pen/rNxrJLq #100daysProjectScotland #100daysProjectScotland2020
Day 60 - I've missed live comedy and music during lockdown, so I felt like a little spotlight scene. Difficult to see without a wee zoom but I had a little experiment with shadows and light here on the mic stand - have a look in @CodePen https://codepen.io/aitchiss/pen/jOWvEey
Day 61 - bit blurry-headed from a day of super interesting UX training, so went for quite a minimal image today - a block of cheese! I don't actually eat cheese, but still it looks pretty - via @CodePen https://codepen.io/aitchiss/pen/yLexrdb #100daysProjectScotland #100daysProjectScotland2020
Day 62 - since moving house I've been enjoying some really top notch baths. So here's a little rubber duckie enjoying some bubbles of her own - via @CodePen https://codepen.io/aitchiss/pen/LYGgeNj #100daysProjectScotland #100daysProjectScotland2020
Day 63 - it's the countdown to the weekend! So I made an hourglass animation in @CodePen 😁 https://codepen.io/aitchiss/pen/rNxqEMP #100daysProjectScotland #100daysProjectScotland2020
OK I couldn't stop and she got an upgrade because I got excited about adding a conic gradient... *backs slowly away from @CodePen and the laptop*
Day 64 is a giraffe! I'm really tall so when I was younger kids used to call me a giraffe all the time... but giraffes are pretty gorgeous so 🤷‍♀️💁‍♀️ This gal lives in @CodePen at https://codepen.io/aitchiss/pen/RwrqVqw #100daysProjectScotland #100daysProjectScotland2020
Day 65 - having a lazy Sunday enjoying the lovely weather this weekend 🌥 - via @CodePen https://codepen.io/aitchiss/pen/JjGeagO #100daysProjectScotland #100daysProjectScotland2020
Day 66 - anyone else been watching a bit of Floor is Lava on netflix? It inspired today's choice of a lava lamp! Would love to revisit in future and add some animation, but no time today! Via @CodePen https://codepen.io/aitchiss/pen/pogqwgW #100daysProjectScotland
Day 67 - tonight's effort is 100% inspired by @Emileee_Rose 's cute puppy Colby. Here he is in @CodePen peeping over a picket fence to say hey 👋 https://codepen.io/aitchiss/pen/MWKLYBN #100daysProjectScotland #100daysProjectScotland2020
Day 68 - after my afternoon radiator-fixing attempts, the only thing that made sense was to reproduce it in CSS. Unfortunately I don't have pink walls and a green carpet though. Via @CodePen https://codepen.io/aitchiss/pen/WNrPKBZ #100daysProjectScotland #100daysProjectScotland2020
Day 69 (hehe, nice) - my Pixel 3 has been pretty smashed up for a while and today I finally caved and bought a new phone😄so here's my @CodePen dedicated to the memory of my faithful Pixel 3XL #100daysProjectScotland #100daysProjectScotland2020
Day 70 - fancied doing something a little bit magical today ✨ Via @CodePen https://codepen.io/aitchiss/pen/eYJXeKy #100daysProjectScotland #100daysProjectScotland2020
Day 71 was a wee floaty astronaut - she's just hanging about in @CodePen at https://codepen.io/aitchiss/pen/qBbwmqN #100daysProjectScotland #100daysProjectScotland2020
Day 72 - sticking with the space theme, I made a wee rocket in @CodePen 🚀 https://codepen.io/aitchiss/pen/OJMGqJr #100daysProjectScotland #100daysProjectScotland2020
You can follow @s_aitchison.
Tip: mention @twtextapp on a Twitter thread with the keyword “unroll” to get a link to it.

Latest Threads Unrolled:
Those who think consciousness raising & movement building are disconnected, or even a distraction from electoral politics have not paid attention to the history of social change.In this thread, we
Read more
The 2020s will be known as the Remote Work decadeA few predictions of what is likely to emerge[ a thread ] Third Space: Office and Working from Home will
Read more
1/29: Have you ever had a concept explained to you that helps frame complex issues you’ve been wrestling with and opens your eyes to new possibilities? A concept that I
Read more
By continuing to use the site, you are consenting to the use of cookies as explained in our Cookie Policy to improve your experience.