Визуальные эффекты

Обычно содержимое бокса блока ограничено краями бокса. В определённых случаях бокс может переполняться, то есть его содержимое отчасти либо всецело находится за пределами бокса, скажем:

Когда появляется переполнение, качество 'overflow' специфицирует, как сжимается бокс ( и сжимается ли). Качество 'clip' специфицирует размер и форму сжимаемой области. Спецификация крошечной области для сжатия может вызвать сжатие иного видимого содержимого.

11.1.1 Переполнение: качество 'overflow'

Это качество специфицирует, сжимается ли содержимое элемента яруса блока, если оно переполняет бокс элемента (тот, что действует как содержащий блок для содержимого).
Значения имеют дальнейший толк:

Даже если 'overflow' установлено в 'visible', содержимое может быть обрезано до размеров окна документа ПА средой окружения.

Рассмотрим дальнейший пример блока кавычек (BLOCKQUOTE), тот, что слишком крупен для своего содержащего блока (установленного DIV). Вот документ-источник:

<DIV>
<BLOCKQUOTE>
<P>I didn't like the play, but then I saw
it under adverse conditions - the curtain was up.
<DIV class="attributed-to">- Groucho Marx</DIV>
</BLOCKQUOTE>
</DIV>

Это таблица жанров, руководящая размерами и жанром генерируемых боксов:

DIV { width : 100px; height: 100px;
      border: thin solid red;
      }

BLOCKQUOTE   { width : 125px; height : 100px;
      margin-top: 50px; margin-left: 50px; 
      border: thin dashed black
      }

DIV.attributed-to { text-align : right; }

Начальное значение 'overflow' - 'visible', следственно BLOCKQUOTE может быть сформатирован без сжатия приблизительно так:

Rendered overflow [D]

Установка 'overflow' в 'hidden' для элемента DIV, с иной стороны, вызывает усечение BLOCKQUOTE содержащим блоком:

Clipped overflow [D]

Значение 'scroll' известит ПАгенту, что поддерживается визуальный механизм прокрутки, дабы вывести его для обеспечения доступа пользователя к усечённому содержимому.

11.1.2 Сжатие: качество 'clip'

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

Свойство 'clip' используется к элементам, имеющим качество 'overflow' со значением, хорошим от 'visible'.
Значения имеют дальнейший толк:

Предки элемента могут также иметь сжатые области (в тех случаях, когда их качество 'overflow' - 'visible'); то, что отображается, находится на пересечении разных сжатых областей.

Если сжатая область выходит за пределы окна документа ПА, содержимое может быть сжато до размеров окна среды окружения.

Эти два правила:

P { clip: rect(5px, 10px, 10px, 5px); }
P { clip: rect(5px, -5px, 10px, 5px); }

создадут прямоугольную сжимаемую область, ограниченную пунктирной линией:

Two clipping regions [D]

11.2 Видимость: качество 'visibility'

Свойство 'visibility' специфицирует, отображаются ли боксы, генерируемые элементом. Заметные боксы всё ещё влияют на конструкцию (см. качество 'display' - 'none', дабы всецело подавить генерацию бокса).
Значения имеют дальнейший толк:

Это качество может применяться совместно со скриптами для создания динамических результатов.

В дальнейшем примере нажатие всякий кнопки в форме вызывает функцию скрипта, которая делает соответствующий бокс видимым, а иной скрывается. От того что эти боксы имеют идентичные размеры и позицию, результат заключается в том, что они сменяют друг друга. (Сценарий написан на гипотетическом языке сценариев. Он может иметь либо не иметь какого-нибудь результата в ПА CSS.)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
   #container1 { position: absolute; 
                 top: 2in; left: 2in; width: 2in }
   #container2 { position: absolute; 
                 top: 2in; left: 2in; width: 2in;
                 visibility: hidden; }
-->
</STYLE>
</HEAD>
<BODY>
<P>Choose a suspect:</P>
<DIV id="container1">
   <IMG alt="Al Capone" 
        width="100" height="100" 
        src="suspect1.jpg">
   <P>Name: Al Capone</P>
   <P>Residence: Chicago</P>
</DIV>

<DIV id="container2">
   <IMG alt="Lucky Luciano" 
        width="100" height="100" 
        src="suspect2.jpg">
   <P>Name: Lucky Luciano</P>
   <P>Residence: New York</P>
</DIV>

<FORM method="post" 
      action="http://www.suspect.org/process-bums">
   <P>
   <INPUT name="Capone" type="button" 
          value="Capone" 
          onclick='show("container1");hide("container2")'>
   <INPUT name="Luciano" type="button" 
          value="Luciano" 
          onclick='show("container2");hide("container1")'>
</FORM>
</BODY>
</HTML>

Значение:	visible \| hidden \| scroll \| auto \| inherit
Начальное:	visible
Применяется:	к элементам яруса блока и к замещаемым элементам
Наследуется:	нет
Процентное:	N/A
Носитель:	визуальный

Значение:	<shape> \| auto \| inherit
Начальное:	auto
Применяется:	к элементам яруса блока и к замещаемым элементам
Наследуется:	нет
Процентное:	N/A
Носитель:	визуальный

Значение:	visible \| hidden \| collapse \| inherit
Начальное:	inherit
Применяется:	ко каждом элементам
Наследуется:	нет
Процентное:	N/A
Носитель:	визуальный

11 Визуальные эффекты

11.1 Переполнение и сжатие

11.1.1 Переполнение: качество 'overflow'

11.1.2 Сжатие: качество 'clip'

11.2 Видимость: качество 'visibility'