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
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.
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.
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.
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.
Hope this can help you.
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.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.