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


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

Big East Tournament 2012: Louisville, Cincinnati to Wear New Adidas Camo Uniforms
"The League Of Extraordinary Gentlemen": Superb-Looking Captain Nemo’s Nautilus Car Is For Sale
Photographer Captures Stunning Images Of Incredible Solar-Powered Furnace In Uzbekistan
Brutal 1938 Alfa Romeo 8C 2900B Lungo Touring Berlinetta
Back In 1980, Citröen Had A Somewhat Amusing Idea Of The Future
Stunning Vintage Photos of the Panther 6, a Crazy 6-Wheeled UK Sports Car From 1977
A Look Back At The First Tucker Torpedo Prototype From 1946
The Japanese Supercar That Almost Was - The Dome Zero
Car Drivers Need To Beware Of The Barnacle
Mood Meter Tracks Smiley Tweets and Frowny Tweets
URME: Your Personal Surveillance Identity Prosthetic
Cute Chinese Cargo Van Apartment
Eagles vs Drones: Dutch Police To Take On Rogue Aircraft With Flying Squad
"The Stereo Cycles Of Sicily": Palermo Teens Pump Up The Velo
The Doomsday Vault: Inside The Svalbard Global Seed Vault on the Norwegian Island of Spitsbergen
Amazing Photos Of “Luxurious” Lada Stretched Limousines
The 1980 Citroën Karin Reimagines The Car As Futuristic Sci-Fi Masterpiece
Human-like Robot Named “Pepper” Performs as a PR Manager in Tokyo
IKEA Pee Ad: Retailer’s Controversy Ad Acts As A Pregnancy Test
E-Ink Powered Watches
HP Brand Re-Design by Moving Brands
In 1980, American Express Teamed Up With DeLorean To Produce A 24K Gold Plated DMC-12, But Only Two Were Sold!
Motor Coach and Yacht! Terra Wind's Luxurious Amphibious Vehicle
Futuristic Solar-Powered Tree "eTree" In Israel
The Future Imagined in Albert Robida’s "La vie électrique," 1890
Old Soviet Ships Transformed Into Yachts for Millionaires
The 1986 Oldsmobile Incas Had The Wildest Dashboard You've Never Seen
Robot Crocodile "Longlong" in Philippines
Stunning Photos Show The Sexy Models Of 1980s Autobuff Magazine
China's 'Jade Rabbit' Rover Lands on Moon - First Photos