This UI Engineer Makes Stunning Digital Art Entirely From HTML & CSS Code – Design You Trust

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.




If you want more awesome content, subscribe to 'Oh, Design You Trust,' our brand new Facebook page! Trust me, you won't be disappointed.

More Inspiring Stories

What Has Been Seen... An Artist Created Absolutely Odd Surreal Portraits Of Deformed Faces
Gold ATM Activated, but not for Long
This Solar-Powered Ecocapsule Lets You Live Off-The-Grid Anywhere In The World
Phoenix Vehicle Made From Bamboo Cane Is The New Green Car
"Boyfriend Hug" Speakers Are The Perfect Way To Look Absolutely Normal In Public
NASA Captures Unique Elephant Face Image On Mars
Iceland Road Painted To Stop Arctic Terns Being Killed
This Art Collective Creates Concepts That Have Emerged From The Coronavirus Pandemic
A Wind Turbine is Illuminated in an Installation by French Artist Patrick Raynaud
T-Brain by Toyota
The Proliferation Of Nostalgia-Inducing LEGO Sets Indicates That They're Far More Than Just A Child's Toy
Photo Camera Woodgrip
This Miller Lite Beer Can Is A Video Game Controller
Close Up
Steve Jobs iPhone 4 Hard Case Covers on Sale. WTF?
The Latest Innovation In Child Prosthetics Showcases Super Heroes And Disney Characters
Superb Yamaha Swan-Like Scooter With Insect Wings Will Make You Feel Like Flying
Martin Caulfield Services Some Of The Last Remaining Gas Street Lamps In The Capital
Soviet Mystery Amphibious Vehicle Has Been Discovered In Chelyabinsk
Teaser: Nissan LEAF to Attempt Setting the Guinness World Speed Record
Photographer From Slovakia Took Portraits Of Dogs And They Are Beautiful
Extraordinary Black And White Portraits Of '60s and '70s Celebrities Taken By David Bailey
Introducing Foodini: A 3D Food Printer
How to Design a Nuclear Reactor - an Illustrated Rough Guide, 1956-1998