One Div: icons on CSS

One-div.com is an unusual service, which contains almost 60 icons implemented using CSS. HTML uses a single div (hence the name):

<div class="histogram"> </div> 

')
CSS icons are more complicated:

 .histogram{ height: 4em; overflow-y:hidden; background:transparent; font-size:10px; } .histogram:before{ content: ""; display: block; width: 0; height: 3em; box-shadow: 1em 2.5em 0 0.3em #2c2c2c, 1.7em 2em 0 0.3em #2c2c2c,2.4em 0.8em 0 0.3em #2c2c2c,3.1em 1.5em 0 0.3em #2c2c2c; } .histogram:after{ content: ""; display: block; position: relative; margin-top: 0.9em; width: 4em; height: 0.1em; background: #2c2c2c; } 

Browser compatibility is indicated:



Icons can be scaled without loss of quality:



And also to be animated when you hover - an example on the about page . The icon set is constantly updated.

Obviously, the service rather demonstrates the unusual features of CSS3, rather than giving a set of icons for practical use.