Bring Your Boring Text To Life With Codepen.io!

Cascading style sheets were originally seen as useful merely for applying various pre-defined sets of style-related syntax to attached HTML documents so that multiple sections of a web page can inherit the same aesthetic theme without having to redundantly feature the same definitions throughout its source code. In recent years, however, CSS has been embraced as a language that is capable of expressing vector-based graphics and even animations without the strict involvement of externally loaded files. It is not plausible to create intricate CSS-based visuals without the use of applications that essentially act like image-creation programs that subsequently convert the results into CSS syntax. Nonetheless, the images and animations that can be created will be directly rendered by the viewer's browser and will not take long to load.

Depending on the subject matter, an image created in CSS can resemble a real-world object so closely that it can be described as photorealistic. As this interactive project posted on codepen.io demonstrates, CSS can be used to create shapes arranged as an iconic Lego figure and define gradients that provide a very convincing illusion that resembles the familiar contours of a Lego figure's individual piece shapes.

This codepen project also utilizes a JavaScript file to implement a control bar on the right side of the screen that allows the viewer to modify several parameters about the simulated Lego figure and have it dynamically reflected as changes are made. Both the upper body and the legs can be changed into any color by using sliders that adjust each segment's hue, saturation, and lightness, and an "expression" slider allows the user to swap between a selection of facial expressions that are each overlaid over the graphic representing the figure's head. The project can randomly choose colors for both parts of the body and an expression for the face as soon as the viewer presses the "randomize" button, and a button can be toggled between "explode" and "rebuild" states to either separate the head, body, and legs or reunite them. Humorously, the face will always assume its "surprised" appearance while the pieces are separated. For more information click here https://codepen.io/joshbader/pen/MZMzjr.