Как сделать полосу загрузки при помощи CSS3

Как сделать полосу загрузки при помощи CSS3Сегодня у нас будет уникальный урок, т.к. мы расскажем о том, как можно при помощи Flash Adobe и средств CSS3 (а именно градиентов и теней) сделать красивую полосу загрузки.
И так, сначала опишем простой html код, в котором поместим блоки div, отвечающие за создание полосы.

<div class="bar_wrap">
    <div class="bar" style="width:76%"></div>
</div>
<div class="captions">
    <div class="left">2324k / 3019k</div>
    <div class="right">76%</div>
</div>

Теперь опишем основные стили. Конечно же не забудем про body и про саму полосу — bar. Также как видно из рисунка, у нас присутствуют индикаторы, указывающие в цифровом эквиваленте сколько загрузилось.
Здесь в ход пойдут средства CSS3, опишем градиент от светло-голубого к синему и придадим небольшую тень, как внешнюю так и внутреннюю, для создания большей реалистичности.

body {
  background: #4D4D4D;
}
.bar_wrap {
  border: 1px solid #1C1C1C;
  background-color: #313131;
  -webkit-box-shadow: 0 0 1px #666, inset 0 1px 1px #222;
  -moz-box-shadow: 0 0 1px #666, inset 0 1px 1px #222;
  -o-box-shadow: 0 0 1px #666, inset 0 1px 1px #222;
  box-shadow: 0 0 1px #666, inset 0 1px 1px #222;
  background-image: -webkit-linear-gradient(#323232, #2E2E2E 50%, #323232);
  background-image: -moz-linear-gradient(#323232, #2E2E2E 50%, #323232);
  background-image: -o-linear-gradient(#323232, #2E2E2E 50%, #323232);
}
.bar {
 
}
.captions {
  color: #FDFDFD;
  padding: 5px 2px 0;
  font: 11px/14px sans-serif;
  text-shadow: 0 1px 0 #000;
}
.left {
  float: left;
}
.right {
  float: right;
}

Полоса корректно работает в Safari 5.1, Opera 11.52 and Chrome 15, а в старых браузерах она отображается без градиента и теней, но это не сколько не делает её некрасивой.
Урок написан Денисом Бобровниковым



Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *