Page 101 - Сила CSS3 Освой новейший стандарт

Готовая страница • 101

.ie8 .comment-meta img {
-ms-filter: “progid:DXImageTransform.Microsoft.
¬ Matrix(M11=0.9961946980917454, M12=0.08715574274765871,
¬ M21=-0.08715574274765871, M22=0.9961946980917454,
¬ SizingMethod=’auto expand’)";
position: relative;
top: -5px;
left: -5px;
}

Благодаря этим изменениям аватары теперь по-
ворачиваются в IE 6, 7 и 8 так же, как в браузерах Не забывайте, что разрывы строк
с поддержкой функций трансформирования внутри свойства -ms-filter добав-
CSS3, не перекрывают имена комментаторов лены только для форматирования
внизу и не вылезают на текст комментария текста в книге. Удостоверьтесь,
справа. что в вашем коде это свойство
записано в одной строке.
Вместо того чтобы напрямую применять фильтр
Matrix, можно воспользоваться помощью гото-
вого сценария, который выполняет необходимые расчеты незаметно от вас. Пре-
имущество такого подхода заключается в том, что позже вам будет намного проще
внести в сценарий различные изменения для трансформаций, например для создания
эффекта анимации и прочих. Сценарий cssSandpaper (http://www.useragentman.com/
blog/csssandpaper-a-css3-javascript-library), также авторства Zoltan Hawryluk, застав-
ляет несколько функций трансформации, а также box-shadow, градиенты, RGBA
и HSLA работать в IE. Сценарий Transformie автора Paul Bakaus (http://paulbakaus.
com/?p=11) немного проще и основан на jQuery.

гОтОвая страница
Мы закончили стилизацию комментариев; откройте готовую страницу в современ-
ном браузере, и вы увидите, что теперь она выглядит как на рис. 2.28. Сравните
результат с рис. 2.1, где показана базовая стра-
ница. Радикальных отличий нет, но второй ва- Завершенная страница со всеми
риант визуально насыщеннее и выглядит уни- описанными эффектами назы-
кальным и привлекательным. вается speech-bubble_final.html.
В браузере IE некоторые эффекты отсутству- Она находится в папке с осталь-
ют, но в целом результат на рис. 2.29 похож на ными файлами упражнений для
рис. 2.28. С небольшими различиями можно этой главы.
смириться; мы добавили исключительно декора-
тивные эффекты, и пользователям IE не будет казаться, что на странице чего-то не
хватает. Даже если вы решите не добавлять обходные пути для IE, такие как филь-
тры, рассмотренные в этой главе, страница в IE 8 будет выглядеть как на рис. 2.1
и прекрасно работать.

www.trk.kg