One Div: иконки на CSS

One-div.com — необычный сервис, где собраны почти 60 иконок, реализованных с помощью CSS. В HTML используется один div (отсюда и название):

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

CSS иконки посложнее:

.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;


}

Указана совместимость с бразурами:



Иконки могут масштабироваться без потери качества:



А также быть анимированными при наведении — пример на странице about. Набор иконок постоянно пополняется.

Очевидно, что сервис скорее демонстрирует необычные возможности CSS3, чем дает набор иконок для применения на практике.