You Can Make Anything With Pure CSS If You're Passionate Enough

How much can you do with pure CSS these days? It almost seems as if the sky is the limit; in recent years, we have seen photo-realistic images and faithful recreations of famous paintings coded in nothing but cascading style sheet language. We have also seen fairly elaborate animations and even simple games. Now, to celebrate the ninth anniversary of the popular Portal 2 video game by Valve, developer Andrew Moglione has recreated one of the iconic turrets from the game using nothing but CSS.

You can search for Mr. Moglione's project on Codepen, it is easy to find under the tags "portal" and "turret." What you get is a stylized animation of the laser turret from the game, the ones that seem to wake up when they sense the player nearby. This project is both CSS art and animation; the developer has explained that he did it all "by hand," which means he did not call up any established libraries. Pure CSS projects rarely feature coding libraries, but there are no hard and fast rules prohibiting the use of libraries. In fact, some CSS games may include some HTML5 as well as JavaScript to make them more attractive to players.

For the rare web developer or designer who is not familiar with Portal, the first version of the game dates back to 2007 and the release of the Half-Life Orange Box, which is a compilation of titles tangentially related to the Half-Life franchise. Portal and its sequel were very successful games because they incorporate a simple plot of solving puzzles while being taunted by the Genetic Lifeform and Disk Operating System (GLaDOS) nemesis.

The ultimate goal of CSS art such as this Portal turret is not just to show off; the community of pure CSS artists wish to encourage coders to push this web scripting language to the maximum of their abilities. There is a lot to learn from the Codepen pure CSS projects, and the idea is to not become overly reliant on libraries, coding platforms, and complex JavaScript routines that end up making too many server calls. There really are no limits to CSS if you become passionate about it. For more information click here https://codepen.io/amogl/details/KKdMjXz.