HomeTech infoTechnology story

Using only HTML and CSS code, one can create a masterpiece full of aesthetics like this

When you look at the 'Pure CSS Francine' picture of Diana Smith, an interface designer, you will be amazed because it is unlike anything you've ever seen before. You will not be able to see the data in each flat pixel removed from the server because it is not drawn with a tablet, with a mouse or a graphics software, instead only pure lines of HTML and CSS code.

'Pure CSS Francine' is an elaborate oil painting of the 1800s created by Smith entirely by code. This means that you will not be able to save any "Pure CSS Francine" images on the web, instead you can just take a screenshot or download the code and run it on the computer. his calculation.

Using only HTML and CSS code, one can create a masterpiece full of aesthetics like this Picture 1

This makes Smith's Pure CSS Francine and other CSS images into unique works of art. Because it's made of code that tells the browser to do something, Francine looks different on each browser.

Using only HTML and CSS code, one can create a masterpiece full of aesthetics like this Picture 2
Pure CSS Francine is like a stereoscopic artistic masterpiece when displayed on the ancient browser Netscape Navigator.

Using only HTML and CSS code, one can create a masterpiece full of aesthetics like this Picture 3
On an older version of the Opera browser, the drawing looks a bit peculiar compared to current browsers.

Cascading style sheets (CSS) are tools that guide your browser on how to display a particular web page. Using CSS to create images involves writing code to display an object in a browser and then adjust its size, color, angle (to create a circle) and many other things. .

Smith took about 2 weeks to create a pure CSS image. But her work has never really ended since the code that created the image can be tweaked constantly.

In fact, there are many other CSS images, but this is the first time that a masterpiece has an aesthetic and an attractive perspective like Smith's work.

See more:

  1. This guy uses only Microsoft Excel formulas that create 3D games
  2. The magic arrow always points to the right that makes the people in awe
  3. It turns out this is what happens when filming music videos with 3D sensors, attractive and fanciful like being lost in another world
4.3 ★ | 4 Vote
Cascading style sheets

You should read it

May be interested

  • HTML formHTML form
    the form in html contains form elements - the element types that take input data such as filling in text fields, checkboxes, buttons, submit buttons ...
  • Table in HTMLTable in HTML
    what does it take to create a table in html? is it complicated? want to add color to the table border, how to add the background color to the text in the table? in this article tipsmake.com will answer those questions and guide you to basic operations with tables on html, in addition to adding alternate color schemes for rows in the html table. invite you to follow along.
  • How to Learn HTML LanguageHow to Learn HTML Language
    html stands for hyper text markup language, and is the code or language used to create web pages. it can be a little daunting if you've never coded before, but all you need to give it a try is a simple text editor and an internet browser. you may even recognize some html used to change fonts on online forums, in customized online profiles, or in tipsmake articles. html is a useful tool for anyone who uses the internet, learning the basics of html can take less time than you think.
  • List in HTMLList in HTML
    this tutorial explains how to create lists in html.
  • Introduction to HTMLIntroduction to HTML
    a few basic things to know about html before starting to learn this language.
  • HTML color code - color code table in htmlHTML color code - color code table in html
    the color displayed is a combination of 3 colors red, green and blue. below is a table of color codes in html and how to use color codes in html
  • HTML ISO Country Code ReferenceHTML ISO Country Code Reference
    in html, the country code can be used as a complement to the language code in the lang attribute.
  • How to add color coded terminal code to Microsoft WordHow to add color coded terminal code to Microsoft Word
    if you want to set the correct color code for terminal code in word, only copying and pasting will not work. you will need to use the tool to create color-coded html, then enter html into word.
  • 5 steps to learn a dynamic HTML web component profile5 steps to learn a dynamic HTML web component profile
    html is an important part of websites we still use every day. however, not everyone can understand how a website is structured.
  • Title in HTMLTitle in HTML
    it is very important to use the title to show the text structure. heading (html) in html is identified by tags marked from to, of which the most important title is the least important.

Technology story