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

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

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

Публикации

Истории

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

27 августа – 7 октября
Премия digital-кейсов «Проксима»
МоскваОнлайн
3 – 18 октября
Kokoc Hackathon 2024
Онлайн
10 – 11 октября
HR IT & Team Lead конференция «Битва за IT-таланты»
МоскваОнлайн
25 октября
Конференция по росту продуктов EGC’24
МоскваОнлайн
7 – 8 ноября
Конференция byteoilgas_conf 2024
МоскваОнлайн
7 – 8 ноября
Конференция «Матемаркетинг»
МоскваОнлайн