Свойство clip определяет область позиционированного элемента, в которой будет показано его содержимое. Все, что не помещается в эту область, будет обрезано и становится невидимым. На данный момент единственно доступная форма области — прямоугольник.

Первое на что надо обратить внимание: clip работает только на элементы с position: absolute; и position: fixed;.

Синтаксис свойства clip:

Код: Выделить всё

clip: rect(Y1, X1, Y2, X2) | auto | inherit;
  • rect(Y1, X1, Y2, X2) - расстояние от края элемента до области вырезки, которое задается в единицах CSS — px, em и др.
    auto - если край области нужно оставить без изменений
    inherit - наследует значение родителя
Пример:

Код: Выделить всё

.my-element {
	position: absolute;
	clip: rect(110px, 160px, 170px, 60px);
}
Чтобы понять какое число к какой стороне относится - рассмотрим пример:

Код: Выделить всё

clip: rect(<top>, <right>, <bottom>, <left>);
Изображение
Давайте попробуем сохранить изображение с отступами 40 и 150 пикселей по вертикали и от 80 до 260px по горизонтали:

Код: Выделить всё

clip: rect(40px, 260px, 150px, 80px);
Изображение
Также стоит обратить внимание на то, что IE ниже восьмой версии понимает старую версию синтаксиса, без запятой:

Код: Выделить всё

.my-element {
	position: absolute;
	clip: rect(10px  350px  170px  0); /* IE4 до IE7 */
	clip: rect(10px, 350px, 170px, 0); /* IE8+ и остальных браузеров */
}
Только нужно ли это?

Применение.
Давайте рассмотрим варианты применения элемента clip.

Первый пример (наведите курсором на кнопку):

Сначала наше изображение невидимо. Но при наведении мыши на кнопку изображение появляется через 0,5сек. от его центра.

Структура:

Код: Выделить всё

<span>Hover me</span>
<img src="изображение" />
CSS:

Код: Выделить всё

img {
	position: absolute;
	left: 10px;
	top: 60px;
	display: block;
	clip: rect(200px, 0, 0, 400px);

	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}

span:hover ~ img {
	clip: rect(0, 400px, 200px, 0);
}

span {
	display: inline-block;
	padding: 10px;
	margin: 10px;
	background: #08C;
	color: white;
	font-family: "Helvetica", "Arial", sans-serif;
	font-weight: bold;
	text-shadow: 0 -1px rgba(0,0,0,0.3);
	text-align: center;
	cursor: pointer;
}

span:hover {
	background: #09C;
}


Второй пример:

Наша структура будет состоять из списка <ul>, каждое новое изображение обёрнуто в тег <li>:

Код: Выделить всё

<ul>
	<li><img src="изображение" /></li>
	<li><img src="изображение" /></li>

	<!-- Остальные изображения -->
</ul>
CSS:

Код: Выделить всё

ul {
	padding: 0;
	margin: 10px;
	list-style: none;
	width: 300px;
	height: 300px;
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

ul:after {
	clear: both;
	content: "";
	display: table;
}

li {
	position: relative;
	float: left;
	width: 100px;
	height: 100px;
	background: url('/pw_maze_white.png');
	cursor: pointer;
}

li:nth-of-type(3n+1) {
	clear: both;
}

img {
	position: absolute;
	display: block;
	clip: rect(0, 100px, 100px, 0);

	-webkit-transition: all 0.2s ease-out, z-index 0s;
	-moz-transition: all 0.2s ease-out, z-index 0s;
	transition: all 0.2s ease-out, z-index 0s;

	opacity: 0.9;
}

li:hover img {
	clip: rect(0, 300px, 300px, 0);
	z-index: 2; 
	opacity: 1;
}

li:nth-of-type(3n+1):hover img {
	left: 310px;
}

li:nth-of-type(3n+2):hover img {
	left: 210px;
}

li:nth-of-type(3n):hover img {
	left: 110px;
}

li:nth-of-type(n+4):nth-of-type(-n+6):hover img {
	top: -100px;
}

li:nth-of-type(n+7):nth-of-type(-n+9):hover img {
	top: -200px;
} 
Давайте рассмотрим несколько моментов.

Все наши изображения имеют определённый размер, нам нужно чтобы увеличенное изображение всплывало в одном и том же месте, в этом нам помогает псевдокласс :nth-of-type. Подробнее о всех значениях элемента.
Скорость вывода наших изображение регулируется здесь: transition: all 0.2s ease-out, z-index 0s;. Чем выше число, тем медленнее.
Комментариев нет
Комментариев пока нет, но ты можешь быть первым! Нужно лишь войти или зарегистрироваться и поделиться своим мнением.