Свойства полосы прокрутки

Данные свойства задают стиль полосы прокрутки. Их можно применять к таким тегам как: BODY, TEXTAREA, FRAME и другим, которые имеют полосу прокрутки (кроме SELECT).

Scrollbar-3dlight-colorустанавливает цвет верхней и левой части ползунка и кнопок со стрелками на полосе прокрутки. При настройке этого цвета можно использовать следующие параметры:

• любое соответствующее стандарту значение цвета.
• inherit - применяется значение родительского элемента.

body{scrollbar-3dlight-color: green}

Scrollbar-arrow-colorустанавливает цвет стрелок на кнопке со стрелками. При настройке этого цвета можно использовать следующие параметры:

• любое соответствующее стандарту значение цвета.
• inherit - применяется значение родительского элемента.

body{scrollbar-arrow-color: red}

Scrollbar-base-colorустанавливает цвет основных элементов ползунка: ползунка, кнопок со стрелками, дорожки для ползунка, если не определены параметры в scrollbar-face-color. При настройке этого цвета можно использовать следующие параметры:

• любое соответствующее стандарту значение цвета.
• inherit - применяется значение родительского элемента.

body {scrollbar-base-color: green}

Scrollbar-darkshadow-colorустанавливает цвет тени для ползунка и кнопок со стрелками. При настройке этого цвета можно использовать следующие параметры:

• любое соответствующее стандарту значение цвета.
• inherit - применяется значение родительского элемента.

body {scrollbar-darkshadow-color: red}

Scrollbar-face-colorустанавливает цвет ползунка и кнопок со стрелками. Также, если Вы не задали параметр scrollbar-track-color, у Вас изменится цвет дорожки. При настройке этого цвета можно использовать следующие параметры:

• любое соответствующее стандарту значение цвета.
• inherit - применяется значение родительского элемента.

body{scrollbar-face-color: green}

Scrollbar-highlight-colorустанавливает цвет подсветки, создающий эффект объёмности. Это цвет, который окаймляет освещённую часть кнопки. Когда она не нажата, то цвет заливает левый верхний угол и стороны между ним, когда нажата - нижний правый угол. При настройке этого цвета можно использовать следующие параметры:

• любое соответствующее стандарту значение цвета.
• inherit - применяется значение родительского элемента.

body{scrollbar-highlight-color: green;}

Scrollbar-shadow-colorсхоже с scrollbar-darkshadow-color. При настройке этого цвета можно использовать следующие параметры:

• любое соответствующее стандарту значение цвета.
• inherit - применяется значение родительского элемента.

body{scrollbar-shadow-color: green;}

Scrollbar-track-colorустанавливает цвет дорожки для ползунка. При настройке этого цвета можно использовать следующие параметры:

• любое соответствующее стандарту значение цвета.
• inherit - применяется значение родительского элемента.

body{scrollbar-track-color: aqua}

Фильтры и переходы

Фильтры применяются к тексту и/или изображению для создания однократных постоянных изменений, а переходы для создания динамических эффектов. Важно отметить, что фильтры и переходы могут быть добавлены только к тегам HTML, которые рассматриваются как управляющие. Это любые теги, которые указывают браузеру, что надо создать прямоугольную область на Web-странице. Еще их называют тегами блочного уровня. Вот некоторые из управляющих тегов: BODY, DIV, MARQUEE, TD, IMG, SPAN, TR. Фильтры могут применяться и к строчным тегам, но при условии использования этим тегом свойства CSS widthи/или height. Каждый фильтр имеет свойство enabled, которое имеет всего два значения true – применить фильтр и false– не применять фильтр. Каждый из визуальных эффектов создаваемых с помощью фильтров и переходов может быть запрограммирован. Тогда эти эффекты могут динамически задаваться пользователем и воспроизводиться в ответ на события, инициированные им, например клик или нажатие кнопки. Переход вводится, как значение свойства CSS filter точно так, как это делается для обычных фильтров. Удобство фильтров и переходов для пользователя заключается в их выполнении самим браузером на клиентском компьютере.

Alpha – этот фильтр устанавливает уровень прозрачности и позволяет использовать эффект постепенного перехода от начального до конечного значения цвета. При настройке этого фильтра можно использовать следующие параметры:

• enabled - разрешение применить фильтр. Имеет всего два значения: true (по умолчанию) - разрешает применить фильтр и false - не разрешает
• finishopacity - конечный уровень прозрачности в процентах. Должен быть не меньше значения opacity.
• finishX - конечные координаты градиента по горизонтали. Задается в пикселях.
• finishY- конечные координаты градиента по вертикали. Задается в пикселях.
• opacity - задает начальный уровень прозрачности для элемента. Это значение прозрачности может быть в пределах от 0 (полная прозрачность) до 100 (полностью непрозрачен).
• startX - начальные координаты градиента по горизонтали. Задается в пикселях.
• startY - начальные координаты градиента по вертикали. Задается в пикселях.
• style - стиль градиента (0-равномерная прозрачность (по умолчанию), 1-линейный градиент, 2-радиальный, 3-угловой).

div{filter: alpha(opacity=10, finishopacity=90, style=0, startX=10, startY=10, finishX=100, finishY=100)}

BlendTransпереход, создающий эффект плавного понижения или повышения яркости объекта.

Blur – этот фильтр смазывает изображение или текст в заданном (одном из восьми) направлении, создавая иллюзию движения. Значения аргументов для настройки этого фильтра:

• add - объект (0/false - результат работы фильтра, 1/true - фильтр будет наложен на исходный образец, но сверх результата накладывается слой исходного образца, для создания более тонкого эффекта).
• direction - направление смазывания объекта в градусах (0 - вверх и далее по часовой стрелке с шагом 45 градусов).
• strength – определяет степень размытия.

img{filter: blur(Add=1, Direction=1, Strength=15)}

Фильтр chroma делает прозрачным заданный цвет, не обращаясь при этом к графическим редакторам. Значение аргумента для настройки этого фильтра:

• color - цвет, который будет прозрачным

img{filter: chroma(color=#6c75d2)}

Фильтр dropshadow создает эффект имитирующий отбрасываемую тень. Он создает теневое изображение оригинала и помещает его под оригинал со смещением задаваемым числом пикселей. Значения аргументов определяющих эффект:

• color - цвет тени.
• offx - смещение тени относительно оригинала по оси X задаваемое числом пикселей.
• offy - смещение тени относительно оригинала по оси Y задаваемое числом пикселей.
• positive - характер освещения (0/false или 1/true). Если значение true (по умолчанию), то тень создается из прозрачных пикселей элемента страницы, иначе тень создается из непрозрачных пикселей элемента страницы («негативная» тень)

div{filter: dropshadow(color=silver, offx=3, offy=3, positive=0)}

Фильтр fliph переворачивает объект горизонтально (зеркально отражает объект по горизонтали).

img{filter: fliph}

Фильтр flipv зеркально отражает объект по вертикали (переворачивает объект вертикально).

marquee{filter: flipv}

Фильтр glow выполняет наложение цветовой ауры вокруг внешних границ объекта, создавая эффект регулируемого по цвету и силе свечения "возгорания/тления" границ объекта. Общий вид filter: glow(strength, color). Значения аргументов для настройки этого фильтра:

• strength - сила свечения в диапазоне 0-100. При больших значениях наложенный эффект может быть обрезан рамкой объекта.
• color - цвет свечения.

div{filter: glow(strength=5, color=red)}

Фильтр gradient позволяет создать эффект градиентной закраски блочных элементов. Общий вид filter:progid:DXImageTransform.Microsoft.Gradient(gradientType, startColorStr, endColorStr) Значения аргументов определяющих эффект:

• endColorStr – цвет, которым заканчивается градиентная закраска;
• gradientType – стиль градиентной закраски (0 - вертикальный; 1 – горизонтальный (по умолчанию));
• startColorStr – цвет, с которого начинается градиентная закраска.

div{width: 300px; height:300px; filter:progid:DXImageTransform.Microsoft.Gradient( gradientType=0, startColorStr=#ff0000, endColorStr=#0000ff)}

Фильтр gray удаляет цветовую гамму объекта и отображает его в серых тонах создавая эффект полутонового изображения. Противоположный эффект фильтру xray. Общий вид img{filter: gray()}

Фильтр invert меняет оттенок, насыщение и яркость объекта на противоположные характеристики создавая эффект негативного изображения. Общий вид img{filter: invert()}

Фильтр lightодин из самых мощных. Моделирует эффект освещения веб-страницы или ее элементов источником(ами) света. Можно задать координаты х и у источника света, его высоту, цветовое значение RGB и яркость. При помощи скриптов, этот фильтр генерирует удивительные эффекты. Например, привести источник света в движение, связав его с курсором. В качестве источника света может быть точечный источник света, в котором лучи света, распространяются из одной точки во все стороны, конический источник света или источник рассеянного света. Для выбора источника света надо использовать один из трех методов фильтра:

AddAmbient(<RRR>, <GGG>, <BBB>, <Интенсивность>) добавляет источник рассеянного света с заданными цветовыми параметрами, здесь и далее RRR – десятичное значение красной составляющей цвета, GGG - десятичное значение зеленой составляющей цвета и BBB - десятичное значение синей составляющей цвета. Интенсивность задается в процентах от 0 до 100;

AddCone(<x1>, <y1>, <z1>, <x2>, <y2>, <RRR>, <GGG>, <BBB>, <Интенсивность>, <Угол>) добавляет источник направленного света с заданными цветовыми параметрами. Параметры x1, y1, z1 задают координаты источника света, x2, y2 - точки, куда падает свет.

AddPoint(<x>, <y>, <z>, <RRR>, <GGG>, <BBB>, <Интенсивность>) добавляет источник направленного света с заданными цветовыми параметрами. Координаты x, y, z - координаты источника света.

Другие методы этого фильтра:

ChangeColor(<номер>, <RRR>, <GGG>, <BBB>, 1/0) изменяет цвет источника света с заданным номером на указанный цвет. Последний параметр указывает, будет абсолютное (1) или относительное (0) изменение цвета.

ChangeStrength(<номер>, <Интенсивность>, 1/0) варьирует интенсивность света источника с заданным номером. Последний параметр указывает, как и ранее, будет абсолютное (1) или относительное (0) изменение интенсивности.

Clear() удаляет все источники света

Аргумент Enabled разрешает/запрещает применение фильтра. Имеет два значения: true (по умолчанию) - разрешает применить фильтр и false - не разрешает

MoveLight(<номер>, <x>, <y>, <z>, 1/0) метод фильтра light, который перемещает источник света с заданным номером в место с заданными координатами. Последний параметр, как и ранее, указывает, будет абсолютное (1) или относительное (0) перемещение.

Фильтр mask отображает текст так, как будто он выделен мышью, причем цвет выделения задается как аргумент фильтра. Общий вид filter: mask(Color) Значение аргумента: Color - цвет, окружающий текст.

img{filter: mask(color="red")}

RevealTrans осуществляет переход (продолжительный эффект как в PowerPoint) профессионального стиля, начиная от перехода «прямоугольник наружу» до перехода «растворения». Всего 24 возможных значений.

Фильтр shadow создает эффект тени, что придает объекту трехмерное изображение. Общий вид filter: shadow(color, direction) При настройке этого фильтра можно использовать следующие параметры:

• color - цвет тени.
• direction - направление тени в градусах с шагом равным 45. Всего восемь возможных значений от 0 до 315.

div{filter: shadow(color="green", direction=45)}

Фильтр wave производит «синусоидальное» искажение объекта вдоль вертикальной оси. Общий вид filter: wave(add, freq, lightStrength, phase, strength) При задании этого фильтра используются следующие параметры:

• add - добавляет слой, определяющей использование оригинала (0 или 1). По умолчанию 0. При 1 сверх результата накладывается слой исходного образца, для создания более тонкого эффекта
• freq - количество полных волн налагаемых на область применения фильтра. Чем количество больше, тем более выраженный волновой эффект, затрудняющий восприятие текста.
• lightStrength - величина подсветки. Может принимать значение от 0 до 100.
• phase – задает сдвиг волны по фазе относительно начальной фазы. По умолчанию - 0, изменяется от 0 до 100 и определяет сдвиг волны на плоскости.
• strength - определяет амплитуду применяемой синусоиды

div{ filter: wave(add=0, freq=2, lightstrength=10, phase=1, strength=3)}

Фильтр xray отображает объект в черно-белом варианте, как на рентгеновском снимке, создает эффект инверсии полутонового изображения. Противоположный эффект фильтру gray.

img{filter: xray()}

Элементы таблиц

Они появились только в CSS2. Их свойства определяют стиль, промежутки и структуру таблиц.

Border-collapseопределяет отображение табличных границ на экране. При настройке отображения можно использовать следующие параметры:

• collapse - смежные границы табличных ячеек превращаются в одну общую границу (по умолчанию).
• inherit - принимается значение родительского элемента.
• separate - смежные границы ячеек таблицы остаются отдельными.

table{border-collapse: separate}

Border-spacingопределяет интервалы между табличными границами. Если имеется только одно значение, то оно будет применено и к горизонтальному, и к вертикальному направлению. При настройке интервала между табличными границами можно использовать следующие параметры:

• Первая длина, соответствующая стандартам, расстояние по горизонтали между границами табличных ячеек.
• Вторая длина, соответствующая стандартам, расстояние по вертикали между границами табличных ячеек.
• inherit - принимается значение родительского элемента.

table{border-spacing: 4px}

Caption-side определяет положение подписи таблицы по отношению к самой таблице. При настройке положения подписи таблицы можно использовать следующие параметры:

• bottom - подпись снизу таблицы.
• left - подпись слева от таблицы.
• inherit - принимается значение родительского элемента.
• top - подпись сверху таблицы (по умолчанию).
• right - подпись справа от таблицы.

table{caption-side: top}

Column-spanопределяет количество соединяемых (span) столбцов. При настройке этого количества можно использовать следующие параметры:

• любое соответствующее стандартам число - количество соединяемых столбцов. По умолчанию это 1.
• inherit - принимается значение родительского элемента.

td{column-span: 3}

Empty-cellsопределяет, как выводить на экран границы пустых ячеек. При настройке вывода можно использовать следующие параметры:

• hide - границы пустых ячеек скрыты.
• inherit - принимается значение родительского элемента.
• show - границы пустых ячеек видны (по умолчанию).

table{empty-cells: show}

Row-spanопределяет количество соединяемых (span) строк. При настройке этого количества можно использовать следующие параметры:

• любое соответствующее стандартам число - количество соединяемых строк. По умолчанию это 1.
• inherit - принимается значение родительского элемента.

td {row-span: 3}

Speak-headerопределяет, как программа чтения экрана (screen reader) произносит табличные заголовки. При настройке этого произношения можно использовать следующие параметры:

• always - заголовок столбца произносится каждый раз при работе с ячейками этого столбца.
• inherit - принимается значение родительского элемента.
• once - заголовок каждого столбца произносится только один раз (по умолчанию).

table{speak-header: once}

Table-layoutопределяет общий вид таблицы. При настройке этого вида можно использовать следующие параметры:

• auto - общий вид таблицы определяется браузером (по умолчанию).
• fixed - устанавливается фиксированный общий вид таблицы.
• inherit - принимается значение родительского элемента.

table {table-layout: fixed}

Не нашли, что искали? Воспользуйтесь поиском: