Как стать автором
Обновить

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

Время на прочтение 1 мин
Количество просмотров 656
Автор оригинала: 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).
Теги:
Хабы:
+13
Комментарии 25
Комментарии Комментарии 25

Публикации

Истории

Ближайшие события

PG Bootcamp 2024
Дата 16 апреля
Время 09:30 – 21:00
Место
Минск Онлайн
EvaConf 2024
Дата 16 апреля
Время 11:00 – 16:00
Место
Москва Онлайн
Weekend Offer в AliExpress
Дата 20 – 21 апреля
Время 10:00 – 20:00
Место
Онлайн