Атрибуты: Параметры визуализации блочного элемента.

  Атрибуты стилей визуализации применяются для создания различных визуальных эффектов при отображении полей элементов блочных тегов на Web-странице.

  Визуальные эффекты распространяются как на фон, так и на пользовательский контент в поле элементов тегов.
  Оптическая фильтрация.
  Атрибуты:
  [-webkit-]filter - Устанавливает оптический фильтр для отображения поля элемента.

Формат:

  • [-webkit-]filter:
      [blur([Радиус])]
      [brightness([Яркость])]
      [contrast([Контрастность])]
      [drop-shadow(Горизонтальное смещение Вертикальное смещение [Радиус] [Размер] [Окраска])]
      [grayscale([Доля])]
      [hue-rotate([Смещение])]
      [invert([Доля])]
      [opacity([Доля непрозрачности])]
      [saturate([Насыщенность])]
      [sepia([Доля])]
      |none
      |inherit

Значения:

  • blur([Радиус]) - Для фильтра отображения устанавливается CSS функция blur, которая задаёт Гауссово размытие поля элемента.
  • brightness([Яркость]) - Для фильтра отображения устанавливается CSS функция brightness, которая задаёт яркость поля элемента.
  • contrast([Контрастность]) - Для фильтра отображения устанавливается CSS функция contrast, которая задаёт контрастность поля элемента.
  • [drop-shadow(Горизонтальное смещение Вертикальное смещение [Радиус] [Размер] [Окраска]) - Для фильтра отображения устанавливается CSS функция drop-shadow, которая задаёт тень поля элемента.
      Эта функция работает аналогично атрибуту стиля box-shadow, однако при использовании других фильтров обращение к функции drop-shadow предпочтительней из соображений повышения производительности.
  • grayscale([Доля]) - Для фильтра отображения устанавливается CSS функция grayscale, которая задаёт долю оттенков серого в поле элемента.
  • hue-rotate([Смещение]) - Для фильтра отображения устанавливается CSS функция hue-rotate, которая задаёт преобразование поля элемента в соответствии с заданным смещением от исходного в цветовом круге.
  • invert([Доля]) - Для фильтра отображения устанавливается CSS функция invert, которая задаёт инвертирование поля элемента.
  • opacity([Доля непрозрачности]) - Для фильтра отображения устанавливается CSS функция opacity, которая задаёт прозрачность поля элемента.
  • saturate([Насыщенность]) - Для фильтра отображения устанавливается CSS функция saturate, которая задаёт насыщенность поля элемента.
  • sepia([Доля]) - Для фильтра отображения устанавливается CSS функция sepia, которая задаёт долю оттенков коричневого (сепии) в поле элемента.
  •  none - Отсутствие фильтра отображения поля элемента. Это нормальное значение, оно действует по умолчанию.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  Значения фильтров можно совмещать перечисляя через пробел, тем самым создавая эффект наложения разных фильтров.
  Выделение области визуализации.
  Атрибуты:
  [-webkit-]clip-path - Устанавливает область визуализации поля элемента на Web-странице.
  В поле элемента только в этой области будет видна соответствующая часть контента этого элемента, остальная часть поля станет прозрачной. (Атрибут clip-path заменил устаревший атрибут clip.)

Формат:

  • [-webkit-]clip-path:
      |circle([Радиус] [at Горизонтальное смещение [Вертикальное смещение]])
      |ellipse([Радиус1 [Радиус2]] [at Горизонтальное смещение [Вертикальное смещение]])
      |inset([Смещение сверху [Смещение справа [Смещение снизу [Смещение слева ] [round [Левый верхний угол [Правый верхний угол [Правый нижний угол [Левый нижний угол]]]])
      |polygon([X1 Y1, X2 Y2, X3 Y3[, ....., Xn Yn])
      |url(Ссылка)
      |initial
      |inherit
      |unset

Значения:

  • circle([Радиус] [at Горизонтальное смещение [Вертикальное смещение]]) - Для области визуализации устанавливается CSS функция circle, которая задаёт круг.
  • ellipse([Радиус1 [Радиус2]] [at Горизонтальное смещение [Вертикальное смещение]]) - Для области визуализации устанавливается CSS функция ellipse, которая задаёт эллипс.
  • inset([Смещение сверху [Смещение справа [Смещение снизу [Смещение слева ] [round [Левый верхний угол [Правый верхний угол [Правый нижний угол [Левый нижний угол]]]]) - Для области визуализации устанавливается CSS функция inset, которая задаёт прямоугольник.
  • polygon([X1 Y1, X2 Y2, X3 Y3[, ....., Xn Yn]) - Для области визуализации устанавливается CSS функция polygon, которая задаёт многоугольную фигуру.
  • url(Ссылка) - Для области визуализации устанавливается CSS функция url, которая задаёт фигуру:
    • Либо файлом в формате SVG, который находится по указанной ссылке.
    • Либо SVG рисунком ограниченным элементом SVG тега clipPath, который находится в документе по указанной ссылке.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям если таковые есть, в противном случае - к значениям по умолчанию.
  Прозрачность.
  Атрибуты:
  opacity - Устанавливает уровень прозрачности поля определянмого элемента.

Формат:

  • opacity:
      Уровень
      |inherit

Значения:

  • Уровень - Число в диапазоне от 0 до 1 - уровень прозрачности.
      0 - полная прозрачность.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега (умолчание).
  Прозрачность поля элемента распространяется на фон его поля и всех полей "дочерних" элементов, на его внутренний контент и внутренний контент всех его "дочерних" элементов.
  Если для элемента, связанным атрибутом стиля opacity, установлена прозрачность, то уровень прозрачности, возможно заданный для его "дочерних" элементов также связанных с атрибутом стиля opacity, вычислится от значения прозрачности "родительского" элемента.
  Маскирование.
  Маскирование выполняется заданием маски над полем элемента.
  Маска - это рисунок, который может быть построен с помощью изображения, градиента и(или) SVG элементов.
  Эффект маскирование создаётся за счёт прозрачности или непрозрачности окраски разных областей рисунка маски.
  Цвет в окраске рисунка маски не имеет значения, значение имеет только степень прозрачности этого цвета..

  К примеру в градиенте, одним из значений градации может быть значение transparent (прозрачный), который создаст эффект равномерной градации прозрачности. Или может быть использовано CSS значение цвета со степенью прозрачности.

  Чем больше степень прозрачности в окраске рисунка маски, тем прозрачней (или не прозрачней в зависимости от типа маски) будет соответствующая область маски над замаскированным полем элемента.
  Атрибуты:
  [-webkit-]mask-image - Устанавливает рисунок маски для поля определяемого элемента тега.

Формат:

  • [-webkit-]mask-image:
      Изображение1|Градиент1|url(Ссылка1)
      [, Изображение2]|Градиент2|url(Ссылка2)
      [,... [, ИзображениеN|ГрадиентN]|url(СсылкаN)...]
      |none

Значения:

  • Изображение - CSS значение изображения, которое создает рисунок маски.
      Может быть назначено несколько изображений для нескольких масок.
  • Градиент - CSS значение градиента, которое создает рисунок маски.
      Может быть назначено несколько градиентов для нескольких масок.
  • url(Ссылка) - Для маскирования устанавливается CSS функция url, которая задаёт рисунок маски:
    • Либо файлом в формате SVG, который находится по указанной ссылке.
    • Либо SVG рисунком ограниченным элементом SVG тега mask, который находится в документе по указанной ссылке.
      Может быть назначено несколько ссылок для нескольких масок.
  • none - Определяет отсутствие маски. Это нормальное состояние, оно действует по умолчанию и равносильно отсутствию атрибута mask-image.
  Если для маскирования назначено несколько масок, то каждая из них последовательно создаёт свой слой маскирования, которые накладываются друг на друга.
  Самым первым слоем ("верхним") является слой, созданный первым изображением, градиентом или SVG рисунком этой последовательности.
  [-webkit-]mask-repeat - Устанавливает способ формирования рисунка маски заданным изображением для поля определяемого элемента тега
  Имеет смысл только при наличии маски установленной атрибутом mask-image.
  Формирование рисунка маски учитывает значение атрибута стиля mask-size.

Формат:

  • [-webkit-]mask-repeat:
      no-repeat|repeat|repeat-x|repeat-y|space|round|Горизонталь Вертикаль
      [, no-repeat|repeat|repeat-x|repeat-y|space|round|Горизонталь Вертикаль]
      [,... [, no-repeat|repeat|repeat-x|repeat-y|space|round|Горизонталь Вертикаль]...]

Значения:

  • no-repeat – Соответствующие изображение из списка значений mask-image не будет повторяться в его слое маски.
  • repeat - Соответствующие изображение из списка значений mask-image будет повторяться в его слое маски по горизонтали и вертикали (умолчание).
  • repeat-x – Соответствующие изображение будет повторяться в его слое маски только по горизонтали.
  • repeat-y – Соответствующий изображение будет повторяться в его слое маски только по вертикали.
  • space – Соответствующиее изображение будет повторяться в его слое маски по горизонтали и по вертикали.
      Вся маска заполнится максимально возможным количеством изображений, а первое и последнее (по горизонтали и вертикали) могут быть поровну обрезаны.
      Значение space может привести к образованию прозрачных границ между повторами изображения.
  • round – Соответствующий изображение будет повторяться в его слое маски по горизонтали и по вертикали.
      Вся маска заполнится максимально возможным количеством изображений, а первое и последнее (по горизонтали и вертикали) могут быть поровну масштабированы для того, чтобы не обрезаться.
  • Горизонталь – Одно из ключевых слов no-repeat, repeat, space или round для формирования маски слоя соответствующим изображением по горизонтали.
  • Вертикаль – Одно из ключевых слов no-repeat, repeat, space или round для формирования маски слоя соответствующим изображением по вертикали.
  Последовательность значений атрибута стиля mask-repeat соответствует последовательности слоёв установленных атрибутом стиля mask-image.
  [-webkit-]mask-position - Устанавливает позицию заданного изображения в рисунке маски для поля определяемого элемента тега.
  Имеет смысл только при наличии изображения заданного атрибутом стиля mask-image и атрибута стиля mask-repeat: no-repeat.
  Относительность позиционирования изображения в рисунке маски устанавливается атрибутом стиля mask-origin.

Формат:

  • [-webkit-]mask-position:
      Позиция1
      [, Позиция2]
      [,... [, ПозицияN]...]

Значения:

  Последовательность значений атрибута стиля mask-position соответствует последовательности слоёв установленных атрибутом стиля mask-image.
  [-webkit-]mask-size - Устанавливает способ масштабирования заданного изображения в рисунке маски для поля определяемого элемента тега.
  Имеет смысл только при наличии изображения заданного атрибутом стиля mask-image.
  Относительность масштабирования изображения в рисунке маски устанавливается атрибутом стиля mask-origin.

Формат:

  • [-webkit-]mask-size:
      Размер11 [Размер12] |auto|cover|contain
      [, Размер22 [Размер22] |auto|cover|contain]
      [,... [, РазмерN1 [РазмерN2] |auto|cover|contain]...]

Значения:

  • Размерi1 – Горизонтальный размер для соответствующего изображения из списка значений mask-image.
      Задаётся линейной величиной с единицей измерения.
      Если задан один размерi1, то изображение пропорционально масштабируется.
  • Размерi2 – Вертикальный размер для соответствующего изображения из списка значений mask-image.
      Задаётся линейной величиной с единицей измерения.
      Два размера - размерi1 или размерi2 могут поменять пропорции изображения в маске.
  • auto - Изображение помещается в соответствующей маске как есть.(Умолчание).
  • cover - Минимальный размер (по горизонтали или вертикали) изображения в соответствующей маске должен подгоняться под соответствующий размер поля определяемого элемента тега.
      Пропорции изображения не изменяются, поэтому оно может быть соответственно обрезано.
  • contain - Максимальный размер (по горизонтали или вертикали) изображения в соответствующей маске должен подгоняться под соответствующий размер поля определяемого элемента тега.
      Пропорции изображения не изменяются.
  Последовательность значений атрибута стиля mask-size соответствует последовательности слоёв установленных атрибутом стиля mask-image.
  [-webkit-]mask - Устанавливает общий стиль маски для поля определяемого элемента тега..

Формат:

  • [-webkit-]mask:
      [Изображение|Градиент|Рисунок [Формирование] [Позиция] [Масштаб]]

Значения:

  • Изображение|Градиент|Рисунок – Определяется значением атрибута mask-image.
  • Формирование – Определяется значением атрибута mask-repeat.
  • Позиция – Определяется значением атрибута mask-position.
  • Масштаб – Определяется значением атрибута mask-size.
  [-webkit-]mask-clip - Устанавливает область видимости рисунка слоя маски.
Формат:

  • [-webkit-]mask-clip:
      padding-box|border-box|content-box
      [, padding-box|border-box|content-box]
      [,... [, padding-box|border-box|content-box]...]

Значения:

  • padding-box – Область видимости рисунка маски располагается над всем полем элемента, за исключением рамок (умолчание).
      Если нет ни одного слоя с рисунком маски над рамками, то рамки могут оказаться невидимыми.
  • border-box - Область видимости рисунка маски располагается над всем полем элемента, в том числе, и над рамками.
  • content-box - Область видимости рисунка маски располагается только над пользовательским представлением контента определяемого элемента тега.
      Если нет ни одного слоя с рисунком маски над рамками и остальной областью поля элемента, то они могут оказаться невидимыми.
  Последовательность значений атрибута стиля mask-clip соответствует последовательности слоёв установленных атрибутом стиля mask-image.
  Самым "верхним" слоем маски является слой, заданный первым из списка значений атрибута стиля mask-image.
  Поэтому, к примеру, в маске из трёх слоёв, первое значение из списка значений атрибута стиля mask-clip задаст область видимости для рисунка первого слоя маски, второе значение задаст область видимости для рисунка второго слоя маски, третье значение задаст область видимости для рисунка третьего слоя маски.

  Каждый рисунок слоя маски отобразится в его области видимости в соответствии со значением установленным для него атрибутом стиля mask-origin.
  Если область, заданная атрибутом mask-origin, меньще чем область, заданная атрибутом mask-clip для одного и того же слоя маски, то рисунок маски всё равно будет распространён на всю область, заданную атрибутом mask-clip.
  [-webkit-]mask-origin - Устанавливает относительность формирования рисунка маски, масштабирования и позиционирования изображения в рисунке маски.
  Имеет смысл только при наличии рисунка заданного атрибутом стиля mask-image.

Формат:

  • [-webkit-]mask-origin:
      padding-box|border-box|content-box
      [, padding-box|border-box|content-box]
      [,... [, padding-box|border-box|content-box]...]

Значения:

  Последовательность значений атрибута стиля mask-origin соответствует последовательности слоёв установленных атрибутом стиля mask-image.
  Атрибут mask-origin только устанавливает относительность формирования рисунка маски, масштабирования и позиционирования изображения рисунка маски.
  Область видимости рисунка маски задаётся атрибутом стиля mask-clip.
  Соответственно, если область, заданная атрибутом mask-origin, меньще чем область, заданная атрибутом mask-clip для одного и того же слоя маски, то рисунок маски всё равно будет распространяться на всю область, заданную атрибутом mask-clip.
  [-webkit-]mask-type - Устанавливает тип маски.
  Имеет смысл только при наличии рисунка заданного атрибутом стиля mask-image.

Формат:

  • [-webkit-]mask-type:
      alpha|luminance
      [, alpha|luminance]
      [,... [, alpha|luminance]...]

Значения:

  • alpha – Соответствующие изображение из списка значений mask-image устанавливает альфа-маску.
      Меньшая степень прозрачности в маске создаёт большую прозрачность над соответствующей областью поля элемента.
  • luminance - Соответствующие изображение из списка значений mask-image устанавливает маску по яркости.
      Большая степень прозрачности в маске создаёт большую прозрачность над соответствующей областью поля элемента.
  Последовательность значений атрибута стиля mask-type соответствует последовательности слоёв установленных атрибутом стиля mask-image.
  Область обтекания.
  При особом расположении полей элементов возможно их "обтекание" контентом в поле родительского элемента.
  Но поле любого элемента имеет прямоугольную форму, соответственно будет выглядеть на Web-странице и "обтекающий" контент.
  Однако, в поле "обтекаемого" элемента можно установить область, которая позволит окружающему это поле контенту "обтекать" его не по границам поля, а по границам этой области.
  Атрибуты:
  [-webkit-]shape-outside - Устанавливает область "обтекания" поля определяемого элемента тега.

Формат:

  • [-webkit-]shape-outside:
      |circle([Радиус] [at Горизонтальное смещение [Вертикальное смещение]])
      |ellipse([Радиус1 [Радиус2]] [at Горизонтальное смещение [Вертикальное смещение]])
      |inset([Смещение сверху [Смещение справа [Смещение снизу [Смещение слева ] [round [Левый верхний угол [Правый верхний угол [Правый нижний угол [Левый нижний угол]]]])
      |polygon([X1 Y1, X2 Y2, X3 Y3[, ....., Xn Yn])
      |url(Ссылка)
      [margin-box|border-box|padding-box|content-box]
      |Изображение
      |Градиент
      |initial
      |inherit
      |unset

Значения:

  • circle([Радиус] [at Горизонтальное смещение [Вертикальное смещение]]) - Для области "обтекания" устанавливается CSS функция circle, которая задаёт круг.
  • ellipse([Радиус1 [Радиус2]] [at Горизонтальное смещение [Вертикальное смещение]]) - Для области "обтекания" устанавливается CSS функция ellipse, которая задаёт эллипс.
  • inset([Смещение сверху [Смещение справа [Смещение снизу [Смещение слева ] [round [Левый верхний угол [Правый верхний угол [Правый нижний угол [Левый нижний угол]]]]) - Для области "обтекания" устанавливается CSS функция inset, которая задаёт прямоугольник.
      Радиусы закругления углов учитываются при "обтекании" прямоугольника.
  • polygon([X1 Y1, X2 Y2, X3 Y3[, ....., Xn Yn]) - Для области "обтекания" устанавливается CSS функция polygon, которая задаёт многоугольную фигуру.
  • url(Ссылка) - Для области "обтекания" устанавливается CSS функция url, которая задаёт фигуру:
    • Либо файлом в формате SVG, который находится по указанной ссылке.
    • Либо SVG рисунком ограниченным элементом SVG тега clipPath, который находится в документе по указанной ссылке.
  • margin-box - Фигура, установленная для области "обтекания", позиционируется во всём поле элемента включая внешние отступы.
  • border-box - Фигура, установленная для области "обтекания", позиционируется в части поля элемента не включающей внешние отступы.
  • padding-box - Фигура, установленная для области "обтекания", позиционируется в части поля элемента не включающей рамки (умолчание).
  • content-box - Фигура, установленная для области "обтекания", позиционируется в части поля элемента не включающей внутренние отступы (только под контентом).
  • Изображение - CSS значение изображения, которое создает контур фигуры для "обтекания".
      Внешняя область изображения за его значимым контуром должна быть прозрачна.
  • Градиент - CSS значение градиента, которое создает контур фигуры для "обтекания".
      Очевидно, имеет смысл только значение радиального градиента.
      Прозрачные границы радиального градиента сдвинут контур фигуры для "обтекания" ближе к центру, до места, в котором окажется половинная прозрачность.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  Надо иметь в виду, что область "обтекания" не отменяет фон поля "обтекаемого" элемента.
  Реакция на тактильное воздействие.
  Атрибуты:
  touch-action - Устанавливает реакцию на тактильное воздействие в поле элемента определяемого тега.
  Тактильное воздействие возможно для сенсорных устройств.
  В результате тактильного воздействия поле элемента может быть зуммировано, смещено, панорамировано и т.п..

Формат:

  • touch-action:
      auto
      |pan-x
      |pan-y
      |pan-left
      |pan-right
      |pan-up
      |pan-down
      |manipulation
      |none
      |initial
      |inherit
      |unset

Значения:

  • auto - Разрешены все виды тактильного воздействия (умолчание).
  • pan-x, pan-left, pan-right - Разрешено тактильное воздействие, которое может привести к горизонтальному скроллингу контента определяемого элемента в поле непосредственного "родительского" элемента.
  • pan-y, pan-up, pan-down - Разрешено тактильное воздействие, которое может привести к вертикальному скроллингу контента определяемого элемента в поле непосредственного "родительского" элемента.
  • manipulation - Разрешено тактильное воздействие, которое может привести к горизонтальному и вертикальному скроллингу контента а, также, зуму определяемого элемента в поле непосредственного "родительского" элемента.
  • none - Отменяет настройки по умолчанию для всех видов тактильного воздействия.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  Зуммирование контента поля элемента.
  Атрибуты:
  zoom - Устанавливает зум контента в поле элемента определяемого тега.
Формат:

  • zoom:
      auto
      |Размер
      |initial
      |inherit
      |unset

Значения:

  • auto - Размер зума определяет браузер в соответствии с установленными пользовательскими настройками (умолчание).
  • Размер - Положительное число без единицы измерения, или с единицей измерения %.
      Число без единицы измерения задаст коэффициент зумма по отношению к реальным размерам контента.
  •   Зуммируется только контент, размеры поля элемента не меняются.
      Зуммируется весь контент поля элемента, в том числе и контент "дочерних" элементов.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
Пример оптической фильтрации поля элемента:

Наведите мышку.
Исходный
blur(10px)
brightness(50%)
contrast(50%)
grayscale(100%)
hue-rotate(180deg)
invert(100%)
opacity(50%)
sepia(100%)


Пример оптической прозрачности поля элемента:

<STYLE>
  #divx {height: 330px; width: 200px; position: relative;}
  .clip2 {height: 330px; width: 200px; position: absolute; transition-property: opacity; transition-duration: 5s;}
  .clip1 {height: 330px; width: 200px; position: absolute;}
  #divx:hover .clip2 {opacity: 0.7;}
</STYLE>
<div id="divx" >
  <img class="clip1" src="../content/Дама.jpg">
  <img class="clip2" src="../content/крап.jpg">
</div>
...........
Наведите мышку.


Пример области визуализации поля элемента (Chrome):

<STYLE>
  #divy {height: 360px; width: 450px; position: relative; border: thin solid black;}
  .clip0 {height: 77px; width: 82px; position: absolute; left: 66%; top: 18%;}
  .clip {height: 360px; width: 450px; position: absolute;}
  #divy:hover .clip clip-path: polygon(evenodd, 50% 18%, 100% 18%, 60% 50%, 75% 0%, 90% 50%);}
</STYLE>
<div id="divy" >
  <img class="clip0" src="../content/Обама.jpg">
  <img class="clip" src="../content/бревно.jpg">
</div>
...........
Наведите мышку.


Пример маскирования поля элемента:

<STYLE>
  .clip3 {height: 320px; width: 410px; position: absolute; border: 20px double blue;}
  .clip3:hover {-webkit-mask-image: linear-gradient(blue,transparent), url("../content/ROGA.gif");
    -webkit-mask-origin: border-box, border-box;
    -webkit-mask-repeat: no-repeat, no-repeat;
    -webkit-mask-position: center, 5% 5%;
    -webkit-mask-size: auto, 240px 290px;}
</STYLE>
  <img class="clip3" src="../content/бревно.jpg">
...........
Наведите мышку.


Пример области обтекания поля элемента (Chrome):

<STYLE>
  #rectB { height: 400px; width: 600px; border: thin solid black; }
  #rectB:hover #left { width: 25%; height: 100%; float: left;
      background: radial-gradient(ellipse 70px 200px, blue, transparent);
      -webkit-shape-outside: ellipse(70px 200px);
      -webkit-clip-path: ellipse(70px 200px);}
  #rectB:hover #right { width: 25%; height: 100%; float: right;
      background: radial-gradient(ellipse 70px 200px, blue, transparent);
      -webkit-shape-outside: ellipse(70px 200px);
      -webkit-clip-path: ellipse(70px 200px);}
  #rectB:hover #rectC {font-size: smaller; word-break: break-all;}
</STYLE>
<DIV id="rectB">
  <DIV id="left" ></DIV>
  <DIV id="right"></DIV>
  <DIV id="rectC">«Мой дядя самых честных правил...</DIV>
</DIV>
...........
Наведите мышку.
«Мой дядя самых честных правил, Когда не в шутку занемог, Он уважать себя заставил И лучше выдумать не мог. Его пример другим наука; Но, боже мой, какая скука С больным сидеть и день и ночь, Не отходя ни шагу прочь! Какое низкое коварство Полуживого забавлять, Ему подушки поправлять, Печально подносить лекарство, Вздыхать и думать про себя: Когда же черт возьмет тебя!» Так думал молодой повеса, Летя в пыли на почтовых, Всевышней волею Зевеса Наследник всех своих родных. Друзья Людмилы и Руслана! С героем моего романа Без предисловий, сей же час Позвольте познакомить вас: Онегин, добрый мой приятель, Родился на брегах Невы, Где, может быть, родились вы Или блистали, мой читатель; Там некогда гулял и я: Но вреден север для меня. Служив отлично благородно, Долгами жил его отец, Давал три бала ежегодно И промотался наконец. Судьба Евгения хранила: Сперва Madame за ним ходила, Потом Monsieur ее сменил. Ребенок был резов, но мил. Monsieur l’Abbé, француз убогой, Чтоб не измучилось дитя, Учил его всему шутя, Не докучал моралью строгой, Слегка за шалости бранил И в Летний сад гулять водил.


Ещё пример области обтекания поля элемента (Chrome):

<STYLE>
  #IMGA {float: left;}
  #rectA:hover #IMGA {-webkit-shape-outside: url('../content/ROGA.gif');}
  #rectA:hover #rectD {word-break: break-all;}
</STYLE>
<DIV id="rectA">
  <IMG ID="IMGA" src="../content/ROGA.gif">
  <DIV id="rectD">«Мой дядя самых честных правил...</DIV>
</DIV>
...........
Наведите мышку.
«Мой дядя самых честных правил, Когда не в шутку занемог, Он уважать себя заставил И лучше выдумать не мог. Его пример другим наука; Но, боже мой, какая скука С больным сидеть и день и ночь, Не отходя ни шагу прочь! Какое низкое коварство Полуживого забавлять, Ему подушки поправлять, Печально подносить лекарство, Вздыхать и думать про себя: Когда же черт возьмет тебя!» Так думал молодой повеса, Летя в пыли на почтовых, Всевышней волею Зевеса Наследник всех своих родных. Друзья Людмилы и Руслана! С героем моего романа Без предисловий, сей же час Позвольте познакомить вас: Онегин, добрый мой приятель, Родился на брегах Невы, Где, может быть, родились вы Или блистали, мой читатель; Там некогда гулял и я: Но вреден север для меня. Служив отлично благородно, Долгами жил его отец, Давал три бала ежегодно И промотался наконец. Судьба Евгения хранила: Сперва Madame за ним ходила, Потом Monsieur ее сменил. Ребенок был резов, но мил. Monsieur l’Abbé, француз убогой, Чтоб не измучилось дитя, Учил его всему шутя, Не докучал моралью строгой, Слегка за шалости бранил И в Летний сад гулять водил.