ARANEA.RU АРАНЕА.РУ
веб информация
CSS 3 - модуль фонов и границ
NEMO SAPIENS, NISI PATIENS
 
Сегодня:  
 

веб информация

CSS 3 - модули спецификации

* * *
HTML 4.01
Спецификация
HTML 4.01
Занятия
S S I
Директивы
C S S 2.0
Спецификация
C S S 2.0
Занятия
Javascript
Описание
XHTML 1.0
Спецификация
W M L
Спецификация

CSS Backgrounds and Borders Module Level 3

CSS 3 – Модуль фонов и границ

* * *

7. Прочие эффекты

7.1. Свойство ‘box-decoration-break’
Название: box-decoration-break
Значение: slice | clone
Начальное значение: slice
Применяется: ко всем элементам
Наследование: нет
Процентная база: нет
Медиа: визуальные
Расчетное значение: как установлено

Когда блок прерывается на разрыве страницы, на разрыве колонки, или для внутристрочного элемента на разрыве строки, свойство ‘box-decorationbreak’ определяет, будут ли индивидуальные блоки обрабатываться как разорванные части одного непрерывного блока, или каждый блок будет индивидуально заключаться в границы и отступы. Для фонов, оно устанавливает, как получается область позиционирования фона из этих нескольких блоков, и как фон элемента вырисовывается внутри них.

Значения имеют следующий смысл:

‘clone’

Каждый блок независимо заключается в границы и отступы. Свойства ‘border-radius’, ‘border-image’ и ‘box-shadow’, если они есть, применяются к каждому блоку независимо. Фон вырисовывается независимо для каждого блока элемента. Неповторяемое фоновое изображение, таким образом, будет визуализироваться один раз в каждом блоке элемента.

‘slice’

Ни граница, ни отступы не вставляются в разрыв. Тень блока (box-shadow) не вырисовывается на крае разрыва; свойство ‘border-radius’ не применяется на его углах; и изображение границы ‘border-image’ визуализируется для целого блока, как если бы он не был разорван. Эффект действует, несмотря на то, что элемент визуализировался бы без разрыва, а затем разрезается разрывом после этого. Фоны вырисовываются, как если после завершения разметки элемента (включая любое выравнивание, двусторонняя реорганизация, разрывы страниц и т. д.), все блоки элемента берутся и помещаются одни после другого в визуальном порядке.

Фон применяется для ограничивающего блока этого составного блока, и затем блоки размещаются обратно с их долей фона.

Для блоков, разрываемым по строкам, первые блоки на одной и той же строке соединяются в визуальном порядке. Затем блоки на последовательных строках организуются в соответствии с направлением последовательности внутри строк элемента. Например, в объемлющем блоке слева-направо (‘direction’ - значение ‘ltr’), первый блок является самым левым блоком на первой строке, и блоки от последующих строк помещаются справа от него. В объемлющем блоке справа-налево, первый блок является самым правым на первой строке, и последующие блоки помещаются слева от него.

Для блоков, разорванных по колонкам, колонки обрабатываются, как один непрерывный элемент, как если бы блоки колонок были склеены вместе в направлении последовательности блоков элемента с множеством колонок. Для блоков, разорванных на страницы, области содержания страниц склеиваются вместе в направлении последовательности блоков корневого элемента. В этих случаях, если части имеют различную ширину (высоту, если корневой элемент / элемент с множеством колонок имеют режим вертикального текста), тогда каждая часть вырисовывает фон, допуская, что целый элемент имеет одинаковую ширину (высоту), как у данной части. Это обеспечивает, что изображения, выровненные по правому краю, останутся выровненными по правому краю, а изображения, выровненные по левому краю, останутся выровненными по левому краю, а изображения по центру находятся на центре.



Рисунок 13. Две возможности для свойства ‘box-decoration-break’: слева значение - ‘slice’, справа - значение ‘clone’.

Для внутристрочных элементов, сторона блока, которая разрывается, определяется направлением последовательности внутри строки элемента, а не объемлющим блоком. Например, первая часть внутристрочного элемента с ‘direction: rtl’ внутри блока с ‘direction: ltr’ будет разрываться на левой стороне.

7.2. Свойство ‘box-shadow’
Название: box-shadow
Значение: none | <shadow> [ , <shadow> ]*
Начальное значение: none
Применяется: ко всем элементам
Наследование: нет
Процентная база: нет
Медиа: визуальные
Расчетное значение: любое <length>:, указанное абсолютным; любой рассчитанный цвет; иначе – как установлено

Свойство ‘box-shadow’ прикрепляет одну или несколько теней к блоку. Свойство является перечнем теней, разделенных запятой, каждое, определенное значениями длиной 2-4, факультативным цветом и факультативным ключевым словом ‘inset’. Пропущенные значения длин равны 0; пропущенные цвета являются цветами, выбранными пользовательским агентом.

Где
<shadow> = inset? && [ <length>{2,4} && <color>? ]

Компоненты каждой тени <shadow> интерпретируются следующим образом:

  • Первая длина – горизонтальное смещение тени. Положительное значение рисует тень, которая является смещением в правую сторону блока, а отрицательное значение – влево.
  • Вторая длина – вертикальное смещение. Положительное значение смещает тень вниз, а отрицательное – вверх.
  • Третья длина – радиус размывания. Отрицательные значения не разрешаются. Если значение размывания равно нулю, то край тени резкий. Иначе, чем больше значение, тоем больше размывание края тени. См. ниже.
  • Четвертая длина – расстояние расширения. Положительные значения приводят к тому, что форма тени расширяется во всех направлениях на установленный радиус. Отрицательные значения приводят к сжатию формы тени. См. ниже.

Обратите внимание на то, что внутренние тени и расширяющие тени (создающие более затененную область) обозначают сжатие формы периметра тени.

  • Цвет – цвет тени.
  • Ключевое слово ‘inset’, если оно присутствует, изменяет падающую тень от внешней тени (тень, которая падает от блок на канву, как если бы он был бы приподнят на канвой) на внутреннюю тень (тень, которая падает от канвы на блок, как если бы блок был бы вырезан в канве и смещен под нее).
  • Внешняя тень блока падает, как если бы блок границы элемента был бы затемнен. Тень рисуется только снаружи края границы: она вырезается внутри блока границы элемента.

    Внутренняя тень блока падает, как если бы все снаружи от края отступа затемнено. Внутренняя тень рисуется только внутри края отступов: она вырезается снаружи от блока отступов элемента.

    Если блок имеет не нулевой радиус границы ‘border-radius’, то форма тени закругляется таким же образом. Свойство ‘border-image’ не влияет на форму тени блока.

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

    Расстояние ненулевого размывания указывает на то, что результирующая тень будет размываться, например, с помощью фильтра Гаусса. Точный алгоритм не определен; однако результирующая тень должна аппроксимировать (с каждым пикселем в пределах 5% от его ожидаемого значения) изображение, которое будет генерироваться с помощью применения тени с размыванием Гаусса со стандартным отклонением, равным половине радиуса размывания.

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

    Пример XXIX

    Пример внизу демонстрирует эффекты распространения и размывания по тени:


    Эффекты тени применяются спереди назад: первая тень находится на верху, а другие – послойно под ней. Тени не влияют на разметку и могут накладываться на другие блоки или их тени. В выражении послойного контекста и порядка прорисовки, внешние тени элемента рисуются немедленно под фоном данного элемента, а внутренние тени элемента прорисовываются немедленного выше фона данного элемента (ниже границ и изображения границы, если они есть).

    Если элемент имеет несколько блоков, все из них бросают тени, но тени только прорисовываются там, где границы будут рисоваться; см. ‘box-decoration-break’.

    Тени не включают прокрутку или увеличении размеров прокручиваемой области.

    Пример XXX

    Ниже дано несколько примеров оранжевого блока с размываемой границей, данной с тенью.

    border:5px solid blue; background-color:orange; width: 144px; height: 144px; border-radius: 20px; border-radius: 0;
    box-shadow: rgba(0,0,0,0.4) 10px 10px;
    box-shadow: rgba(0,0,0,0.4) 10px 10px Inset
    box-shadow: rgba(0,0,0,0.4) 10px 10px 0 10px /* spread */
    box-shadow: rgba(0,0,0,0.4) 10px 10px 0 10px /* spread */ Inset

    Свойство ‘box-shadow’ применяется для псевдоэлемента ‘::first-letter’, но не применяется для псевдоэлемента ‘::first-line’. Внешние тени не имеют влияния на внутренние табличные элементы в модели сжатых границ. Если тень определена для одного края границы в модели сжатых границ, который имеет несколько толщин границы (например, внешняя тень для таблицы, где один ряд имеет более толстые границы, чем другие, или внутренняя тень для ячейки таблицы с атрибутом rowspanning, которая соседствует с различными толщинами границы), точное положение и визуализация теней не определено.

      

Copyright © 2006 -  aranea.ru

домашняя веб информация кабинет переводчика
био фотографии фотографии обозрение
            Анализ сайта