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 Singh Rawat

(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
 
leviarista profile image
Leví Arista

Cool!

Collapse
 
chrisgreening profile image
Chris Greening

Fantastic work!

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
 
manoucoder profile image
Manou-coder

Its beautifull

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
 
rajsahu profile image
Raj Sahu

:D

Collapse
 
muchwowdodge profile image
Anton Rhein

Very cool 😍

Collapse
 
asyrafhussin4 profile image
Asyraf Hussin

Thank you

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
 
baasmurdo profile image
BaasMurdo

Looks great ! very smooth !

Collapse
 
readymadecode profile image
Chetan Rohilla

what an amazing art with CSS :)

Collapse
 
ultimatefrancy profile image
FancyQueen 🥳👑🌸🌼😍

Wow... I wanna learn

Collapse
 
calinzbaenen 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
 
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
 
q1ngqode profile image
Q1ngQode

This is awesome!

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
 
robsonmuniz16 profile image
Robson Muniz

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

Collapse
 
chainguns profile image
Daniel

This is crazy good! Props for your dedication to CSS

Collapse
 
enyorose profile image
Enyorose

This is actually amazing!

Collapse
 
mdndata profile image
Mirica Dragos-Neculai

WOW

Collapse
 
ideadpads145 profile image
JoeB

how long did you finish this awesome art?

Collapse
 
alejmedinajr profile image
Alejandro Medina

This is amazing!

Collapse
 
akhilesh286 profile image
Akhilesh286

It's so good 😀😀😀👍👍