Перейти к публикации
  • Объявления

    • TheAndrey

      Правила раздела "Техподдержка"   17.03.2018

      Вы должны как можно подробне описась проблему. От этого зависит скорость нахождения решения проблемы. При необходимости прикрепляйте скриншоты. Укажите на какой CMS работает ваш сайт. При проблемах с Javascript рекомендуется указать данные из консоли Javascript, это ускорит решение проблемы.
  • 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, Спасибо, я уже решил эту проблему :)  

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


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

×