Pull to refresh

В Firefox 3.6 добавится вырезание фонов

Reading time1 min
Views659
Original author: Peter Gasston
Вдобавок ко всем новым возможностям CSS, ранее нами упомянутым, Firefox 3.6* обретает свежайшее новое значение свойства: image-rect. Это позволит вам вырезать область фонового изображения, чтобы показать только часть от целого.

Оно использует собственническую приставку Мозиллы (то есть «-moz-» — прим. перев.) и берёт пару входных значений — URI изображения и границы вырезаемой области (в виде четырёх значений, разделённых запятыми, как во свойстве clip):

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);
}

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

Я подготовил быструю демонстрацию этого свойства; если у вас стоит недавняя ночная сборка* Файерфокса, то можете увидеть чуть выше одно изображение Линка, которое при наведении мыши переменяется. Все, кто смотрит не недавней ночной сборкою, увидят три статических Линка. (В перевод на Хабрахабр демонстрацию перетащить нет технической возможности, глядите оригинал прим. перев.)

__________________
* Хотя image-rect планируют включить в версию 3.6, сейчас это значение работает только в ночных сборках Firefox 3.7 (ветвь mozilla-central).
Tags:
Hubs:
Total votes 31: ↑22 and ↓9+13
Comments25

Articles