Применение clip для PNG в ИЕ
01 Oct, 2008Пожалуй, самое редкоиспользуемое CSS-свойство, из вообще используемых. Особенно удивительно при этом, что все броузеры его поддерживают. Еще удивительнее, что от него есть реальная польза.
Как работает clip?
Во-первых, свойство применяется только для абсолютно спозиционированных блоков. Жаль конечно, но такие правила. Во-вторых, оно позволяет отображать определенную часть блока. На данный момент только прямоугольную. Как-то так:
Неяркие части картинки на самом деле невидимы. А жаль, да?
- clip: rect(y1 x2, y2 x1) /*Логично, не правда ли? может поэтому его никто и не использует?*/
Очевидно, подразумевается, что в будущем появится возможность вырезать эллипсы:
- clip: ellipse(42px,14px,188px, 200px);
- clip: dodecahedron(42px,16px, 188px, 100px); /*да! для построения додекадра достаточно знать координаты центра его симметрии, и радиус*/
Вселенная представляет собой набор бесконечно повторяющихся додекаэдров
clip: ИЕ и все остальные
Разумеется и тут не обошлось без нестыковок. Согласно спецификации расстояния должны писаться через запятую, вот так:- clip: rect(5px, 40px, 45px, 5px);
- clip: rect(5px 40px 45px 5px);
png-24 в ИЕ
Пожалуй все уже знают что полупрозрачные PNG-24 файлы в ИЕ6 и ниже не работают. И для их нормальной работы нужно задавать фон как-то так:- filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='MYTERRIFIC.png')
Мы можем заменить «crop» на «scale», тогда картинка просто растянется (не повторится), но контролировать background-posiiton не можем. Я думал, что не можем.
Можем! png-24 background-position в ИЕ!
Будем использовать, к примеру, такой вот рисунок, 200 на 200 пикселей. Для пущей простоты вычислений.
В картинке два состояния пункта меню. Каждое размером 200 на 100 пикселей. Если у вас старый ИЕ, она коряво отобразится, мне очень жаль.
Так как все кроме ИЕ уже отображают PNG нормально, то для них сработает обычное:
- a{
- height:100px; width:200px;
- background:url(nav.png) no-repeat 0 0;
- }
- a:hover{
- background-position:0 -100px; /*фоновый рисунок сместится на 100 пикселей вверх, и визуально цвет пункта меню изменится*/
- }
- a{
- background:none;
- filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="nav.png", sizingMethod="crop");
- a{
- height:200px;/*чтобы вся картинка поместилась в фон, и было из чего вырезать*/
- clip:rect(0px 200px 100px 0px); /*Вырезаем верхнюю часть картинки*/
- }
- a:hover{
- clip:rect(100px 200px 200px 0px); /*Вырезаем нижнюю часть картинки*/
- top:-100px;/*Так как clip вырезал нижнюю часть, и оставил пространство вверху, нужно приподнять видимую часть картинки вверх, прямо как на фотках с Надин*/
- }
Если словами: при наведении мышки, clip вырезает нижнюю часть ссылки (верхняя некликабельна становится). Таким образом, чтобы визуально она осталась на месте, приходится её поднять на высоту 100px вверх. А кликабельная область остается того же размера.
Ссылки
- Про clip на w3c
- Clip для PNG в ИЕ
- Clip для очаровательной девушки, забыл добавить её в предыдущий пост
- Баг в старых операх
- IE PNG Fix джаваскрипт автоматически производящий манипуляции с clip (спасибо Михаилу Валенцеву за ссылку).
И
Кромеclip, существует так же свойство crop. Отличается только тем, что crop не просто оставляет видимой часть блока, а еще и убирает все остальное (не остается отступов равных размеру картинки по сторонам, как на фотках с «Каталиной»).
Вторым важным отличием этого свойства от clip является то, что никто его не поддерживает. CSS3 Working Draft все-таки.
Свойство интересное, но найти ему применение нелегко. Кроме описанной техники для ИЕ, я слышал еще лишь об обрезании аватар, под квадратный размер, либо подобный же контроль за загружаемыми пользоваталем картинками (когда лень делать это на сервере).
Возможно у вас есть идея?
48 комментариев к “Применение clip для PNG в ИЕ”