Применение clip для PNG в ИЕ
Пожалуй, самое редкоиспользуемое CSS-свойство, из вообще используемых. Особенно удивительно при этом, что все броузеры его поддерживают. Еще удивительнее, что от него есть реальная польза.
Как работает clip?
Во-первых, свойство применяется только для абсолютно спозиционированных блоков. Жаль конечно, но такие правила.
Во-вторых, оно позволяет отображать определенную часть блока. На данный момент только прямоугольную. Как-то так:
Неяркие части картинки на самом деле невидимы. А жаль, да?
Логика этих параметров нетривиальная. Проще всего запомнить что: 1е и последнее число — это координаты левого верхнего угла, а средние два числа — правого нижнего угла вырезаемого прямоугольника. Я сделал специальный интересный пример, чтобы это проиллюстрировать. Если считать что (x1, y1) и (x2, y2) координаты левого верхнего и правого нижнего углов, то вот так все выглядит:
- clip: rect(y1 x2, y2 x1) /*Логично, не правда ли? может поэтому его никто и не использует?*/
Очевидно, подразумевается, что в будущем появится возможность вырезать эллипсы:
- clip: ellipse(42px,14px,188px, 200px);
И где-то в CSS3D, я надеюсь, наконец появятся додекаэдры:
- clip: dodecahedron(42px,16px, 188px, 100px); /*да! для построения додекадра достаточно знать координаты центра его симметрии, и радиус*/
Вы ведь знаете что:
Вселенная представляет собой набор бесконечно повторяющихся додекаэдров
clip: ИЕ и все остальные
Разумеется и тут не обошлось без нестыковок. Согласно спецификации расстояния должны писаться через запятую, вот так:
- clip: rect(5px, 40px, 45px, 5px);
Однако, при использовании запятых ИЕ не воспринимает значения. Таким образом, приходится писать без них:
- clip: rect(5px 40px 45px 5px);
Это не совсем валидно, но, тем не менее, воспринимается всеми броузерами. Такие вот милые казусы на окраинах CSS.
png-24 в ИЕ
Пожалуй все уже знают что полупрозрачные PNG-24 файлы в ИЕ6 и ниже не работают. И для их нормальной работы нужно задавать фон как-то так:
- 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 нормально, то для них сработает обычное:
- a{
- height:100px; width:200px;
- background:url(nav.png) no-repeat 0 0;
- }
- a:hover{
- background-position:0 -100px; /*фоновый рисунок сместится на 100 пикселей вверх, и визуально цвет пункта меню изменится*/
- }
Для начала заставим ИЕ нормально отображать полупрозрачный PNG (эти стили должен увидеть только ИЕ):
- 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 все-таки.
Свойство интересное, но найти ему применение нелегко. Кроме описанной техники для ИЕ, я слышал еще лишь об обрезании аватар, под квадратный размер, либо подобный же контроль за загружаемыми пользоваталем картинками (когда лень делать это на сервере).
Возможно у вас есть идея?
Щось в тебе все якось «корявєнько». От Студія Лєбєдєва жжот.
“Так как все кроме ИЕ уже отображают PNG нормально”
почему-то, говоря про всех, подразумеваем современную версию, а говоря про IE - разработку семилетней давности ;)
Может, вообще “забить” на IE6 ? Главное же - информация, а не допиксельная точность на всех абсолютно платформах и устройствах.
> Отличается только тем, что crop не просто оставляет видимой часть блока, а еще и убирает все остальное (не остается отступов равных размеру картинки по сторонам, как на фотках с «Каталиной»).
clip тоже ничего не оставляет, т.к. применяется только к абсолютно спозиционированным элементам. А отступы в примере из-за заданных размеров у DIV’а
Busla, лично я с вами согласен (давно “забил” на IE6) но у меня узкоспециализированные сайты где сидят люди в большей части на FF/Opera/итд но взять в пример тот-же Mail.ru там сидят очень многие кто и не знают что такое браузер (им как с магазина комп с WinXP и IE6 пришёл, они так ничего и не меняли ибо не умеют)
(Вот если бы в XP-SP3 по дефолту был IE7 то уже максимум через год можно было бы смело “забить” на IE6)
@Busla: Да, я был не совсем корректен, привык слишком к ИЕ6, ведь когда-то я вообще верстал под ИЕ5 ;).
Но серьезные сайты еще пару лет(или больше) не смогут отказаться от ИЕ6 =(, слишком большой процент. Хорошо хоть ИЕ5 мы победили =) это на самом деле, очень хорошо.
Насчет допиксельной согласен, на этом блоге я например на ИЕ6 почти забил, но когда дело касается прозрачных ПНГ, там уж совсем ужасно оно без хаков будет выглядеть (
@Lynn: а как могут заданные размеры у ДИВ влиять на отступы? клип оставляет сам блок в “потоке”, просто показывает только его часть, так уж он работает. Именно поэтому в хаке для ие приходится дописывать top:-100px;
Под отступами я имел ввиду “весь остальной невидимый блок”, возможно это послужило причиной неверного толкования.
Для IE и png часто использую “универсальное” решение: http://www.twinhelix.com/css/iepngfix/ (v2 - для background-position там подключается небольшой js, также с clip), правда часто и критикуемое за подобную универсальность.
[…] Краткое описание […]
На том, же сайте Лебедева, crop используется и по моему работает.
http://www.artlebedev.ru/tools/technogrette/html/links/
(это так, для информации)
И очень полезный хак с position в ИЕ, но для меня, это пока очень сложная магия :-)
+8 в исходниках странички, 116 строка.
Очень хорошо что вы читаете их сайт, это говорит о вашем высоком уровне! Хотя мне некоторые разделы на их сайте не очень по душе, и я уже говорил почему ;)
Но очевидно вы спутали
crop: rect(0 10px 10px 0);
с
sizingMethod=’crop’.
Вот по этой ссылке вы можете почитать подробнее о том, что я имел ввиду. Она в посте в конце была, прямо на слове crop ;).
Я пользуюсь IE PNG Fix.
Неужели мне одному нравится копаться у истоков и писать такие кусочки от руки? =)
Отучиться что ли… =)
Мы используем для спрайтов на один больше и единую реализацию во всех браузерах, не черех background-position, а через смещение вложенного элемента. Я называю это Advanced CSS Sprites. Всё никак статью не напишу.
Мне тоже нравится. Я практически не использую готовые решения, до всего пробую дойти сам. У нас, кстати, есть отличное решение для закруглённых уголков, н днях набрейнштормили. Поделюсь, как доделаю всё. Как обычно, bullet-proof и всё такое.
> …на этом блоге я например на ИЕ6 почти забил…
Вот и правильно. Вероятнее всего, что 98%—99% посетителей этого блога не используют IE…
@miripiruni: Кстати любопытно, аж 9 процентов на ИЕ6 ;) И еще несколько педантов смотрят в ИЕ5.0!
Вот и “забивай” на него после этого…
@Vitaly Harisov: Ха! Буду ждать с нетерпением =) Любопытно.
Насколько я понял, в Advanced CSS Sprites получился такой себе клиппинг через overflow.
Отличная статья, как всегда очень интересно и познавательно.
Только, как уже отмечалось выше, 6-ой ослик действительно по тихонькую исчезает, чему конечно все веб-разработчики радуются. Очень надеюсь, что с выходом IE8-final мелкомягкие сделают таки принудительную замену хотя бы на гораздо более вменяемый в плане восприятия CSS и рендера IE7, а то три осла это уже будет явный перебор )
Эту бы статью да год-полтора назад, просто цены бы не было.
Юра, в твоей таблице посещений показательно не то, что многие мучаются с шестым Эксплорером, а то, что пользователей Сафари практически не меньше — третья часть от пользователей Эксплорера. Так что всем разработчикам, которые «забивают» на Сафари хочется передать пламенный привет. При всей их ненависти к Эппл, все же стоит учитывать пользователей ПО этой компании.
Ага, но при этом нет ограничения, что у родителя должен быть position: relative (ты используешь для сдвига left). Если убрать por и использовать для сдвига margin-left: -100px, то теряется возможность двигать элемент со спрайтом маргином, если будет надо. В общем, два элемента и overflow: hidden всяко баще.
не совсем хороший способ с этим clip, для каких-то случаев подойдёт, для каких то нет. скажем для блоков с текстом у которых должен быть фон-png (возьмите ваш же пример и попробуйте сделать ссылки текстом) В этом случае вы просто не сможете воспользоваться crop.
@Роман: для текста действительно чуть труднее. Изначально я сделал пример с текстовым словом “Работает!”, но мне не понравилось что идея усложняется и не так красива, потому сделал проще. Ничего там особенного нет, просто нужно отдельно позиционировать сам текст при хавере, добавлять ему паддинг. Ничего такого невозможного.
Юра, ты не один, я с тобой. :)
На счёт того, где использовать clip - на многих страницах имеется сторонний контент - виджеты/информеры. Невзирая на богатство выбора оформлений, рамочки и тени у всех разные. Клипом можно оставить только информативную часть, которая генерится сторонним сервером, а рамочки/тени нарисовать самому, более единообразно с оформлением страницы.
[…] 2. Применение clip для PNG в ИЕ […]
Пишу сейчас из под IE4 о боже, ощущения просто космические. Советую попробовать (в жизни вообще надо всё попробовать)
[…] Применение clip для PNG в ИЕ — использование css свойства clip для реализации эффекта […]
Классный эффект, правда фон у результата адский :)
Поставьте себе облако тегов. Будет намного проще ориентироваться в Ваших записях. Кстати, могу посоветовать плагин для WordPress, называется “WP Cumulus” - очень прикольное облако получается в форме шара из меток. Ссылку давать не буду, гугл поможет)
[q]В общем, два элемента и overflow: hidden всяко баще.[/q]
А насколько это семантично?
К тому же, когда IE6 отправится на заслуженный отдых, гораздо проще будет грохнуть пару строк в стилях, нежели вычищать ставшие уже ненужными лишние элементы из DOMа.
Настолько же семантично, как использование div для разметки шапки сайта.
MSIE6 отправится на заслуженный отдых не раньше чем через 2-3 года.
Ну это еще не повод отказываться от уменьшения количества элементов в DOMe по возможности.
Данный способ в некоторых случаях позволит этого добиться.
Это неуниверсально.
спасибо! нужна была именно такая реализация чтобы не заморачиваться как всегда ради ие6 и мусорить код и этот способ прошёл проверку в боевых условиях! :)
У меня вопрос , как задавать цвет фона ?
Обычный background-color сработает.
Однако красота, многие вещи мне в голову приходили…. но это разорвало мне мозг…
А движение этого видимого блока (его попеременное открытие) можно задать в зависимости от места нахождения курсора? Привязать открытие неыидимой части к курсору я хотел сказать.