clip

Internet Explorer | Chrome | Opera | Safari | Firefox
7.0 | 8.0 | 9.0 | 7.0 | 8.0 | 9.6 | 10.0 | 10.0 | 3.1 | 4.0 | 5.0 | 3.0 | 3.6 | 4.0
Помилка | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так

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

CSS | CSS2, CSS2.1
Значення за умовчанням | auto
Наслідує | Ні
Застосовується | До блокових елементів
Аналог HTML | Ні
Посилання на специфікацію | http://www.w 3.org/TR/CSS21/visufx.html#propdef - clip

Опис

Властивість clip визначає область елементу, що позиціонується, в якій буде показано його вміст. Усе, що не поміщається в цю область, буде обрізано і стає невидимим. На даний момент єдино доступна форма області - прямокутник. Усе інше залишається тільки в мріях. clip працює тільки для елементів, що абсолютно позиціонуються.

Синтаксис

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

Значення

В якості значень використовується відстань від краю елементу до області вирізки, яке задається в одиницях CSS - піксели (px), em та ін. Якщо край області треба залишити без змін, слід встановити auto, положення інших значень показане на мал. 1.

Мал. 1. Значення властивості clip

Приклад

HTML 4.0 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http ://www.w 3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows - 1251">

<title>clip</title>

<style type="text/css">

#layer {

position: absolute; /* Абсолютне позиціонування */

clip: rect(40px, auto, auto, 40px); /* Ховаємо частину тексту */

width: 200px; /* Ширина блоку */

color: white; /* Колір тексту */

background: #7f4c3e; /* Колір фону */

border: 1px solid black; /* Параметрів рамки */

padding: 10px; /* Полів навколо тексту */

}

</style>

</head>

<body>

<div id="layer">

<p>Луцький національний технчний університет є одним із найкращих професійних закладів освіти у місті Луцьку. Найкращою з підготовки спеціалістів є кафедра професійного навчання, що займається професійною підготовкою студентів.</p>

</div>

</body>

</html>

Результат цього прикладу показаний ні мал. 2.

Мал. 2. Застосування clip у браузері Opera 9.23

Об'єктна модель

[window.]document.getElementById("elementID").style.clip

Браузери

Internet Explorer до сьомої версії включно працює з іншою формою запису, при якій значення координат розділяються між собою пропуском, а не комою, - clip: rect(40px auto auto 40px). Також Internet Explorer до сьомої версії включно не підтримує значення inherit.