JavaScript. Подробное руководство, 6-е издание, стр. 238

style="clip: rect(auto 100рх auto auto);"

Обратите внимание, что между значениями нет запятых, и края области отсечения задаются по часовой стрелке, начиная с верхнего края.

16.2.7. Пример: перекрытие полупрозрачных окон

Данный раздел завершается примером, который демонстрирует порядок работы с большинством обсуждавшихся CSS-свойств. В примере 16.2 CSS-стили используются для создания визуального эффекта наложения полупрозрачного окна на другое окно, обладающее полосой прокрутки. Результат приводится на рис. 16.3.

JavaScript. Подробное руководство, 6-е издание - i_029.jpg

Пример не содержит JavaScript-код и в нем нет никаких обработчиков событий, поэтому возможность взаимодействия с окнами отсутствует (иначе как через полосу прокрутки), но это очень интересная демонстрация эффектов, которые можно получить средствами CSS.

Пример 16.2. Отображение окон с использованием CSS-стилей

<!DOCTYPE html"> 

<head> 

 <style type="text/css"> 

 /** 

<b>  * Эта таблица CSS-стилей определяет три правила стилей, которые используются </b>

<b>  * в теле документа для создания визуального эффекта &quot;окна&quot;. В правилах использованы </b>

<b>  * свойства позиционирования для установки общего размера окна и расположения </b>

<b>  * его компонентов. Изменение размеров окна требует аккуратного </b>

<b>  * изменения атрибутов позиционирования во всех трех правилах. </b>

 **/ 

 div.window { /* Определяет размер и рамку окна */ 

 position: absolute; /* Положение задается в другом месте */ 

 width: 300px; height: 200px; /* Размер окна без учета рамок */ 

 border: 3px outset gray; /* Обратите внимание на 3D-эффект рамки */ 

 } 

 div.titlebar { /* Задает положение, размер и стиль заголовка */ 

 position: absolute; /* Это позиционируемый элемент */ 

 top: 0px; height: 18px; /* Высота заголовка 18px + отступ и рамка */ 

 width: 290px; /* 290 + 5px отступы слева и справа = 300 */ 

 background-color: #aaa; /* Цвет заголовка */ 

 border-bottom: groove gray 2px; /* Заголовок имеет рамку только снизу */ 

 padding: 3px 5px 2px 5px; /* Значения по часовой стрелке*/

<b>                              /* свеpxу, справа, снизу, слева */ </b>

 font: bold 11pt sans-serif; /* Шрифт заголовка */

}

<b>  div.content { /* Задает размер, положение и прокрутку содержимого окна */</b>

 position: absolute; /* Это позиционируемый элемент */

 top: 25px; /* 18px заголовок+2px рамка+3px+2px отступ */

 height: 165px; /* 200px всего - 25px заголовок - Юpx отступ */

 width: 290px; /* ЗООpx ширина - Юpx отступ */

 padding: 5px; /* Отступы со всех четырех сторон */

 overflow: auto; /* Разрешить появление полос прокрутки */

 background-color: #ffffff; /* По умолчанию белый фон */

 }

 div.tra { /* Этот класс делает окно частично прозрачным */

 opacity: .75; /* Стандартный стиль прозрачности */

 filter: alpha(opacity=75); /* Прозрачность для IE */

 }

 </style>

</head>

<body>

<b>  &lt;!-- Порядок определения окна: элемент div &quot;окна&quot; с заголовком и элемент div --&gt;</b>

<b>  &lt;!-- с содержимым, вложенный между ними. Обратите внимание, как задается --&gt;</b>

<b>  &lt;!-- позиционирование с помощью атрибута style, дополняющего --&gt;</b>

 

 <div class="window" style="left: 10px; top: 10px; z-index: 10;">

 <div class="titlebar">Tecтовoe окно</div>

 <div class="content">

<b>      1&lt;br&gt;2&lt;br&gt;3&lt;br&gt;4&lt;br&gt;5&lt;br&gt;6&lt;br&gt;7&lt;br&gt;8&lt;br&gt;9&lt;br&gt;0&lt;br&gt;&lt;!-- Множество строк для --&gt;</b>

<b>      1&lt;br&gt;2&lt;br&gt;3&lt;br&gt;4&lt;br&gt;5&lt;br&gt;6&lt;br&gt;7&lt;br&gt;8&lt;br&gt;9&lt;br&gt;0&lt;br&gt;&lt;!-- демонстр, прокрутки --&gt;</b>

 </div>