Свойства полосы прокрутки
Данные свойства задают стиль полосы прокрутки. Их можно применять к таким тегам как: 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}
Не нашли, что искали? Воспользуйтесь поиском:
|