Главная » Файлы » Прочие скрипты » CSS

Понимание свойств CSS :clip
24.06.14, 16:21:31



Сегодня по покопаем вглубь одного CSS. И это свойство собственно будет "clip".
Я уверен, что некоторые из вас даже не знают, что есть такое свойство "clip" , так как это свойство мало используется в нашем мире. Я в значительной степени расскажу вам все, что вы должны знать об этом свойстве.
Clip собственно направлен на определение той части элемента, которую вы хотите показать. Есть множество плагинов с обрезанием элементов, но на самом деле вы почти все это можете сделать с помощью CSS. С некоторыми ограничениями конечно, мы посмотрим на них позже.

Синтаксис

Давайте начнем сразу с синтаксиса свойства clip, который является не только не много странным, но также, вероятно и непонятным с первого взгляда. Пожалуйста, рассмотрим следующий пример:
Код
.my-element {  
position: absolute;  
clip: rect(110px, 160px, 170px, 60px);  
  }


Первое, что следует отметить; свойство "clip" работает только с элементами с: position:absolute; или position:fixed;. Он не будет работать с относительным или статическим позиционированием. Тем не менее, с ним все еще может быть интересно поэкспериментировать и найти некоторые интересные моменты использования. Все еще здесь ? smile Отлично, углубимся в синтаксис.
Свойство "clip" принимает только три различных значения:
1. auto: это значение по умолчанию.
2. inherit: он наследует значение от своего предка.
3.a shape function: существует только rect()
Код
clip: { shape | auto | inherit } ;


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

Функция RECT()

Теперь, давайте, наконец рассмотрим синтаксис параметра rect(). Он требует четыре значения длины, разделенных запятыми: сверху, справа, снизу и слева.
Код
clip: rect(<top>, <right>, <bottom>, <left>);


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



Давайте делаем небольшой пример, чтобы внести ясность. Обратите внимание на следующий CSS:
Код
clip: rect(40px, 260px, 150px, 80px);


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



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

Теперь быстро ответьте на вопрос, чтобы увидеть, понятен вам принцип или нет? smile Скажем, у меня есть 400px (ширина) на 200px (высота) элемент. Теперь я хочу, удалить 50px справа элемента, 10px сверху, и 30px снизу. Какую из следующих строк я должен использовать?
Код
clip: rect(50px, 30px, 350px, 70px);  
  clip: rect(0, 10px, 30px, 50px);  
  clip: rect(10px, 50px, 30px, 0);  
  clip: rect(50px, 30px, 10px, 10px);  
  clip: rect(10px, 350px, 170px, 0);




Разное

Итак, мы рассмотрели основные параметры свойства clip. Я думаю, что есть несколько вещей, которые вы хотели бы узнать.
Во-первых, rect() принимает значение "auto" в качестве значения для каждого из четырех параметров. В основном это означает - 100%. Скажем, у вас cltp rect(0, 50px, 50px, 0) и вы хотите отобразить его в полном размере (100 х 100 скажем). Вы можете сделать это , либо так:
Код
rect(0, 100px, 100px, 0)

либо таким образом:
Код
rect(0, auto, auto, 0)


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

ДЕМО

Для того, чтобы сделать вещи немного более ясными, предоставляю вам два демо. Первый из них это просто маленький пример свойства clip. В этом демо использовалось несколько вещей.

1. свойство clip
2. Css переходы
3. Селекторы (~ или +)

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



Довольно просто, не так ли? Теперь позвольте мне показать вам, что вы можете сделать с свойств clip, используя продвинутые селекторы CSS и Css переходы:



На этом все, дорогие друзья smile
Категория: CSS | Добавил: Apocalypse | Теги: свойств, CSS, :clip, понимание
Просмотров: 659 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: