I'm having this ominous feeling as if i'm being watched. Oh hey, let's talk about web browsers.
The main objective of a web browser, whether it's Edge, Chrome, or any of the better ones,
is to request files from a web server given a URL and then use the content of set files to tell the
GPU of your computer what to render. These files can be anything - from images to PDFs to plain
text, but most of the time what we're requesting are websites. So what file is a website?
The answer is HTML or HyperText Markup Language. Within the HTML file we can
define information and content about a website that a browser rendering engine can understand.
This includes HTML elements which are components of the document structure that you would expect
to see in a website - such as headers, paragraphs, navigation bars, tables, etc.
Some elements have attributes to define for example the destination of a hyperlink or the
source of an image. Naturally, you'll also have elements within elements to create for example
an image within a button or a row within a table, creating this large hierarchy of
elements to represent your entire document. Put all your elements together and load your HTML file
into the browser and congratulations! You are a minimalist. Unfortunately, most people do not like
getting asthenopia and so we will have to make some stylistic changes. The best method for
editing the style and layout of a website is with CSS files or cascading style sheets. Unlike HTML,
which defines the content of the website, the CSS file is for defining attributes that involve the
layout such as font, colour, position, etc. A basic CSS file is generally formatted with
selectors which identify a selection of elements in the HTML. Once you have the selection you can
then assign various attributes to the element or elements. Of course, these are just the most
basic components of a CSS file and there are much more advanced features such as keyframes,
which allow you to change the style as time passes - effectively animating your website. By putting
content and layout in separate files we are able to very easily use different layouts for the same
content or different contents for the same layout. CSS was actually created a few years after HTML,
and ever since, web developers have been coming up with new and inventive ways to use it as little as
possible. Getting all the attributes right in a CSS file can be mind-numbing - if you ever want
to experience this without actually using CSS, go to a random number generator and guess the number
until you get it right. 5. Extensions to CSS such as Sass, or syntactically awesome style sheets (as
opposed to syntactically rather underwhelming style sheets), provides additional features
for easier development in which the Sass files are later on compiled into CSS. On top of that,
frameworks like Bootstrap provide readily made libraries of CSS files so that you don't even have
to create the style sheets yourself. Nonetheless, regardless of all the extensions and frameworks,
plain CSS remains a cornerstone in web development and anything in web design
will probably end up going through it. In fact, since Sass and Bootstrap ultimately compile
to or linked to CSS files, you could in theory create very advanced layouts in just pure CSS.
You can also draw Gex.
Pure CSS art is pretty self-explanatory, and it's the front-end developers way of saying: "Hey,
we like to have fun too". Usually for things more complicated than a simple graphic or animation,
you would leave that job to JavaScript, which is much more of a programming language than CSS
and most web browsers will come with a dedicated JavaScript engine to run JavaScript code. However,
this obviously more dynamic approach is not in the spirit of pure CSS art,
which involves much more plug and play. Pure CSS is already fairly tedious,
and it doesn't help that it was designed for websites - which is mostly containers
within containers rather than Phineas and Ferb characters. You want to make a circle?
Follow these instructions exactly. You want to centre something? Here's 11 ways to do it.
You want to make Mario? It's a me. Carpal tunnel. So hey, why not we give it a try?
Welp, that's all the manual labour i'm willing to do - let's automate this. However, it should seem
that CSS art has already been automated - this person demonstrates it by drawing the painting
from Animal Crossing. The currently existing automation tool does things the logical way - by
representing the drawing as a raster image or pixel by pixel. One way that the pixels can be
represented is with RGB values which is the amount of red, green, and blue from a scale of 0 to 255
that can combine into any colour on the visual spectrum such as flavescent, mahogany,
and the United Nations. These values can also be represented in hexadecimal in which the scale is
from 00 to FF instead. This is very conveniently how PNGs and JPGs already represent images, and
so like a file conversion, we just have to turn them into something that is a CSS property. One
property that we can do this with is box-shadows, which allows us to draw many box shadows of the
same size in different positions and different colours, effectively acting as our pixels.
Okay Junferno, I hear you say. This seems to be a resolved issue, and as they say: there's no need
to re-automate the CSS art converter. However, I think for a very special case there are some flaws
with the raster method. The main issue at hand is the size of the files as the image can have
hundreds of thousands of pixels, and while maybe for one image this is a pretty negligible issue,
if we for some reason wanted to create an animation using a sequence of images
with keyframes, then the issue becomes much more pertinent as the size of the file accumulates with
each frame. The best long animation in pure CSS that i could find was from fellow member of the
Bad Apple!! CSS community Chickenbread, whose CSS file exceeds 300 megabytes to play the Bad Apple!!
PV. To account for the large file size, the video is compressed to a resolution of 120 by 80 pixels,
giving it a bit of a pixelated look. Any more pixels and the memory might just be too much
for the browser, causing it to crash. It should seem that with this rendition,
the advancement of pure CSS animations to play Bad Apple!! has peaked - at least in the scope of
image file formats. However, in terms of CSS, the raster approach may seem a bit counter-intuitive
since the whole point of CSS and web browsers is to draw graphics with HTML containers rather
than pixel by pixel. At some point in time, computer scientists wondered to themselves:
what is the best way to find the shortest path between point A and point B on a map?
By trying every single possible path of course. You can say things like that when you're a
computer scientist. The breadth-first search algorithm or BFS keeps track of what parts of
the map we can visit as well as what parts of the map we have already visited before.
We can then take our current position and mark it as visited and check all the positions we can go
from there that haven't been visited yet. If we keep on repeating the process from there, we'll
eventually visit every single position in the map that we can reach from the original position.
Note that if part of the maze is blocked off from the original position, it doesn't get
visited at all. Similar to a person traversing a maze, we can start at one pixel in our image
and then travel to all the pixels next to it that are of similar RGB values. We continue to do this
until we eventually hit a pixel that is of a completely different RGB value and what we're
left with is a group of all the pixels of similar colours, which can isolate a shape. If we continue
to do this for every single pixel that we have not visited previously, we end up with several
shapes that we know the approximate colour of and combine into a rough estimation of our drawing.
We can then use the outer pixels of our shapes to get the coordinates of the shapes outlined,
or for a more sophisticated solution we use our old friend OpenCV's canny edge detection
to get some more optimised edges. Every single one of these shapes can be made into an HTML
element in which the colour is set by the CSS background-color property and the exact shape
is set by the clip-path property, in which we can clip the HTML element into the shape of a polygon
given the coordinates that we have just gotten from our edge detection. Now, all of this may
have been a bit difficult to follow, but the main takeaway here is that since we're making something
that draws in CSS, which is for modifying attributes in HTML on a web browser, we utilise
CSS's design by instead of drawing things pixel by pixel, drawing them element by element or shape
by shape. This method is a bit less grainy than the raster method, but unlike the raster method,
which is constant for each image, the quality can differ depending on the colours, shading,
and shapes in the image. Hatsune Miku definitely ranks higher in terms of CSS quality than Gex.
While the CSS art generator serves as nothing more than a gimmick,
it reflects in some ways the process in which pure CSS is abstracted and simplified
via tools and frameworks, allowing web development to become a common skill.
Alas, opportunities for abuse arise. The spreading of misinformation, the collection of personal
data, the designing of misleading content, the hosting of internet fraud all amplified by the
convenience of web development. Shall progress forever be inhibited by our own malintent?
Shall accessibility forever be expected to act as an avenue for abuse? Anyway, here's
Here here here we go