Свойство
Первое на что надо обратить внимание:
Синтаксис свойства
Чтобы понять какое число к какой стороне относится - рассмотрим пример:
Давайте попробуем сохранить изображение с отступами 40 и 150 пикселей по вертикали и от 80 до 260px по горизонтали:
Также стоит обратить внимание на то, что IE ниже восьмой версии понимает старую версию синтаксиса, без запятой:
Только нужно ли это?
Применение.
Давайте рассмотрим варианты применения элемента
Первый пример (наведите курсором на кнопку):
Сначала наше изображение невидимо. Но при наведении мыши на кнопку изображение появляется через 0,5сек. от его центра.
Структура:
CSS:
Второй пример:
Наша структура будет состоять из списка
CSS:
Давайте рассмотрим несколько моментов.
Все наши изображения имеют определённый размер, нам нужно чтобы увеличенное изображение всплывало в одном и том же месте, в этом нам помогает псевдокласс
Скорость вывода наших изображение регулируется здесь:
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>);
Код: Выделить всё
clip: rect(40px, 260px, 150px, 80px);
Код: Выделить всё
.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="изображение" />
Код: Выделить всё
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>
Код: Выделить всё
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;
. Чем выше число, тем медленнее.Комментариев нет
Комментариев пока нет, но ты можешь быть первым! Нужно лишь войти или зарегистрироваться и поделиться своим мнением.