Discussion of Pure CSS Woman with Long Hair

José Muñoz • Aug 4 '22

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

Chris Jarvis • Aug 4 '22

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

Asyraf Hussin • Aug 4 '22

Thank you

Gourav Singh Rawat • Aug 4 '22

(O)_(O)

Tomasz Frankowski • Aug 4 '22

👁👄👁

Chris Greening • Aug 5 '22

Fantastic work!

Asyraf Hussin • Aug 5 '22

Thank you

eye-c • Aug 5 '22

this is mind-boggling. Well done!

Asyraf Hussin • Aug 5 '22

Thank you

Andrew Baisden • Aug 8 '22

Whoa, that's seriously impressive!

Asyraf Hussin • Aug 9 '22

Thank you

Leví Arista • Aug 4 '22

Cool!

Anton Rhein • Aug 5 '22

Very cool 😍

Asyraf Hussin • Aug 5 '22

Thank you

Rizky Dwi Hidayat • Aug 5 '22

Really nice

Asyraf Hussin • Aug 5 '22

Thank you

Manou-coder • Aug 5 '22

Its beautifull

Asyraf Hussin • Aug 5 '22

Thank you

Raj Sahu • Aug 4 '22

:D

Asaf Limi Agranat • Aug 6 '22

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?

Himanshupal0001 • Aug 5 '22

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?

Michael • Aug 5 '22 • 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.