clip | Свойство CSS - Справочник CSS3 | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Суббота, 10.12.2016
Главная » Справочник CSS3 » Позиционирование


2D & 3D ТрансформацияСвойства контента
Свойства импортаСвойства углов
Свойства границСвойства анимации
ПсевдоклассыПсевдоэлементы
Свойства размераСвойства контура
Свойства переходаСвойства печати
Свойства тениСвойства отступов
Свойства текстаСвойства колонок
Свойства полейПозиционирование
Свойства интерфейсаТипы значений
Полезные статьиСвойства списка
Свойства шрифтаСвойства таблицы
Свойства фонаВендорные префиксы



Адаптивный сайт - aTmpl


clip | Свойство CSS

Свойство clip устанавливает границы видимой области.




Свойство clip предназначено для установки видимых границ элемента.Если Вы установите границы элементу используя свойство clip,то всё что не уместится в этих границах будет удалено.Свойство используется совместно со свойством position,а точнее с его значениями absolute и fixed,устанавливающими строгое позиционирование.При применении значения rect указывайте координаты видимой части в скобках,через запятую.Свойство применимо к строго позиционируемым элементам,создано в версии CSS2 но проходит валидацию согласно версии CSS3.




Дополнительные значения clip


Значение
Описание
rectУкажите координаты,последовательно,по часовой стрелке начиная с верхней части ( верхняя часть,часть с права,часть с низу,часть с лева
autoКотнент не обрезается ( по умолчанию = отсутствию свойства )
inheritНаследует значения родителя


Свойство работает в браузерах




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



<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство clip</title>
<meta charset="utf-8">
<style type="text/css">
<!--
.block {
position: absolute;
clip: rect(95px,345px,132px,97px);
width:400px;
height:200px;
background:#252525;
}
p {
font-size:30px;
color:red;
}
-->
</style>
</head>
<body>
<div class="block"><p>Вот таким образом можно выделить определённую облать элемента обрезав то,что не помещается в зоне указанных координат</p></div>
</body>
</html>

Пример в действии




Поэкспериментируйте сами





Русские шрифты






Источник: http://www.w3.org/TR/CSS21/visufx.html#propdef-clip
Категория: Позиционирование | Добавил: IZOTOP (20.04.2012) | Автор: Меренков Михаил E W
Просмотров: 421 | Теги: css, свойство, style, Что делает, для чего, Clip, что это | Рейтинг: 5.0/1

Вопросов / Советов / Предложений - относящихся к материалу: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]