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

06 марта 2013  7460  CSS, html, верстка

 

Пример графика.
Источники трафика сайта www.apsolyamov.ru за последние три месяца.

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

 

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

 

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

 

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

 

HTML код графика.

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

Где 40/38/18/4 - данные для графического отражения показателей.

CSS.

.chart .pipe
{
    background: #eee;
    box-shadow: inset 3px 3px 3px 0px rgba(200, 200, 200, 1);
    webkit-box-shadow: inset 3px 3px 3px 0px rgba(200, 200, 200, 1);
}
.chart .pipe
{
    border-radius: 3px;
    height: 7px;
    margin-bottom: 15px;
    width: 100%;
}
.chart p
{
    margin: 0 0 5px;
}
.chart .pipe > div
{
    background: url("/images/3/chart.png") repeat-x scroll left top transparent;
    border: 1px solid #84ae62;
    border-radius: 3px;
    height: 5px;
}

Где /images/3/chart.png - путь к картинке (фону) графика.

Смотреть коды в редакторе JS Bin - http://jsbin.com/odifab/3/edit

 

Комментарии для сайта Cackle
наверх