Using CSS to Generate Icons Instantaneously

Page load speed is becoming an increasingly important aspect of website functionality, responsiveness, and SEO. Google even sets the high standard that a website should load within one second, and while this is understandable for the sake of user experience in an increasingly mobile, 3G world, it’s a tall order for a website with any number of images.

So what if there were a way to render images on a website without having to load them?

With some relatively new features in CSS, namely the :before and :after selectors, it is possible to generate images using solely CSS code. Starting with a single <div> element in HTML, programmers can generate visual graphics from small icons to complex works of art using solely CSS.

For example, the PAC-MAN and ghost below are generated 100% with CSS (from One-Div.com):

Images on websites, no matter how small, require a server request in order to transfer from the host server to your browser, which takes up precious load time. A small social media icon image often takes more time to load than the entirety of even a large website’s CSS file. (Test your website’s page load speed at tools.pingdom.com.) CSS can instruct the browser on how to generate those icons instantaneously with just a few lines of CSS code. The social media icons below (which link to Robertson & Markowitz’s accounts) are generated instantaneously with the power of CSS (again from One-Div.com):

So if page load speed is critical for your website down to the millisecond, CSS icons are a neat trick to explore.

Further reading:

http://www.smashingmagazine.com/2012/05/15/zocial-button-set-72-css3-buttons/

http://a.singlediv.com/

http://codepen.io/jaysalvat/pen/HaqBf/

http://one-div.com/