Как «CSS3 Градиент в Windows Phone 7»?

Question

Я работаю в WP7 , где мое приложение основано на HTML5 , и я экспортирую приложение через PhoneGap framework .

Я хочу знать, возможно ли это, и как сгенерировать CSS3 градиент для этого проекта (и в процессе я хочу поделиться с вами тем, что я обнаружил).

НаНа данный момент это мой код CSS3:

body {
    background: brown;
    background-image: url(blue_to_white.jpg);
    background: linear-gradient(blue, red); /*future CSS3 browsers*/
    background: -webkit-linear-gradient(blue, orange); /*new webkit*/
    background-image:  -ms-linear-gradient(bottom, blue 50%, green 50%); /* IE10 */
    filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='blue', endColorstr='purple'); /* IE6 & IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='blue', endColorstr='yellow')"; /* IE8 */
    -pie-background: linear-gradient(blue, silver); /*PIE*/
    behavior: url(PIE.htc);
  }

Как видите, мой код использует различные методы для фона:

• A коричневый как цветbase
• Изображение, подобное градиенту синего к белому
• Обычный CSS3-градиент синего к красному
• CSS3 градиентдля браузеров webkit от синего до оранжевого
• Градиент CSS3 для браузеров Microsoft от синего до зеленого
• DXImageTransform для IE6 и IE7 от синего к фиолетовому
• DXImageTransform для IE8 от синего к желтому
• Круглый фон с использованием CSS3PIE от синего к серебряному

И вот мои результаты:

Как вы, наверное, знаете, браузер для WinPhone 7.5 - это IE9 Mobile, а браузер для WinPhone7.0 - это смесь IE7 и IE8.Здесь на слайдах 16, 17 и 18 объясняется, какие свойства CCS3 реализованы в IE9, IE10 и «IE9 Mobile»: http://goo.gl/1Wz3s

Итак, есть идеи о том, как создать градиент CSS3 в Windows Phone?или у меня нет выбора, и я должен реализовать изображение для создания этого градиента?

Answer 1

Просто хотел показать правильный синтаксис для градиентов CSS3 в IE10 +

    background: -ms-linear-gradient(
                 bottom,                
                 #432100 30%,               
                 #00AAAA 70%);

В ссылке на код Google, опубликованной JC Del Valle, он использует определение backgroung-изображения, что неверно.

[переполнение стека не позволило мне вставить изображение]

В снимке экрана на странице твиттера (@ palermo4) я проверил ваши стили как есть. Похоже, работает. Что-то еще конфликтует с вашими CSS3.