DEV Community

Cover image for A CSS Art from Demon Slayer

A CSS Art from Demon Slayer

Temani Afif on March 30, 2022

Another world, Another anime, and another CSS Art. Adding Tanjiro Kamado to the list. A CSS-only illustration 👇 In case you missed my previous...
Collapse
 
grahamthedev profile image
GrahamTheDev •

Truly incredible! ❤️

Collapse
 
imshivanshpatel profile image
SHIVANSH PATEL •

The control u have on CSS is really incredible

Collapse
 
claudiaraphael profile image
Clau •

amazing
I'm a python girl but this makes me excited about learning CSS and jumping into the modern front-end world, with other cool technologies, like react and node.js. @afif What arethe other technologies you use for coding and embedding your CSS art?

Collapse
 
afif profile image
Temani Afif •

it's only CSS, there is nothing else :)

I don't use any other technologies, tools or frameworks. I open a new Pen (codepen.io/pen/) and I start writing CSS from scratch

Collapse
 
auroratide profile image
Timothy Foster •

These are getting better and better each time! (and Demon Slayer is super good!)

Collapse
 
kumar_sons_off profile image
Priyanshu •

This is incredible! @afif ❤️

At a glance, I thought it's a April fools prank, this take me have a look at the code to check the image url 😅.....but not find!

Your collection blows up my mind, loved it! 🤩

Collapse
 
diballesteros profile image
Diego (Relatable Code) •

Looks really good! Also see the Luffy down there. Take my like.

Collapse
 
abolfazlhasanzadeh profile image
Abolfazl Hasanzadeh •

Wow😯

Collapse
 
dailydevtips1 profile image
Chris Bongers •

Dude this is amazing!
I'm crying out like Zenitsu now: Tanjirroooo!

Collapse
 
deveshanand18 profile image
Devesh Anand Srivastava • • Edited

This is incredible ❤️

Collapse
 
leandrodiascarvalho profile image
leandro dias de carvalho •

Amei o Projeto. É uma bela forma de estudar CSS vou experimentar

Collapse
 
dnavelasquez profile image
Diana Velásquez •

What kind of sorcery is this? Truly amazing! 🙌

Collapse
 
owenmaine profile image
Owen •

Wow this is awesome, fan of Kamado Tanjirou.

Collapse
 
faizal97 profile image
Faizal Ardian Putra •

Incredible!

Collapse
 
shaddyboy96 profile image
Biswa Bhusan •

MInd blowing

Collapse
 
aothoi profile image
Mehzabin Sadat Aothoi •

That's so cool!

Collapse
 
malik825 profile image
Malik825 •

This is simply incredible 🤩

Collapse
 
shijudevarajan profile image
Kellen •

Ah good work!

Collapse
 
wwwhowbeginnerscom profile image
Howbeginners •

It’s so interesting. The world would be nothing without CSS and HTML.

Collapse
 
amirrezaheydari profile image
amirreza heydari •

very nice

Collapse
 
atulcodex profile image
🚩 Atul Prajapati 🇮🇳 •

Hands up,

No competition

You are the great :)

Collapse
 
patriciax profile image
Tricia •

this is perfect I love it🙌

Collapse
 
renanfranca profile image
Renan Franca •

Where were you? I am glad that I found you here!
That's super awesome! I am a Demon Slayer fan! You push CSS art to the next level! Now you make me wonder if you could animate it ✨🙀

Collapse
 
afif profile image
Temani Afif •

stay tuned, crazier CSS art are on the way ;)

Collapse
 
irveloper profile image
Irving Caamal •

That is insane

Collapse
 
sznroe profile image
Sujan Rai •

Can you make Nezuko too??

Collapse
 
afif profile image
Temani Afif •

maybe in the future, stay tuned ;)

Collapse
 
k_penguin_sato profile image
K-Sato •

wow... Wish I could do that too

Collapse
 
papaibsow profile image
Ibrahima Sow •

Css legend level

Collapse
 
foxy4096 profile image
Tixie •

Aw man, this looks sick! ✨

I can just make a circle in css

Collapse
 
kanishkkhurana profile image
Kanishk Khurana •

I have seen many posts related to this where people use background-img as a joke, but your work is truly amazing ! congratulations!

Collapse
 
mlabarca profile image
Mauricio Labarca •

They had to master sun breathing to get through fine tuning those gradients 💯

Collapse
 
ilanaragao profile image
Ilan Aragão •

wow 😯
amazing!

Collapse
 
afif profile image
Temani Afif •

maybe I will make one in the future ;)

Collapse
 
psychedeliccode45 profile image
MarcusWay45 •

You are insane !!!

Collapse
 
trongnsiwa profile image
Nguyen Si Trong •

Are you CSS God??

Collapse
 
metak47 profile image
metak47 • • Edited

Çizim mükemmel ama hareketsiz bir nesne gibi...

Collapse
 
mairasmith profile image
MairaSmith •

You've done a wonderful job here.... wazifa to win court case

Collapse
 
davdev95 profile image
Davide Farioli •

Impressive, how did you made the radial-gradient for the earring?

Collapse
 
afif profile image
Temani Afif •

it's a lot of gradients for the earring. There are 2 radial (the red dot at the top and the gray curve at the bottom) then many linear-gradient to create the different lines that intersect at the red dot. This is one pseudo element.

Another pseudo element is for external part (to attach it to the ear) using one radial and one linear.

If you inspect the code, you can easily find it

Collapse
 
lateneze profile image
Ezekiel Laten •

This is incredible. My first time of seeing something like this. How do I start learning something like this?