Влияние градиента с прозрачностью на круглые углы в IE 9

<<

Celsus

Аватара пользователя

Автор темы

Сообщения: 45

Зарегистрирован: 02 дек 2011, 14:29

Благодарил (а): 15 раз.
Поблагодарили: 3 раз.

Сообщение 10 дек 2011, 23:04

Влияние градиента с прозрачностью на круглые углы в IE 9

Для тестов взял простой шаблон (оранжевый)
Поменял только:
  Код:
.content-outer {
  -moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
  -webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);
  -goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;
  box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);

background: -moz-linear-gradient(left,  rgba(254,252,234,0) 0%, rgba(241,218,54,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(254,252,234,0)), color-stop(100%,rgba(241,218,54,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(254,252,234,0) 0%,rgba(241,218,54,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(254,252,234,0) 0%,rgba(241,218,54,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(254,252,234,0) 0%,rgba(241,218,54,1) 100%); /* IE10+ */
background: linear-gradient(left,  rgba(254,252,234,0) 0%,rgba(241,218,54,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00fefcea', endColorstr='#f1da36',GradientType=1 ); /* IE6-9 */

  -moz-border-radius:40px 40px 200px 40px;
  -webkit-border-radius:40px 40px 200px 40px;
  -goog-ms-border-radius:40px 40px 200px 40px;
  border-radius:40px 40px 200px 40px;

  padding:0;
  margin-bottom: 1px;
}


Как видно, /go.php?http://16091984.blogspot.com/, ощущение, что углы применены для одного слоя, а прозрачный градиент для другого (второй слой как будто сверху). Почему так происходит?

Добавлено спустя 3 минуты 1 секунду:
Градиент я сделал на сервисе colorzilla (gradient editor)
<<

sv9t

Аватара пользователя

Сообщения: 727

Зарегистрирован: 23 апр 2011, 01:14

Откуда: Киров

Благодарил (а): 8 раз.
Поблагодарили: 92 раз.

Сообщение 11 дек 2011, 01:48

Re: Влияние градиента с прозрачностью на круглые углы в IE 9

Все правильно, есть градиент, есть прозрачный блок (где весь контент) с закругленными углами и видно первый градиент, далее сверху наложен еще градиент(он справа виден в контенте), и последнее это шапка, которая вообще всех перекрывает. Думаю, ничего не напутал?
А IE все это просто "колесом" ставит.
Путь сновидений - Hemi-sync, Астрал, ОС, Эзотерика, Йога
Sv9t.ru - CMS, Jquery, HTML5, CSS3, IT, PHP

"Делаю перелинковку на FAQ, телепат без отпуска, наивный оптимизатор, танцую с бубном"

Вернуться в Учим HTML, CSS, XML

Кто сейчас на конференции

Зарегистрированные пользователи: Yandex [Bot]

Работает на phpBB © 2000, 2002, 2005, 2007 phpBB Group. Дизайн ST Software и Blogger Форум. Русская поддержка phpBB
ЧПУ ссылки от phpbb seo