Горизонтальная столбиковая диаграмма на CSS, без jQuery

06/03/2013  CSS, html, верстка

Столбиковая диаграмма на CSS

Переходы из поисковых систем - 40%

 

Переходы по ссылкам на сайтах - 38%

 

Прямые заходы - 18%

 

Переходы с сохраненных страниц  - 4%

 

HTML


<div class="chart">
<p>Переходы из поисковых систем - 40%</p>
<div class="pipe">
<div style="width: 40%"> </div>
</div>
<p>Переходы по ссылкам на сайтах - 38%</p>
<div class="pipe">
<div style="width: 38%"> </div>
</div>
<p>Прямые заходы - 18%</p>
<div class="pipe">
<div style="width: 18%"> </div>
</div>
<p>Переходы с сохраненных страниц  - 4%</p>
<div class="pipe">
<div style="width: 4%"> </div>
</div>
</div>

CSS

Цвет, ширина и тени — по вкусу.


.chart .pipe {
 background: #eee none repeat scroll 0 0;
 box-shadow: 3px 3px 3px 0 rgb(200, 200, 200) inset;
}
.chart .pipe {
 width: 100%;
 height: 10px;
 border-radius: 5px;
 margin-bottom: 1.2em;
}
.chart p {
 margin: 0 0 5px
}
.chart .pipe > div {
 background: #dc3545 none repeat scroll 0 0;
 border-radius: 5px;
 height: 10px;
}

Апсолямов Михаил
Автор — Михаил Апсолямов
Продвигаю бизнес в интернете: разработка стратегии, создание сайта, SEO, контент-маркетинг, SMM, обслуживание и техподдержка проектов. Опыт — 15 лет. Подробнее
наверх