cssing Архив » Применение clip для PNG в ИЕ

Применение clip для PNG в ИЕ

XHTML/CSS

Пожалуй, самое редкоиспользуемое CSS-свойство, из вообще используемых. Особенно удивительно при этом, что все броузеры его поддерживают. Еще удивительнее, что от него есть реальная польза.

Как работает clip?

Во-первых, свойство применяется только для абсолютно спозиционированных блоков. Жаль конечно, но такие правила.
Во-вторых, оно позволяет отображать определенную часть блока. На данный момент только прямоугольную. Как-то так:

Неяркие части картинки на самом деле невидимы. А жаль, да?

Логика этих параметров нетривиальная. Проще всего запомнить что: 1е и последнее число — это координаты левого верхнего угла, а средние два числа — правого нижнего угла вырезаемого прямоугольника. Я сделал специальный интересный пример, чтобы это проиллюстрировать. Если считать что (x1, y1) и (x2, y2) координаты левого верхнего и правого нижнего углов, то вот так все выглядит:

1. clip: rect(y1 x2, y2 x1) /*Логично, не правда ли? может поэтому его никто и не использует?*/

Очевидно, подразумевается, что в будущем появится возможность вырезать эллипсы:

1. clip: ellipse(42px,14px,188px, 200px);

И где-то в CSS3D, я надеюсь, наконец появятся додекаэдры:

1. clip: dodecahedron(42px,16px, 188px, 100px); /*да! для построения додекадра достаточно знать координаты центра его симметрии, и радиус*/

Вы ведь знаете что:

Вселенная представляет собой набор бесконечно повторяющихся додекаэдров

clip: ИЕ и все остальные

Разумеется и тут не обошлось без нестыковок. Согласно спецификации расстояния должны писаться через запятую, вот так:

1. clip: rect(5px, 40px, 45px, 5px);

Однако, при использовании запятых ИЕ не воспринимает значения. Таким образом, приходится писать без них:

1. clip: rect(5px 40px 45px 5px);

Это не совсем валидно, но, тем не менее, воспринимается всеми броузерами. Такие вот милые казусы на окраинах CSS.

png-24 в ИЕ

Пожалуй все уже знают что полупрозрачные PNG-24 файлы в ИЕ6 и ниже не работают. И для их нормальной работы нужно задавать фон как-то так:

1. filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src=’MYTERRIFIC.png’)

В этом методе прекрасно только одно: он вообще работает. Но он не позволяет нам использовать background-position. То есть вся крутость от прелоадов и спрайтов со всякими сдвиганиями фона теряется.

Мы можем заменить «crop» на «scale», тогда картинка просто растянется (не повторится), но контролировать background-posiiton не можем. Я думал, что не можем.

Можем! png-24 background-position в ИЕ!

Будем использовать, к примеру, такой вот рисунок, 200 на 200 пикселей. Для пущей простоты вычислений.

В картинке два состояния пункта меню. Каждое размером 200 на 100 пикселей. Если у вас старый ИЕ, она коряво отобразится, мне очень жаль.

Так как все кроме ИЕ уже отображают PNG нормально, то для них сработает обычное:

1. a{
2. height:100px; width:200px;
3. background:url(nav.png) no-repeat 0 0;
4. }
5. a:hover{
6. background-position:0 -100px; /*фоновый рисунок сместится на 100 пикселей вверх, и визуально цвет пункта меню изменится*/
7. }

Для начала заставим ИЕ нормально отображать полупрозрачный PNG (эти стили должен увидеть только ИЕ):

1. a{
2. background:none;
3. filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”nav.png”, sizingMethod=”crop”);

Вот что нужно теперь сделать для ИЕ:

1. a{
2. height:200px;/*чтобы вся картинка поместилась в фон, и было из чего вырезать*/
3. clip:rect(0px 200px 100px 0px); /*Вырезаем верхнюю часть картинки*/
4. }
5. a:hover{
6. clip:rect(100px 200px 200px 0px); /*Вырезаем нижнюю часть картинки*/
7. top:-100px;/*Так как clip вырезал нижнюю часть, и оставил пространство вверху, нужно приподнять видимую часть картинки вверх, прямо как на фотках с Надин*/
8. }

Можно любоваться результатом. Работает!

Если словами: при наведении мышки, clip вырезает нижнюю часть ссылки (верхняя некликабельна становится). Таким образом, чтобы визуально она осталась на месте, приходится её поднять на высоту 100px вверх. А кликабельная область остается того же размера.

Ссылки

• Про clip на w3c
• Clip для PNG в ИЕ
• Clip для очаровательной девушки, забыл добавить её в предыдущий пост
• Баг в старых операх
• IE PNG Fix джаваскрипт автоматически производящий манипуляции с clip (спасибо Михаилу Валенцеву за ссылку).

И

Кроме clip, существует так же свойство crop. Отличается только тем, что crop не просто оставляет видимой часть блока, а еще и убирает все остальное (не остается отступов равных размеру картинки по сторонам, как на фотках с «Каталиной»).
Вторым важным отличием этого свойства от clip является то, что никто его не поддерживает. CSS3 Working Draft все-таки.

Свойство интересное, но найти ему применение нелегко. Кроме описанной техники для ИЕ, я слышал еще лишь об обрезании аватар, под квадратный размер, либо подобный же контроль за загружаемыми пользоваталем картинками (когда лень делать это на сервере).

Возможно у вас есть идея?

XHTML/CSS