Глава 14. CSS-свойство CLIP

Рассмотрим такую ситуацию: есть картинка, и на странице нужно отобразить большое количество ее прямоугольных (возможно, пересекающихся) фрагментов.

Решение "в лоб": нарезать нужные фрагменты и рассовать по отдельным файлам.

Преимущества: сомнительные.

Недостаток 1: общий размер фрагментов может превысить размер исходной картинки.
Недостаток 2: можно перепутать файлы с почти идентичными фрагментами (отличие - на пару пикселов в ширину/длину).
Недостаток 3: способствует появлению и развитию мазохизма.
Недостаток 4: вообще, лень этим заниматься.

Самым весомым, разумеется, является последний недостаток ;)

Решение "с умом": использовать CSS-срезки (clipping regions).

Преимущество 1: отдельных фрагментов нет, грузится только исходная картинка.
Преимущество 2: возможно указание размещения фрагмента на картинке с точностью до пиксела - на глаз или по сетке ничего измерять не нужно.
Недостатки: нужно научиться работать со срезками.

Безусловно, недостатки у решения "с умом" значительные ;). Но. Научившись один раз пользоваться срезками, больше этому учиться не нужно. А резать фрагменты вручную пришлось бы снова и снова...

Кроме того, срезки можно применять не только в указанном случае. По части применений - все зависит исключительно от фантазии.

Ближе к телу! (как говорил Мопассан)

Итак, срезка - это прямоугольная ВИДИМАЯ область элемента. Области элемента, которые не входят в срезку - невидимы. По умолчанию, срезка - это вся область, занимаемая элементом.

Срезки применимы не только к изображениям. Создаются посредством установки стилевого параметра clip: clip: rect(top, right, bottom, left);

Отступы top, right, bottom и left указаны на нижеследующем рисунке:

Некоторые технические детали.
Clip в IE работает только для объектов с position = 'absolute'. Кроме того, в документации по CSS2 указано, что clip работает только для объектов, у которых overflow не равно visible. Но, похоже, IE к этому требованию относится "параллельно" и такого ограничения не ставит.

Пример.

В следующем примере срезка применена для подсветки прямоугольного участка текста. Обратите внимание, что подсвечивающий слой указан вторым. Это сделано для того, чтобы он перекрывал неподсвеченный слой (т.к. z-index мы не указали для обеих слоев, то верхним будет тот, который идет вторым).

<html>
  <head>
    <style>
      div {
        position: absolute;
        width: 300px;
        text-align: justify;
        text-indent: 1em;
        padding: 1em;
        font-family: Times New Roman;
        font-size: 12pt;
      }
    </style>
  </head>
  <body>
    <div style="background: #00ff00;">
Her face and her voice, all at his service now, worked the miracle - the impression operating like the torch of a lamplighter who touches into flame, one by one, a long row of gas-jets. Marcher flattered himself the illumination was brilliant, yet he was really still more pleased on her showing him, with amusement, that in his haste to make everything right he had got most things rather wrong.
    </div>
    <div style="clip: rect(15px, 200px, 150px, 60px); background: #ff0000;">
Her face and her voice, all at his service now, worked the miracle - the impression operating like the torch of a lamplighter who touches into flame, one by one, a long row of gas-jets. Marcher flattered himself the illumination was brilliant, yet he was really still more pleased on her showing him, with amusement, that in his haste to make everything right he had got most things rather wrong.
    </div>
  </body>
</html>

Вот как выглядит это у меня в браузере:

Пример подсветки прямоугольного участка текста с использованием свойства clip в CSS.

Приложение

Выдержка из CSS2 Specification (вольный перевод - А.Р.)

11.1.2 Срезки: свойство 'clip'

Срезка определяет видимую часть отрисованного элемента. По умолчанию, видимая часть соответствует размерам и форме бокса элемента. Однако, это можно изменить.

Свойство: 'clip'

Значения: <shape> | auto | inherit

По умолчанию: auto

Применимо к: block- и replaced- элементам

Наследование: нет

Значения в процентах: не допустимо

Устройство отображения: визуальное

Свойство 'clip' применяется к элементам, у которых значение 'overflow' отличается от 'visible'.

Описание значений:

auto: Срезка соответствует размерам и положению элемента.

<shape>: В CSS2 допустимое значение <shape> — это rect(<top> <right> <bottom> <left>), где каждый из параметров определяет отступ от соответствующей границы бокса элемента. Эти параметры могут быть либо <length>, либо 'auto'. Отрицательные значения <length> допустимы. 'Auto' означает, что данная граница срезки совпадает с границей бокса элемента.

Для разработчиков CSS-процессоров: При округлении координат до пикселей убедитесь, что нет видимых пикселов, если сумма <left> и <right> равна ширине элемента (или сумма <top> и <bottom> равна его высоте). Также следите, чтобы не было скрытых пикселов, когда эти величины равны нулю.

Предки элемента могут также иметь свои срезки, если их свойство 'overflow' не равно 'visible'. В результате будут видны пересечения срезок.

Если срезка выходит за границы окна документа, она может быть обрезана в соответствии с локальными настройками.