—»     —»   Учимся понимать параметр CSS Clip
  Раздел: CSS/Style Sheets   Нет комментариев  

Учимся понимать параметр CSS Clip



Сегодня мы хотели бы рассказать вам кое о чем новом, с головой окунуться в отдельный css-параметр. И этот параметр называется clip.

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

Учимся понимать параметр CSS Clip

Параметр clip предназначен для определения части элемента, которую вы хотите отобразить. Возможно, ранее вы уже слышали о параметрах crop (или обрезка). Существует несколько javascript-плагинов, которые позволяют обрезать элемент, но на самом деле вы можете делать примерно то же самое при помощи параметра CSS Clip. Конечно, с некоторыми ограничениями, которые мы рассмотрим позже.

Синтаксис

Давайте сразу перейдем к синтаксису параметра clip, который не только немного смущает, но и который довольно сложно понять на первый взгляд. Давайте рассмотрим следующий пример:

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

Первое, на что вам следует обратить внимание: параметр clip работает только с теми элементами, которые обозначены значениями position: absolute или position: fixed. Он не будет работать со статичным позиционированием или с относительным.

По правде говоря, мы даже не знаем, почему это так. По крайней мере, мы не нашли соответствующей информации по этому поводу в интернете. Если вам это известно, пожалуйста, поделитесь с нами и другими читателями в комментариях.

Вероятно, многие из вас посчитают это серьезным недостатком параметра clip.

Тем не менее, многим все равно будет интересно поэкспериментировать с параметром clip. Вы все еще здесь? Отлично, тогда давайте приступать.

Параметр clip принимает только три разных значения:

* auto: это образ действия параметра по умолчанию. Выставив значение auto, вы оставите все так, как есть.
* inherit: это значение позволяет наследовать настройки параметра clip от родительских элементов
* функция shape. На данный момент доступна только фигура rect().

clip: { shape | auto | inherit } ;

В большинстве случаев, вам захочется использовать функцию shape. Мы надеемся, что в будущем у нас появится доступ и к другим фигурам (например, к circle() ), но пока что мы можем использовать только прямоугольник. Но не беспокойтесь, даже имея только это в запасе, мы можем делать нечто удивительное.

Функция rect()

Давайте сейчас приступим к изучению синтаксиса rect(). Здесь нам нужно будет указать 4 значения длины, разделенные запятыми: верхняя, правая, нижняя и левая стороны. Как и для отступов или полей, свойство указываются по часовой стрелке.

clip: rect(<top>, <right>, <bottom>, <left>);

Теперь будьте внимательны, так как может быть сложно. Значения верхней и нижней стороны определяют смещение от верхней границы, а значения левой и правой сторон отвечают за смещение от левой границы.

Учимся понимать параметр CSS Clip

Давайте создадим небольшой пример, чтобы все прояснилось. Давайте рассмотрим следующий CSS-код:

clip: rect(40px, 260px, 150px, 80px);

В этом коде мы хотим отобразить часть элемента между 40 и 150 пикселями по вертикали и 80 и 260 пикселями – по горизонтали. Если вам что-то не понятно, посмотрите на изображение ниже:

Учимся понимать параметр CSS Clip

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

Предлагаем вам на засыпку решить небольшую задачку для закрепления. Предположим, что у нас есть элемент размером 400px (в ширину) и 200px (в высоту). Теперь нам нужно убрать 50px с правой стороны элемента, 10 – с верхней и 30 – с нижней. Какую из нижеприведенных строк кода нам нужно использовать?

1: clip: rect(50px, 30px, 350px, 70px);
2: clip: rect(0, 10px, 30px, 50px);
3: clip: rect(10px, 50px, 30px, 0);
4: clip: rect(50px, 30px, 10px, 10px);
5: clip: rect(10px, 350px, 170px, 0);

Чтобы узнать правильный ответ, нажмите ниже:


Дополнительные возможности

Итак, теперь мы ознакомились с базовым применением параметра clip. Нам кажется, что есть еще кое-что, о чем вы бы хотели узнать.

Прежде всего, функция rect() принимает auto как значение для каждого из 4 параметров. Это означает «100%». Предположим, что вы хотите обрезать какой-то элемент с использованием rect(0, 50px, 50px, 0), и хотите отобразить его в полном размере (100х100, предположительно). Вы можете либо использовать rect(0, 100px, 100px, 0), либо rect(0, auto, auto, 0).

Во-вторых, так как функция rect() требует указать значения длины для каждого параметра, это означает, что ее можно анимировать при помощи css-переходов и css-анимации. Это отличные новости, так как у вас будет возможность делать привлекательные эффекты. Конечно же, вы не сможете анимировать ее на значении auto, так как это не целое число.

В-третьих, в rect() не поддерживаются процентные значения. Это плохо, так как это ограничивает нас с точки зрения создания адаптивных элементов.

Браузерная поддержка

Сейчас, вероятно, многие зададутся вопросом о браузерной поддержке. Этот вопрос не удивляет, но вы будете удивлены узнать, что браузерная поддержка параметра clip довольно-таки хорошая!

Chrome - 1.0 и современнее
Firefox - 1.0 и современнее
Internet Explorer - 4.0 и современнее
Opera - 7.0 и современнее
Safari - 1.0 и современнее

Да-да, вы прочитали все правильно: Internet Explorer 4! Но до Internet Explorer 8 вы вынуждены будете использовать старый синтаксис, который требует от вас, чтобы 4 значения rect() были разделены пробелами вместо запятых. Не так уж и сложно, не правда ли?

.my-element {
position: absolute;
clip: rect(10px 350px 170px 0); /* IE4 to IE7 */
clip: rect(10px, 350px, 170px, 0); /* IE8+ & other browsers */
}

Демо

Чтобы все было более понятным, мы сделали 2 демо. Первое представляет собой простой пример параметра clip. В данном демо мы использовали несколько вещей:

* Параметр clip
* CSS-переходы. Как мы упоминали ранее, значения можно анимировать
* Родственный селектор (~ или +).

Так что же здесь происходит? Сначала изображение обрезается таким образом, что становится невидимым. Затем, когда вы наводите курсор мыши на маленькую «кнопку», следующее изображение отображается таким образом, чтобы мы могли отобразить его приблизительно на 0.5s от его центра.

Смотреть демо 1

Довольно привлекательно, не так ли? Теперь позвольте показать вам, что вы можете сделать, чтобы оживить страницу при помощи параметра clip, нескольких расширенных CSS-селекторов и CSS-переходов.

Смотреть демо 2

Объяснять весь код, в принципе, ни к чему, да и вряд ли вам это будет интересно, так как самое сложное, что мы сделали, это нашли расширенные CSS-селекторы для указания только нужных нам изображений. Вещи типа like li:nth-of-type(n+7):nth-of-type(-n+9):hover img { ... }.

Тем не менее, здесь возник небольшой баг с наложением, который был вызван как CSS-переходами, так и z-index при наведении изображений, который был быстро исправлен Ana Tudor, так что, мы хотели бы выразить ей благодарность.

Возможно, вы задаетесь вопросом о том, что же еще такого интересного можно сделать при помощи этого параметра. Давайте мы предложим вам несколько идей.

* Галерея изображений, как выше
* Возможность обрезать изображения различных размеров
* CSS-спрайты (источник)
* Отличный способ скрывать контент (источник)

В следующем руководстве мы расскажем вам о том, как применить параметр clip на практике, и создать расширяющийся эффект наложения.

Подытожим

Так что в итоге можно сказать про параметр clip? Во-первых, мы поняли, что это довольно странный параметр. У него довольно очевидный синтаксис запуска функции, но абсолютно контр-интуитивные значения для этой функции. Дело в том, что как значение top, так и bottom приводят к смещению от верхней границы, а не верхней и нижней, и здесь довольно сложно предугадать. Тем не менее, в будущем W3C, скорее всего, исправит это дело.

«Заметка. В CSS 2.1, все области обрезки прямоугольные. В будущем мы ожидаем расширения возможностей в этой области. Будущие обновления также могут представить новый синтаксис смещения фигур, где каждое значение будет отвечать за соответствующую сторону элемента».
Источник: W3C

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

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

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 6089   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

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

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


Популярные публикации


















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