DEV Community

Asyraf Hussin
Asyraf Hussin

Posted on

Pure CSS Woman with Long Hair

Speed Code Video https://twitter.com/asyrafhussin4/status/1555103135869218816

Top comments (39)

Collapse
 
josemunoz profile image
José Muñoz

your stuff is so good, you should make a tutorial series on CSS art

Collapse
 
jarvisscript profile image
Chris Jarvis

Watched the video, still hard to believe it's made with code. Well done.

Collapse
 
asyrafhussin4 profile image
Asyraf Hussin

Thank you

Collapse
 
seek4samurai profile image
Gourav Singh Rawat

(O)_(O)

Collapse
 
tomasz_frankowski profile image
Tomasz Frankowski

👁👄👁

Collapse
 
chrisgreening profile image
Chris Greening

Fantastic work!

Collapse
 
asyrafhussin4 profile image
Asyraf Hussin

Thank you

Collapse
 
eyec profile image
eye-c

this is mind-boggling. Well done!

Collapse
 
asyrafhussin4 profile image
Asyraf Hussin

Thank you

Collapse
 
andrewbaisden profile image
Andrew Baisden

Whoa, that's seriously impressive!

Collapse
 
asyrafhussin4 profile image
Asyraf Hussin

Thank you

Collapse
 
leviarista profile image
Leví Arista

Cool!

Collapse
 
muchwowdodge profile image
Anton Rhein

Very cool 😍

Collapse
 
asyrafhussin4 profile image
Asyraf Hussin

Thank you

Collapse
 
rizkydh profile image
Rizky Dwi Hidayat

Really nice

Collapse
 
asyrafhussin4 profile image
Asyraf Hussin

Thank you

Collapse
 
manoucoder profile image
Manou-coder

Its beautifull

Collapse
 
asyrafhussin4 profile image
Asyraf Hussin

Thank you

Collapse
 
rajsahu profile image
Raj Sahu

:D

Collapse
 
asafagranat profile image
Asaf Limi Agranat

Beautiful execution. But then I ask myself - what's the point here? Aside from being a tour-de-force of squeezing html and css into what its not meant for - and for fun value it certainly is legit - why not use SVG, which can achieve a yet superior result with far less code, and still keep browser presentability, with actual manageable sizing, resposivity and motion control?

Collapse
 
himanshupal0001 profile image
Himanshupal0001

what is the meaning of &-1 .....?
Also how you make everything absolute so that all the divs consize in the container and not shift their position on screen size change?

Collapse
 
bassohr profile image
Michael • Edited

Codepens are a good source for learning.
&-1 is a nested Sass selector. It selects the div with class="hair-1" since it is nested in the .hair class selector. The use of the ampersand as a placeholder for the parent will be incorporated in the CSS Nesting Module.

Collapse
 
himanshupal0001 profile image
Himanshupal0001

Thanks for the explanation.

Collapse
 
ultimatefrancy profile image
FancyQueen 🥳👑🌸🌼😍

Wow... I wanna learn