DEV Community

Pure CSS Woman with Long Hair

Asyraf Hussin on August 04, 2022

Speed Code Video https://twitter.com/asyrafhussin4/status/1555103135869218816
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 •

(O)_(O)

Collapse
 
tomasz_frankowski profile image
Tomasz Frankowski •

👁👄👁

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
 
chrisgreening profile image
Chris Greening •

Fantastic work!

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
 
corgidevs profile image
Not MyRealName •

Very cool 😍

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
 
sjackson1665767 profile image
sjackson1 •

A woman with long hair exudes a timeless elegance that captivates the imagination. Her cascading locks, whether straight, wavy, or curly, frame her face with a natural beauty that is both powerful and enchanting. Long hair offers endless styling possibilities, from intricate braids and sleek ponytails to voluminous curls and sophisticated updos. It requires a dedicated hair care routine to maintain its health and shine, often involving regular trims, deep conditioning treatments, and gentle handling to prevent breakage. Ultimately, long hair is not just a style choice but a statement of femininity, patience, and personal care.

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
 
readymadecode profile image
Chetan Rohilla •

what an amazing art with CSS :)

Collapse
 
imiahazel profile image
Imia Hazel •

It is a marvelous example of CSS art. How many hours have you spent writing this fantastic code?

Collapse
 
lenorthefriend profile image
Lenor Nareg •

Awesome 😎

Collapse
 
chainguns profile image
Daniel •

This is crazy good! Props for your dedication to CSS

Collapse
 
robsonmuniz16 profile image
Robson Muniz •

Amazing job, I just loved it!
Thanks for sharing it!

Collapse
 
baasmurdo profile image
BaasMurdo •

Looks great ! very smooth !

Collapse
 
jungar1111 profile image
jungar1111 •

Wow...just wow...you should codify the techniques you use and teach a course....

Collapse
 
atulcodex profile image
🚩 Atul Prajapati 🇮🇳 •

It looks real painting 🎨😍💕

Collapse
 
calinbaenen profile image
Calin Baenen •

Why 👏 is 👏 it 👏 always 👏 women!!!
There are some men, but damn, can we get some gender-neutral up in here??
    /satire

Collapse
 
q1ngqode profile image
Q1ngQode •

This is awesome!

Collapse
 
ultimatefrancy profile image
FancyQueen 🥳👑🌸🌼😍 •

Wow... I wanna learn

Collapse
 
ideadpads145 profile image
JoeB •

how long did you finish this awesome art?

Collapse
 
alejmedinajr profile image
Alejandro Medina •

This is amazing!

Collapse
 
enyorose profile image
Enyorose •

This is actually amazing!

Collapse
 
akhilesh286 profile image
Akhilesh286 •

It's so good 😀😀😀👍👍

Collapse
 
mdndata profile image
Mirica Dragos-Neculai •

WOW