Перейти к публикации
  • 0
Гость Михаил

Помогите с градиентом, и html5

Вопрос

Гость Михаил

В общем сложилась такая ситуация, я сделал прогресс бар на css3+html5

Вот скриншоты как отображается во всех браузерах:

Мозила: Версия последняя

nvx1381135147__.png

Хром

nvx1381135180__.png

Опера: Версия последняя

nvx1381135215__.png

Сафари: последний

nvx1381135348__.png

Ну и IE 10:

nvx1381135393__10.png

 

Код css

 

 

progress{
	margin: 5px;
}
progress[value] {
	-webkit-appearance: none;
	-o-appearance: none;
	-ms-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 180px;
	height: 20px;
}
progress[value]::-webkit-progress-bar {
	background-color: #ccc;
	border-radius: 2px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
progress[value]::-o-progress-bar {
	background-color: #ccc;
	border-radius: 2px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
progress[value]::-ms-progress-bar {
	background-color: #ccc;
	border-radius: 2px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
progress[value]::-moz-progress-bar {
	background-color: #ccc;
	border-radius: 2px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
progress[value]::-o-progress-bar {
	background-color: #ccc;
	border-radius: 2px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
progress[value]::-webkit-progress-value {
	background-image: -webkit-linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, .1) 33%, rgba(0,0, 0, .1) 66%, transparent 66%),-webkit-linear-gradient(top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .25)),-webkit-linear-gradient(left, #09c, #f44);
	border-radius: 2px;
	background-size: 35px 20px, 100% 100%, 100% 100%;
}
progress[value]::-o-progress-value {
	background-image: -o-linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, .1) 33%, rgba(0,0, 0, .1) 66%, transparent 66%),-o-linear-gradient(top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .25)),-o-linear-gradient(left, #09c, #f44);
	border-radius: 2px;
	background-size: 35px 20px, 100% 100%, 100% 100%;
}
progress[value]::-ms-progress-value {
	background-image: -ms-linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, .1) 33%, rgba(0,0, 0, .1) 66%, transparent 66%),-ms-linear-gradient(top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .25)),-ms-linear-gradient(left, #09c, #f44);
	border-radius: 2px;
	background-size: 35px 20px, 100% 100%, 100% 100%;
}
progress[value]::-moz-progress-value {
	background-image: -moz-linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, .1) 33%, rgba(0,0, 0, .1) 66%, transparent 66%),-moz-linear-gradient(top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .25)),-moz-linear-gradient(left, #09c, #f44);
	border-radius: 2px;
	background-size: 35px 20px, 100% 100%, 100% 100%;
} 
 

 

 

Ну а вот это html

 

 

<nav>
<p>// Опрос</p>
<b>Оцените работу движка</b>
<progress max="100" value="50"></progress>
</nav>

 

 

Кто знает как исправить?



Оффтоп,  Уже сам решил

Изменено пользователем Михаил

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

2 ответа на этот вопрос

Рекомендованные сообщения

  • 0
TheAndrey

progress[value]::-o-progress-value

Ну вот зачем мудрить? Там вроде как два контейнера (сама полоса и заполнение).

 

p.s. оперу можно было не указывать, это по сути тот же хром.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
Гость Михаил

@Andrey, Спасибо, я уже решил эту проблему :)  

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Гость
Эта тема закрыта для публикации сообщений.

×