Красивий «Progressbar» за допомогою CSS3

Красивий «Progressbar» за допомогою CSS3

Автор TechDude

Категория: Для веб-майстра

Сьогодні я хочу поділитися з вами невеликим «прогрес-баром» зробленим за допомогою CSS3. Виконаний у синьому кольорі, відмінно виглядає як на світлому так і на темному фонах, а також підходить до кнопок, які ми вже викладали раніше.

Демонстрація Завантажити ісходні коди

«Прогрес-бар» можна прикрутити до чого завгодно. Наприклад до оффлайн сторінки, до сайту що знаходиться на реконструкції і т.і. Проявляйте фантазію. :)

Дуже простий HTML код:

<div class="progressbar">
<div></div>
<span>65%</span>
</div>

І не менш прості CSS3 стилі:

.progressbar {
position: relative;
height: 24px;
border: 1px solid #494949;
background: #444;	
border-radius: 5px;
-o-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 0px 1px 3px #222;
-o-box-shadow: 0px 1px 3px #222;
-moz-box-shadow: 0px 1px 3px #222;
-webkit-box-shadow: 0px 1px 3px #222;}
 
.progressbar div {
width: 65%; height: 100%;
background-color: #369;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #37a), color-stop(1, #369));
overflow: hidden;
margin: -1px;
border: 1px solid #37c;
border-radius: 4px; 
-o-border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;}
 
.progressbar span {
display: block; width: 100%;
text-align: center;
font-size: 13px; font-family: Tahoma, Arial; font-weight: bold;
color: #eee; 
text-shadow: 0px 1px 0px #333;
position: absolute; top: 0;
line-height: 24px;}

Забирайте і використовуйте на своїх проектах з користю.

10 Сентябрь 2012

Оставь свой комментарий!

rss
Про блог
TechDude.Blog – персональний блог, который не имеет одной конкретной тематики. Тут вы найдете интересные и полезные статьи про: интернет, гаджети, музику, видео, спорт, искусство, web и социальные сервисы.
Надеемся, что Вам понравиться!
Подпишитесь на обновления блога и получайте свежие новости на свой E-mail. Введите свей e-mail тут:


Флаг
Розмовляй українською!
Якщо вважаеш потрібним зберегти українську мову – просто розмовляй українською. УкрЦентр