How was the penguin created?

MatthewGeneNavarro · August 23, 2021, 2:52pm

I’m on the “Basic CSS : Use CSS variables to change several elements at once” lesson and i was wondering how the penguin was created if there are nothing but

tags. I don’t see any imported images or anything like that. Was the penguin really created with nothing but CSS? I would love to see a video creating the penguin from scratch so it can open my mind up to more use cases with CSS.

kevinSmith · August 23, 2021, 2:57pm

There are different ways to do this. But in this case it looks like they are just creating shapes with the css properties. You can mess with things like the border radiuses and positioning to see how it affects the image.

MatthewGeneNavarro · August 23, 2021, 3:05pm

Fantastic! Thank you for the quick response.
Do you mind making mention of the “different ways”? Just something brief enough to do help me do research on.

kevinSmith · August 23, 2021, 3:15pm

Well, this isn’t really my specialty. Certainly you could construct it with individual images and position them (or just the whole image). With images for the different parts, there are ways to apply filters and fills to get the colors you want. SVG files are good for that. You can also do things like inline SVG code and the canvas API. I’m sure there are also JS libraries to do it.

I wouldn’t worry about this at this point in your studies - you could easily get bogged down in that.

lm4v · August 23, 2021, 3:43pm

Welcome @MatthewGeneNavarro !
Isn’t it awesome how you can draw a pinguin in CSS right?
I don’t know how to explain how you can do it, but here there is a video of a person drawing a penguin in CSS step by step and it can help you to undestand it basics.

Click here to have some tutorials of drawing projects for beginers. And here there is a webpage that is a good reference when asking about coding.

Hope this can help you.

lasjorg · August 23, 2021, 3:47pm

There are a lot of CSS properties that can be used to draw and shape/position elements in such a way that they look like something else. Borders, shadows, gradients, clip-path, shapes using pseudo-elements, the list goes on. It’s not always practical (e.g. compared to SVG illustrations) but people can make pretty crazy stuff using pure CSS.