1.12.12.Фільтр wave

Фільтр wave задає хвилеподібне відображення об'єкту

Синтаксис:

{filter:Wave(Freq=5, Add=0, LightStrength=1, Phase=2, Strength=2)}

Використовує параметри:

• add - або 0-false, або 1-true

• freq - задає кількість хвиль

• phase - задає фазу хвилі

• lightstrength - задає зміну інтенсивності освітленості на вершинах хвиль

• strength - задає інтенсивність хвилі

1.12.13.Фільтр xray

Фільтр xray показує контур об'єкту, неначебто це був рентгенівський знімок:

Синтаксис:

{filter:Xray;}

1.13.Розділ 13 - Шари

Концепція шарів була розроблена і вперше запропонована компанією Netscape, їх теги <LAYER> і <ILAYER> були багато в чому схожі на <FRAME> і <IFRAME>. Проте з часом їм на заміну прийшло і практично повністю витіснило оригінальне рішення від Microsoft. Було запропоновано розглядати окремі блоки тексту, в тегах <SPAN> або <DIV> як шари, організувавши управління ними за допомогою їх властивостей.

Застосування шарів дозволяє створити на сторінці деяку подібність тривимірного простору, хоча насправді це лише плоскі шари із заданим порядком перекриття, як в колоді карт. За допомогою таблиць стилів CSS ми можемо задавати різні властивості шарам і позиціонувати їх. Це відкриває перед web-майстром масу можливостей, дозволяє створювати сторінки більш схожими на друкарських і дозволяє, в більшості випадків, відмовитися від небажаного використання таблиць для позиціонування вмісту.

1.13.1.Абсолютне позиціонування

Як і будь-яка інша властивість, властивість Position задається за допомогою таблиць стилів CSS.

Синтаксис:

{position: absolute}

Воно може приймати наступні значення:

• position:absolute означає, що позиціонування шару відбуватиметься щодо лівого верхнього кута сторінки.

• position:relative означає, що позиціонування шару відбуватиметься щодо того місця, де в початковому тексті він знаходиться, тобто щодо попереднього елементу.

• position:static означає, що позиціонування шару відбуватиметься щодо фону.

1.13.2.Горизонтальне позиціонування

Позиціонування по горизонталі задається властивістю left, шляхом задання відступу по осі X лівого верхнього кута шару щодо точки відліку, яка визначається властивістю Position

Синтаксис:

{left: значення}

задається:

• n px

• n %

• auto

1.13.3.Вертикальне позиціонування

Позиціонування по вертикалі задається властивістю top, атрибут дозволяє задати Y-координату лівого верхнього кута шару щодо точки відліку, яка визначається властивістю Position

Синтаксис:

{top: значення}

задається:

• n px

• n %

• auto

1.13.4.Завдання висоти шару

height, ця властивість дозволяє задати висоту шару у вікні браузера:

Синтаксис:

{height: значення}

задається:

• n px

• n %

• auto

1.13.5.Завдання ширини шару

width, ця властивість дозволяє задати ширину шару у вікні браузера:

Синтаксис:

{width: значення}

задається:

• n px

• n %

• auto

1.13.6.Позиціонування в глибину

z-index, ця властивість дозволяє задати порядок перекриття шарами один одного, при цьому шар з вищим індексом розташовуватиметься над шаром з низьким індексом. У випадку, якщо атрибут не заданий спеціально, браузер привласнює вищий індекс шару, який в початковому коді описаний пізнішим:

Синтаксис:

{z-index: 2}

• auto

• порядковий номер

1.13.7.Управління видимістю

visibility, ця властивість дозволяє задати видимість шару, привласнивши йому одне із значень:

Синтаксис:

{visibility: inherit}

• inherit

• hidden

• visible

• display, ця властивість дозволяє задати видимість шару, візуально відрізняється від visibility тим, що зміщує попередній і наступний шари разом:

Синтаксис:

{display: none}

• inline

• list-item

• none

• block

При схожості властивостей, що здається, шарам visibility і display працюють вони по різному.

overflow, ця властивість дозволяє задати, як виглядає текст, що переповнив межі шару, привласнивши йому одне із значень:

Синтаксис:

{overflow: none}

• none

• clip

• scroll