www html, html уроки, html теги, css, верстка
статьи html уроки книги по css и html урокам вопросы и ответы Помощь сайту дизайн-студия Шутовой Елены
Главная страница > Свойства CSS (ЦСС) > clip
Свойства CSS (ЦСС)
Все свойства
!important
@import
@media
active
after
background
background-attachment
background-color
background-image
background-position
background-repeat
before
border
border-bottom
border-bottom-color
border-bottom-style
border-bottom-width
border-collapse
border-color
border-left
border-left-color
border-left-style
border-left-width
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-style
border-top-width
border-width
bottom
caption-side
clear
clip
color
content
counter-increment
counter-reset
cursor
direction
display
empty-cells
first-child
float
focus
font
font-family
font-size
font-style
font-variant
font-weight
height
hover
left
letter-spacing
line-height
link
list-style
list-style-image
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
min-height
min-width
opacity
outline
outline-color
outline-style
outline-width
overflow
padding
padding-bottom
padding-left
padding-right
padding-top
position
quotes
right
table-layout
text-align
text-decoration
text-indent
text-transform
top
unicode-bidi
vertical-align
visibility
visited
white-space
width
word-spacing
z-index
CSS (ЦСС) по категориям
Цвет и фон
Границы
Шрифт
контент
Списки
Форматирование
Позиционирование
Отступы
Поля
Таблицы
Интерфейс
Важность
Псевдоэлементы
Псевдоклассы
Контент

clip

Браузер Internet ExplorerInternet Explorer NetscapeNetтscape OperaОпера SafariSafari Файер фохMozilla Firefox
Версия 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Поддерживается Да Да Да Да Да Да Ошибки Да Да Да Да Да Да Да Да Да

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

CSS (ЦСС) CSS (ЦСС)2
Значение по умолчанию auto
Наследуется Нет
Применяется К блочным и заменяемым элементам
Аналог ШТМЛ Нет
Ссылка на спецификацию http://www.w3.org/TR/CSS21/visufx.ШТМЛ#propdef-clip

Описание

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

Синтаксис

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

Аргументы

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

Рис. 1. Значения параметра clip

Рис. 1. Значения параметра clip

Пример

ШТМЛ 4.01CSS (ЦСС) 2.1IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.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>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
   nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. 
   Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit 
   lobortis nisl ut aliquip ex ea commodo consequat.</p>
  </div>
  
 </body>
</html>

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

Рис. 2

Рис. 2. Применение параметра clip в браузере Опера 9.23

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

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

Примечание

Браузер Опера 7 (в версии 8 и старше иначе) скрывает только содержимое блочного элемента, а фон и рамку оставляет нетронутой. На рис. 3 показан результат приведенного примера в браузере Опера 7.

Рис. 3

Рис. 3. Использование параметра clip в браузере Опера 7

Другие браузеры отображают пример по иному. Так, браузер Файер фох скрывает не только контент, но также фон и рамку, как показано на рис. 4.

Рис. 4

Рис. 4. Использование параметра clip в браузере Файер фох

Copyright 2009 Все права засчищены, по всем вопросам пишите по адресу admin@www-html.ru

О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект