Простая CSS диаграмма

Опубликовал 05.08.2010 в рубрике css | 0 комментариев

Простая CSS диаграмма

Для доступа к файлам пожалуйста Авторизуйтесь либо Зарегистрируйтесь!

Всем привет! Наш очередной урок будет посвящен несложной диаграмме, которая работает при помощи CSS и HTML. Мы можем использовать данную диаграмму в том случае, если на нашем сайте есть контент динамического содержания. Очень удобно, когда на страницах статистические данные интуитивно понятны каждому посетителю.

Чтобы график заработал, нам необходимо вставить следующий CSS-код в шапку документа.

CSS-код вставляем в <head>

<style>

.container{
 width:300px;
 font-family: Arial;
 }

.record{
 float: left;
 width: 100%;
 border: 1px solid #ccc;
 background-color: #f0f0f0;
 margin-bottom: 2px;
 -moz-border-radius: 0px 10px 10px 0px;
 -moz-border-radius: 0px 10px 10px 0px;
 -webkit-border-radius: 0px 10px 10px 0px;
 -webkit-border-radius: 0px 10px 10px 0px;
 }

.bar {
 background: transparent url(img/gradient.png) repeat-x top left;
 float: left;
 clear: left;
 height: 30px;
 }

.bar span{
 font-size: 12px;
 font-weight: bold;
 color: #fff;
 float: left;
 margin-left: 5px;
 margin-top: 7px;
 }

.p{
 padding-top: 3px;
 float: right;
 color: #6D8591;
 clear: right;
 font-size: 12px;
 font-weight: bold;
 height: 25px;
 }

.p span{
 font-size: 12px;
 font-weight: bold;
 float: left;
 margin-right: 5px;
 margin-top: 5px;
 }

</style>

Во-первых, мы создаем контейнер, который будет содержать все диаграммы с его записями. Ширину, которая может быть адаптирована по нашим потребностям.

Далее, чтобы вывести диаграмму на страницу сайта, нам потребуется прописать html-код в теле документа.

HTML-код вставляем в <body>

<div class="container">
 <div class="record"><div class="bar" style="width:55%;"><span>Mozilla</span></div><div class="p"><span>55%</span></div></div>
 <div class="record"><div class="bar" style="width:30%;"><span>IE</span></div><div class="p"><span>30%</span></div></div>
 <div class="record"><div class="bar" style="width:22%;"><span>Safari</span></div><div class="p"><span>22%</span></div></div>
 <div class="record"><div class="bar" style="width:20%;"><span>Opera</span></div><div class="p"><span>20%</span></div></div>
</div>

К сожалению, округлые границы не работают в IE, но в любом случае, выглядит неплохо ?

Информация о загрузках

Простая CSS диаграмма (42.9 KB, 36 скачиваний)
Файл залит 05.08.2010 в 11:17

Для доступа к файлам пожалуйста Авторизуйтесь либо Зарегистрируйтесь!

Добро пожаловать на ruVisio

Если вы еще не зарегистрированы, то желательно сделать это побыстрее :)

Авторизация

Забыли пароль?

Регистрация