Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов
Вы здесь

Свойство clip

Дата:26.09.15 в 18:41
Справочник: 

Характеристики свойства

В каких браузерах работает?

8.0+ 1.0+ 7.0+ 1.0+ 1.0+ 1.0+ 1.0+

В каких версиях CSS используется?

CSS 1 CSS 2 CSS 2.1 CSS 3
- + + +

Для чего используется?

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

Как правильно задавать?

clip: rect(координаты активной зоны);

Какие могут быть значения?

Координаты зоны определяются расстоянием от левого края и от верха родительского элемента. Расстояние указывается в любых единицах, которые поддерживается CSS.

Пример использования

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Свойство clip</title>
  <style>
  div {
   position: absolute;
   clip: rect(40px, auto, auto, 40px);
  } 
  img {
   width:200px;
  }
  </style>
  </head> 
  <body> 
   <div><img src="city.jpg"></div>
 </body>
</html>

Оценка: 
Оценок: 2 (средняя 5 из 5)
Тип CSS свойства: 
Понравилась статья? Расскажите о ней друзьям: