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, чем дает набор иконок для применения на практике.
