in

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.




//platform.twitter.com/widgets.js(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = “https://connect.facebook.net/en_US/sdk.js#xfbml=1&appId=1521032898120611&version=v2.0”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));

(function(d){
var js, id = ‘facebook-jssdk’, ref = d.getElementsByTagName(‘script’)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(‘script’); js.id = id; js.async = true;
js.src = “https://connect.facebook.net/en_US/all.js”;
ref.parentNode.insertBefore(js, ref);
}(document));

/*=====================*/

(function() {
var po = document.createElement(“script”); po.type = “text/javascript”;
po.async = true;
po.src = “https://apis.google.com/js/plusone.js?publisherid=116390727576595561749”;
var s = document.getElementsByTagName(“script”)[0]; s.parentNode.insertBefore(po, s);
})();

/*=====================*/
!function(e,n,t){var o,c=e.getElementsByTagName(n)[0];e.getElementById(t)||(o=e.createElement(n),o.id=t,o.src=”https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v4.0″,c.parentNode.insertBefore(o,c))}(document,”script”,”facebook-jssdk”);(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = “https://connect.facebook.net/en_US/sdk.js#xfbml=1&appId=1521032898120611&version=v2.0”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));



Source link

What do you think?

Written by viralbandit

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Loading…

0

Comments

comments

Greg Olijnyk Creates Incredible Cardboard Sculptures Inspired By Steampunk And Sci-Fi

Miniatures of Famous Monuments Unlock Architecture for Visually Impaired