DEV Community

Cover image for A One Piece of CSS Art!
Temani Afif
Temani Afif

Posted on • Edited on

73 23

A One Piece of CSS Art!

After my first "draft" of Livaï Ackerman, I am back with another CSS art and this time I am exploring the One Piece universe.

A CSS-only Monkey D. Luffy

This time, the result was quite good compared to the last one. I dropped the use of clip-path and focused on gradients.

I used only 11 Divs (I can do better but I got lazy ...) and spent around 10h.

It's responsive and the browser support is good

It's on twitter if you want to give some likes or share it 👇

See you the next CSS Art.


buy me a coffee

OR

Become a patron

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (15)

Collapse
 
grahamthedev profile image
GrahamTheDev • Edited

This does look better as the curves on the hair are much more clean now!

Looks great! 😍

Collapse
 
sonangrai profile image
Sonahang Rai

Love this

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Nice! And looking forward to the next one :)

Collapse
 
dongphuchaitrieu profile image
Đồng Phục Hải Triều

Awesome!

Collapse
 
siddharthshyniben profile image
Siddharth

This is awesome!

Next up: make it animated with just CSS :)

Collapse
 
afif profile image
Temani Afif

I will make even better ;)

Collapse
 
thormeier profile image
Pascal Thormeier

Holy heck, that's great! The things people like you can create with CSS always amazes me. Looking forward to the "something crazy" then!

Collapse
 
negue profile image
negue

awesome :)

Collapse
 
dailydevtips1 profile image
Chris Bongers

Nice work!

This looks great

Collapse
 
sehgalspandan profile image
Spandan Sehgal

Awesome
Amazed to see that we can do such things from CSS itself

Collapse
 
rahulchaudhary2244 profile image
Rahul Chaudhary

This looks awesome 😍

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools can’t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video