clip

Содержание

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

Краткая информация

Значение по умолчаниюauto
НаследуетсяНет
ПрименяетсяК блочным элементам

Синтаксис

clip: rect(Y1, X1, Y2, X2) | auto

Значения

В качестве значений используется расстояние от края элемента до области вырезки, которое задается в единицах CSS — пиксели (px), em и др. Если край области нужно оставить без изменений, следует установить auto, положение остальных значений показано на рис. 1.

Рис. 1. Значения свойства clip

Рис. 1. Значения свойства clip

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>clip</title>
  <style>
   .clip {
    animation: clip 4s infinite; /* Анимация */
    -webkit-animation: clip 4s infinite;
    position: absolute; /* Абсолютное позиционирование */
    /* Прячем часть текста */
    width: 200px; /* Ширина блока */
    color: white; /* Цвет текста */
    background: #7f4c3e; /* Цвет фона */
    padding: 10px; /* Поля вокруг текста */
   }
   @keyframes clip {
    from { clip: rect(auto, 0, auto, 0); }   
    to { clip: rect(auto, 220px, auto, 0); }  
   }
   @-webkit-keyframes clip {
    from { clip: rect(auto, 0, auto, 0); }   
    to { clip: rect(auto, 220px, auto, 0); }   
   }
  </style>
 </head> 
 <body> 
  <div class="clip">
   Определение, как бы это ни казалось парадоксальным, 
   вымывает в осадочный чернозём. Липкость двумерно окисляет 
   псевдомицелий. Чернозём увлажняет грунт. Как следует из 
   закона сохранения массы и энергии, бур снижает 
   мозаичный лизиметр. 
  </div>
 </body>
</html>

Объектная модель

Объект.style.clip

Примечание

Internet Explorer до версии 7.0 включительно работает с другой формой записи, при которой значения координат разделяются между собой пробелом, а не запятой — cliprect(40px auto auto 40px).

Спецификация

СпецификацияСтатус
CSS Masking Level 1Возможная рекомендация
CSS TransitionsРабочий проект
CSS Level 2 (Revision 1)Рекомендация

Браузеры

Internet ExplorerChromeOperaSafariFirefox
41711
AndroidFirefox MobileOpera MobileSafari Mobile
1181




Рекомендую хостинг: beget.ru

Сервер падал:7 дн. 7:12 назад.

Посещений в месяц:205640

Посещений в день:100


+7 (951) 527 0204

+7 (928) 103 4987

programmer@niesoft.ru