Advego.ru - система покупки и продажи контента для сайтов, форумов и блогов

Информационный Бестселлер на DVD или CD

Статьи для сайтов!!!
Главная CSS по шагам Свойства CSS Clip Color

Свойство clip

Описание

Свойство clip используется для задания области элемента, которая будет отображаться. Часть элемента, не попавшая в данную область, видна не будет. 

Форма задаваемой области может быть только прямоугольной .

Это свойство применимо только к абсолютно позиционированным элементам и к позиционированным элементам со значением fixed.

Значение

- rect (rectangular - прямоугольный) – отображается прямоугольная область, положение и размер которой меняется в зависимости от указанных координат.

В качестве координат указываются расстояния от краев элемента до границ видимой области в определенном порядке (top, right, bottom, left):

- top – расстояние от верхнего края элемента до верхней границы видимой области, 

- right - расстояние от левого края элемента до правой границы видимой области,

- bottom - расстояние от верхнего края элемента до нижней границы видимой области,

- left - расстояние от левого края элемента до левой границы видимой области.

Расстояния указываются в единицах, принятых в CSS (подробнее здесь...)

Свойство clip

- auto - элемент отображается полностью,

- inherit - принимает значение свойства родительского элемента.

Значение по умолчанию

- auto


Пример

Пример 1 - До применения свойства clip

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title> Свойство clip </title>

<style type="text/css">
.clip{width:120px; border:#0000FF solid 2px}
</style>

</head>
<body>
<p> Давайте скроем часть пингвина. </p>
<div class="clip"> <img src="img/peng_128.gif"> </div>
</body>
</html>

При просмотре в браузере

Давайте скроем часть пингвина.


Пример 2 - После применения свойства clip

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title> Свойство clip </title>

<style type="text/css">
.clip{width:120px; border:#0000FF solid 2px; position:absolute; clip:rect(auto, auto, 100px, 65px)}
</style>

</head>
<body>
<p> Часть пингвина скрыта. </p>
<div class="clip"> <img src="img/peng_128.gif"> </div>
</body>
</html>

При просмотре в браузере

Часть пингвина скрыта.


Свойство Clear Свойство Clip Свойство Color
Свойства CSS
Дизайн сайтов
ПОИСК ПО САЙТУ:

Моё имя Антон. Связаться со мною Вы можете по e-mail: averagev@mail.ru