Вдобавок ко всем новым возможностям CSS, ранее нами упомянутым, Firefox 3.6* обретает свежайшее новое значение свойства: image-rect. Это позволит вам вырезать область фонового изображения, чтобы показать только часть от целого.
Оно использует собственническую приставку Мозиллы(то есть «-moz-» — прим. перев.) и берёт пару входных значений — URI изображения и границы вырезаемой области (в виде четырёх значений, разделённых запятыми, как во свойстве clip):
Вот пример:
Наиболее незамедлительным применением этого будет изготовлениекартинок-спрайтов, но я уверен, что созидательное CSS-сообщество будет способно удумать и другие тому применения.
Я подготовил быструю демонстрацию этого свойства; если у вас стоит недавняя ночная сборка* Файерфокса, то можете увидеть чуть выше одно изображение Линка, которое при наведении мыши переменяется. Все, кто смотрит не недавней ночной сборкою, увидят три статических Линка. (В перевод на Хабрахабр демонстрацию перетащить нет технической возможности, глядитеоригинал — прим. перев.)
__________________
* Хотя image-rect планируют включить в версию 3.6, сейчас это значение работает только в ночных сборкахFirefox 3.7 (ветвь mozilla-central).
Оно использует собственническую приставку Мозиллы
foo { background-image: -moz-image-rect(
url(<uri>),
<top>,<right>,<bottom>,<left>
); }
Вот пример:
.aside {
background-image: -moz-image-rect(
url('link.png'), 0, 32, 26, 0);
}
Наиболее незамедлительным применением этого будет изготовление
Я подготовил быструю демонстрацию этого свойства; если у вас стоит недавняя ночная сборка* Файерфокса, то можете увидеть чуть выше одно изображение Линка, которое при наведении мыши переменяется. Все, кто смотрит не недавней ночной сборкою, увидят три статических Линка. (В перевод на Хабрахабр демонстрацию перетащить нет технической возможности, глядите
__________________
* Хотя image-rect планируют включить в версию 3.6, сейчас это значение работает только в ночных сборках