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
 
spo0q profile image
spO0q ๐Ÿ’ • Edited

Another one!

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
 
dailydevtips1 profile image
Chris Bongers

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

Collapse
 
abolfazlhasanzadeh profile image
Abolfazl Hasanzadeh

Wow๐Ÿ˜ฏ

Collapse
 
viviurbano profile image
Viviane Urbano

This is just amazing! Great job

Collapse
 
papaibsow profile image
Ibrahima Sow

Css legend level

Collapse
 
sznroe profile image
Sujan Rai

Can you make Nezuko too??

Collapse
 
afif profile image
Temani Afif

maybe in the future, stay tuned ;)

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
 
k_penguin_sato profile image
K-Sato

wow... Wish I could do that too

Collapse
 
dnavelasquez profile image
Diana Velรกsquez

What kind of sorcery is this? Truly amazing! ๐Ÿ™Œ

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
 
malik825 profile image
Malik825

This is simply incredible ๐Ÿคฉ

Collapse
 
shijudevarajan profile image
Kellen

Ah good work!

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
 
foxy4096 profile image
Foxy4096

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
 
patriciax profile image
Tricia

this is perfect I love it๐Ÿ™Œ

Collapse
 
leandrodiascarvalho profile image
leandro dias de carvalho

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

Collapse
 
deveshanand18 profile image
Devesh Anand Srivastava • Edited

This is incredible โค๏ธ

Collapse
 
atulcodex profile image
๐Ÿšฉ Atul Prajapati ๐Ÿ‡ฎ๐Ÿ‡ณ

Hands up,

No competition

You are the great :)

Collapse
 
daddasoft profile image
Dadda Hicham

that awesome brooo <3

Collapse
 
afif profile image
Temani Afif

maybe I will make one in the future ;)

Collapse
 
ilanaragao profile image
Ilan Aragรฃo

wow ๐Ÿ˜ฏ
amazing!

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
 
lateneze profile image
Ezekiel Laten

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

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