Pure CSS Images - (Almost) Everything Is Possible

Pure CSS Images - (Almost) Everything Is Possible
0

#1

Hi there!

I know a lot of people don’t like CSS all that much and some actually hate writing CSS. But CSS can be pretty awesome, for example, these are all made using CSS only.

dorytaco23 - Supergirlvampireelephantcheesecake

I made these images through a daily challenge (created by Mike Mangialardi) in order to get better at CSS and learn how to use Sass (a CSS preprocessor). As you can see you can do a lot of cool things with CSS and hopefully this will inspire some of you to work more with CSS and maybe even start this challenge as well.

You might be curious about how images are made with CSS, which is why I’ve started recording my coding and a few videos are now available on my YouTube channel. All my images are also on Codepen and Mike has made some great posts about how to get started making CSS images. So if you find this interesting, check it out!


Here is the speed code of an owl I made yesterday!

So, if you have any questions about this, please don’t hesitate to ask. I’m also available on Twitter and of course here on the forum. To see more of my work, like the freeCodeCamp projects I’ve done, you can also check out my portfolio!

I hope you feel more inspired to learn CSS!

Cheers,
Victoria


#2

I love what you do. I’m also a big fan of CSS, but I spend most of my time playing with CSS animations on codepen. :slight_smile:
I should also try some CSS images.

Keep up the good work!


#3

Looks nice. Did anyone compare it to embedding svgs — do you save on size?


#4

wahoo! amazing i wish i get there.


#5

#6

I’ve been doing those too! I’m really gutted that he’s closed down the site now, so I’m hoping to find all the prompts on Twitter and Codepen.

Here’s a couple of my favourite ones that I’ve done:

Untitled-2

I sketch all of mine out before I make them, and break the images down into more manageable shapes, which I’ve blogged about here. I’d never done anything like this before, and thought it would be super difficult, but I’m finding it really fun.

Mine are all on Codepen too


#7

These are all freaking adorable.


#8

Awesome stuff, they all look amazing :slight_smile:
Gonna have to give it a go today and see how I do myself :smiley:

CSS is great in my opinion, lots of stuff that you can do with it


#9

I’ve actually already seen you stuff and love it! :heart_eyes:
I also sketch mine out and break them down into shapes, it really makes a great difference when you start coding!


#10

haven’t done this actually! I also haven’t worked with SVG before, but I definitely want to learn it soon.
I’ll look around to see if anyone has done this comparison!


#11

Thank you!
I really want to get into more animations. Your roses are so cute and I also really love your typography animations.
Look forward to see more from you!


#12

After an exercise or two, the only benefit of using css for this that I can see is mathematical beauty. No munching with coordinates, but all about symmetries and offsets.

It’s also a good question if someone wrote a converter yet. :wink:
A quick search found two older plugins for inkscape and one for npm. Likely can’t handle much complexity though:




#13

Hi , i have seen your work its awesome , can you please see my projects and advise me how can i improve them , thank you for your time the link is