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

Графические эффекты без графики • 59

PIE автора Jason Johnston (http://css3pie.com/) считывает свойства border-
radius, присутствующие в коде CSS, и делает так, чтобы они заработали в IE 6
и предыдущих версиях. Этот сценарий также реализует в IE некоторые другие
эффекты CSS3;

curved-corner автора Remiz Rahnas (http://code.google.com/p/curved-corner/)
также считывает свойства border-radius из кода CSS, но работает только в том
случае, если для всех четырех углов указаны одинаковые значения свойства
border-radius;
IE-CSS3 автора Nick Fetchak (http://fetchak.com/ie-css3/) предназначается в основ-
ном для добавления скругленных углов, но также создает в IE падающие тени;

DD_roundies автора Drew Diller (http://dillerdesign.com/experiment/DD_roundies/)
позволяет скруглять углы по отдельности, однако не считывает значения из
кода CSS; вы должны вручную указать каждое из необходимых значений для IE.

Помимо этих ориентированных на IE решений, для скругления углов можно исполь-
зовать массу других сценариев и методов, основанных на изображениях, которые
были разработаны до того, как свойство border-radius вошло в обиход. В случае
необходимости вы всегда можете прибегнуть к одному из этих испытанных временем
способов. Множество вариантов перечислено на веб-сайтах http://www.smileycat.
com/miaow/archives/000044.php и http://css-discuss.incutio.com/wiki/Rounded_Corners.
Если вы решите использовать сценарий или изображения для имитации скругленных
углов в IE, удостоверьтесь, что эти вспомогательные инструменты скрыты от других
браузеров. Поместите ссылки на сценарии или стили IE в условные комментарии,
прибегните к помощи Modernizr или используйте оба подхода одновременно, как
рассказывается в главе 1. Таким образом, только пользователи IE испытают падение
производительности, связанное с одним из старинных методов скругления углов,
а пользователи остальных браузеров смогут наслаждаться быстрой версией сайта
на базе чистого CSS. Вам придется самостоятельно принять решение, стоит ли до-
полнительная работа и падение производительности того, чтобы пользователи IE
увидели скругленные углы вместо прямых.

доБавление хвоСтика к оБлаку
Благодаря скругленным углам поля комментариев стали гораздо больше похожи
на облачка, однако облако прямой речи выглядит незавершенным, если у него нет
указателя или стрелки (обычно называемой «хвостиком»), связанной с автором
этой прямой речи. Для добавления хвостика никакие изображения не требуются.
Более того, это можно сделать, даже не прибегая к возможностям CSS3, — данный
метод основывается на свойствах и селекторах из CSS2.
Создание треугольников из рамок
Для добавления хвостика нам требуется только простой треугольник, который
очень легко создать из обычных рамок с помощью чистого CSS. Если внимательно

www.trk.kg