—»     —»   Параметр CSS «Clip»
  Раздел: CSS/Style Sheets   Комментариев: 2  

Параметр CSS «Clip»

Вероятно, вы уже слышали о параметре CSS «Clip». У него есть некоторые уникальные свойства и синтаксис, и сегодня мы постараемся вам о них рассказать.

В конце статьи вы найдете ссылку на демо-страницу, где несколько фотографий используются для анимации параметра clip для того, чтобы продемонстрировать вам, что выполняет данный параметр.

Синтаксис

Синтаксис параметры clip выглядит следующим образом:

.example {
position: absolute;
clip: rect(110px, 160px, 170px, 60px);
}

Первое, что вам нужно знать о clip, это то, что его можно применить к абсолютно позиционированному элементу (другими словами, к элементу с параметром position: absolute или position: fixed;). Для себя мы так и не выяснили, почему дела обстоят именно так, но склонны думать, что причина к этому всё-таки есть. Это, конечно, значительный недостаток, но мы все равно можем поэкспериментировать с данным параметром.

Следующая часть синтаксиса – это сам параметр clip. Значением может выступать определенная форма, либо «auto». Автоматическое значение не имеет отрезков, это оно является стандартным для элементов. То есть, использовать clip:auto – это все равно, что не использовать clip вообще.

Если вы определите форму (на данный момент доступны только многоугольники), это следует делать посредством функции «rect()», вводя значения, которые определяют форму. Значения могут быть положительными или отрицательными.

Значение rect()

Значения, вводимые в rect(), поначалу могут немного смутить вас, но как только вы познакомитесь с ними, то работать очень легко. В целом, значения представляют собой верх, правую сторону, дно и леву сторону – именно в таком порядке (как и в других CSS-параметрах вроде полей или отступов). Значения определяют сдвиги с верхней части элемента и с левой стороны элемента.

Другими словами, в приведенном выше примере, первое значение размещает воображаемую горизонтальную линию на расстоянии 110 пикселей от верхней стороны (первое значение) и еще одну горизонтальную на расстоянии 170 пикселей от верхней стороны (третье значениие). Второе значение размещает воображаемую вертикальную линию на расстоянии 160 пикселей от левой стороны, и последнее значение размещает еще одну воображаемую вертикальную линию на расстоянии 60 пикселей от левой стороны.

Если это вас путает, то внимательно рассмотрите это изображение:

Параметр CSS «Clip»

В этом изображении используются направляющие вроде тех, что мы видим в Photoshop, которые отображают вам, где находятся воображаемые линии, которые вы указали. Светлая область на изображении – это видимая его часть. Остальное будет скрыто. Т.е. отображается только та часть, которая оказалась внутри указанных линий.

Можно рассматривать обрезку файлов как нечто вроде параметра visibility:hidden, примененного только к части элемента.

Так же следует учитывать, что IE6 и IE7 предоставляют поддержку параметра clip, но вместо запятых, разделяемых значения, для этих браузеров следует ставить пробел. Кажется, что и некоторые остальные браузеры воспринимают пробелы в качестве разделителей. Так что, если вам хочется организовать полноценную кросс-браузерную поддержку, то сделайте указание с запятыми и отдельно укажите параметр для IE, а если хотите, чтобы параметр поддерживался большинством популярных браузеров, можете использовать пробелы. Мы не тестировали пробелы во всех браузерах, поэтому это останется вашей задачей.

Забавная анимированная галерея

В W3C параметр clip включен в список параметров с возможностью анимации, так что вместе с примером мы предлагаем вам посмотреть забавную анимированную галерею, чтобы можно было наглядно видеть принцип работы данного параметра. По ссылке ниже вы можете перейти к демо-странице.

* Посмотреть демо
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 5310   |   Оставлено комментариев: 2
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 11 июля 2012 @ 22:11
Написал: alexdobdesign — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Прикольная штука! но со своими ограничениями какая то недоштука!
Комментарий #2: 12 июля 2012 @ 11:57
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3324   |   Комментариев: 500
ICQ: --- не указано ---
Хороший параметр. Мне он нравится smile
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031