This UI Engineer Makes Stunning Digital Art Entirely From HTML & CSS Code

Web developers are losing their minds over Diana Smith’s work, and honestly, you should, too, because it brilliantly chronicles the history of the Internet in a way that hasn’t been done before.

Smith created an elaborate image called “Pure CSS Francine” online, and it’s not at all like an image you’d click on to save. The only way to archive it is to make a screenshot of it. And it looks the same every time you do so. Why? How? Francine is made entirely with CSS (cascading style sheets), which is used to create web pages. If you’re adept with code-writing, which Smith apparently is, you can do much more than that, too.

More: Diana Smith, GitHub h/t: papermag

Creating images with CSS involves writing HTML code to display an object in a web browser. From there, you can modify the code to manipulate its size dimensions, color, shape, and more.

CSS image creation is essentially a process of layering and arranging shapes. But since the process is done entirely with a keyboard (no mouse! no touchscreen! no pre-made filter!), you can’t really check how the image is shaping up as you go.




(Visited 1 times, 1 visits today)

Leave Your Comment Below

More Inspiring Stories

Before Seatbelts and Airbags: Terrible Photos of Car Accidents in the Early 20th Century
1981 SAAB 906 Turbo, Sweden’s 6-Wheeled Colossal With Full Variety of Gadgets
Explorer Visits Abandoned and World's Largest Ekranoplan, Here Are Some Great Pictures of The Inside and Outside
Everyday Things That Look Totally Different Under A Microscope
Meet Gogoro Smartscooter - The Smartphone-Synched Bike
Monkey Controls Robotic Arm With Brain Implants
Lily - The World’s First Throw-And-Shoot Camera
These Illuminated Cylinders Display Fairy Tales When People Get Inside To Power Them
Inside Opower's Arlington Office: A robot, a Scooter and Many, Many Couches
Superb Honda SuperSport Eden By Bandit9 Motorcycles
Skull Walker: A Creepy Scuttling Skull-Creature
Metropolis II: Artist Creates Futuristic Miniature City in LA
Malls In Thailand Replace Lift Buttons With Foot Pedals To Contain Coronavirus Spread
Autonomous And Fully Connected BMW Motorrad VISION NEXT 100 Motorcycle
This AI-Based App Turns People Into Cartoon Characters
Stunning Photos Of Volkswagen Beetle Rat Rods With Patina Look On The Streets
Chinese Welder Spends A Year Building Life-size Transformers Model For His Lucky Son
Chinese Company Set Up A Simulation Of Mars In The Gobi Desert
Just A Vespa Jet Ski
1938 Buick Y-Job, the World’s First Concept Car
Honeywell Kitchen Computer, The $70,000 Machine That No One Bought In The Late 1960s
Japan’s High-Tech Cemetery Uses Electronic ID Cards To Identify The Dead
Homebuilt Real Flight Simulator
The Other Me
The 1980 Citroën Karin Reimagines The Car As Futuristic Sci-Fi Masterpiece
"Out Of This World": Photographer Egor Rogalev Visits The Museum Of Soviet Space Travel
Coolest Designed Products Of 2016
Ni Hao, Auto-Bots! Transformers Greet Fans in Beijing
Inside Facebook’s Menlo Park Headquarters
The Nano-Falcon