DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for A Colossal CSS Art!
Temani Afif
Temani Afif

Posted on • Updated on

A Colossal CSS Art!

Here I am with another CSS Art. I am back to my favorite Anime (Attack On Titan) to draw:

A CSS-only Colossal Titan!

In case you are not familiar with the Anime, here is an overview of the character:

Colossal Titan

I am still missing a few details and I will probably release a better version in the future πŸ˜‰


This time I did a better organization for the main colors so I can easily adjust them.

Below an interactive demo if you want to update the colors. Share your version in the comment section πŸ‘‡

It's also on Twitter if you want to spread the word πŸ“―


Someone: Where are all the cool tutorials and useful collections? πŸ€”

Me: A lot of great content will come soon and a heavy CSS collection is in progress as well 🀫

Stay Tuned


You want to support me?

buy me a coffee

OR

Become a patron

Top comments (20)

Collapse
 
grahamthedev profile image
GrahamTheDev

This is great bud, as expected you have already massively improved your technique this is epic! β€οΈπŸ¦„

although if you could see how the iPhone has done you dirty this time it’s hilarious!

Looks like a tall skinny woman with an insect on her belly looking down at her feet while naked 🀣

Collapse
 
afif profile image
Temani Afif

share a screenshot 😯😯

Collapse
 
grahamthedev profile image
GrahamTheDev • Edited on

🀣

Thread Thread
 
grahamthedev profile image
GrahamTheDev

It’s like an ink blot test, see what you see!

Thread Thread
 
afif profile image
Temani Afif

I see all the pixel values I should not have used πŸ˜›
Since the aspect-ratio is not supported all the percentages are getting to 0 and only the pixel values are working
It's a kind of "bunny-ghost" πŸ€”

Thread Thread
 
grahamthedev profile image
GrahamTheDev

I can see a bunny ghost or daemon! 😜

Thread Thread
 
codeonjim profile image
CodeOnJIm

@afif This is the horror of using static unit. Nonetheless, Killer work!

Collapse
 
codeonjim profile image
CodeOnJIm

🀣🀣

Collapse
 
jordanbusby profile image
Jordan

Hi Temani, I was wondering if learning SVG is important to mastering CSS? I have done a lot of your tutorials and I consider you to be one of the best. Do you know SVG? Will learning SVG help me to master CSS?

Thank you!

Jordan

Collapse
 
afif profile image
Temani Afif

SVG is not important to be good at CSS but it's a good skill that can be useful. SVGs are some kind of "images" and we use a lot of images in CSS (background, mask, etc) so SVG can help you create some complex shapes to be used in CSS. Shapes that may be hard to achieve with CSS.

Some SVG filter can also be useful in CSS (ex: dev.to/afif/css-shapes-with-rounde...).

So knowing SVG is a plus but you can master CSS without. I rarely use SVG in my works (almost never) but some of my complex code can be simplified with some little SVG when it comes to fancy shapes

Collapse
 
karandpr profile image
Karan Gandhi

Shinzou Sasageyo !!

Collapse
 
ben profile image
Ben Halpern

Wow

Collapse
 
lukeshiru profile image
Luke Shiru

Nice! :O

Collapse
 
saviorys profile image
saviorys

WOW. holy f this is impressive.

Collapse
 
gregorgonzalez profile image
Gregor Gonzalez

It cannot be! So awesome πŸ˜„ I didn't know that css can do that level of designs

Collapse
 
wushang1987 profile image
wangweidong

it looks very cool,nice job

Collapse
 
amircahyadi profile image
Amir-cahyadi

β€οΈπŸ‘

Collapse
 
guscarpim profile image
Gustavo Scarpim

Nicee job!!

Collapse
 
dailydevtips1 profile image
Chris Bongers

Nice!

This is great work, love the interactive version

Collapse
 
codeonjim profile image
CodeOnJIm

Insane!!

Let's Get Hacking

Join the DEV x Linode Hackathon 2022 and use your ingenuity and creativity to build using Linode.

β†’ Join the Hackathon <-