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 Author

Thank you

Collapse
 
seek4samurai profile image
Gourav Singh Rawat

(O)_(O)

Collapse
 
chrisgreening profile image
Chris Greening

Fantastic work!

Collapse
 
asyrafhussin4 profile image
Asyraf Hussin Author

Thank you

Collapse
 
leviarista profile image
Levรญ Arista

Cool!

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 Author

Thank you

Collapse
 
andrewbaisden profile image
Andrew Baisden

Whoa, that's seriously impressive!

Collapse
 
asyrafhussin4 profile image
Asyraf Hussin Author

Thank you

Collapse
 
manoucoder profile image
Manou-coder

Its beautifull

Collapse
 
asyrafhussin4 profile image
Asyraf Hussin Author

Thank you

Collapse
 
rizkydh profile image
Rizky Dwi Hidayat

Really nice

Collapse
 
asyrafhussin4 profile image
Asyraf Hussin Author

Thank you

Collapse
 
muchwowdodge profile image
Anton Rhein

Very cool ๐Ÿ˜

Collapse
 
asyrafhussin4 profile image
Asyraf Hussin Author

Thank you

Collapse
 
sadigulbey profile image
Sadi Gรผlbey

Wow...

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 on

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
 
jungar1111 profile image
jungar1111

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

Collapse
 
ultimatefrancy profile image
FancyQueen ๐Ÿฅณ๐Ÿ‘‘๐ŸŒธ๐ŸŒผ๐Ÿ˜

Wow... I wanna learn

Collapse
 
readymadecode profile image
Chetan Rohilla

what an amazing art with CSS :)

Collapse
 
baenencalin 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
 
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
 
atulcodex profile image
๐Ÿšฉ Atul Prajapati ๐Ÿ‡ฎ๐Ÿ‡ณ

It looks real painting ๐ŸŽจ๐Ÿ˜๐Ÿ’•

Collapse
 
q1ngqode profile image
Q1ngQode

This is awesome!

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
 
enyorose profile image
Enyorose

This is actually amazing!

๐ŸŒš Browsing with dark mode makes you a better developer by a factor of exactly 40.

It's a scientific fact.