ТОР 5 статей: Методические подходы к анализу финансового состояния предприятия Проблема периодизации русской литературы ХХ века. Краткая характеристика второй половины ХХ века Характеристика шлифовальных кругов и ее маркировка Служебные части речи. Предлог. Союз. Частицы КАТЕГОРИИ:
|
Свойства полосы прокруткиДанные свойства задают стиль полосы прокрутки. Их можно применять к таким тегам как: BODY, TEXTAREA, FRAME и другим, которые имеют полосу прокрутки (кроме SELECT). Scrollbar-3dlight-color устанавливает цвет верхней и левой части ползунка и кнопок со стрелками на полосе прокрутки. При настройке этого цвета можно использовать следующие параметры:
body{scrollbar-3dlight-color: green} Scrollbar-arrow-color устанавливает цвет стрелок на кнопке со стрелками. При настройке этого цвета можно использовать следующие параметры:
body{scrollbar-arrow-color: red} Scrollbar-base-color устанавливает цвет основных элементов ползунка: ползунка, кнопок со стрелками, дорожки для ползунка, если не определены параметры в scrollbar-face-color. При настройке этого цвета можно использовать следующие параметры:
body {scrollbar-base-color: green} Scrollbar-darkshadow-color устанавливает цвет тени для ползунка и кнопок со стрелками. При настройке этого цвета можно использовать следующие параметры:
body {scrollbar-darkshadow-color: red} Scrollbar-face-color устанавливает цвет ползунка и кнопок со стрелками. Также, если Вы не задали параметр scrollbar-track-color, у Вас изменится цвет дорожки. При настройке этого цвета можно использовать следующие параметры:
body{scrollbar-face-color: green} Scrollbar-highlight-color устанавливает цвет подсветки, создающий эффект объёмности. Это цвет, который окаймляет освещённую часть кнопки. Когда она не нажата, то цвет заливает левый верхний угол и стороны между ним, когда нажата - нижний правый угол. При настройке этого цвета можно использовать следующие параметры:
body{scrollbar-highlight-color: green;} Scrollbar-shadow-color схоже с scrollbar-darkshadow-color. При настройке этого цвета можно использовать следующие параметры:
body{scrollbar-shadow-color: green;} Scrollbar-track-color устанавливает цвет дорожки для ползунка. При настройке этого цвета можно использовать следующие параметры:
body{scrollbar-track-color: aqua} Фильтры и переходы Фильтры применяются к тексту и/или изображению для создания однократных постоянных изменений, а переходы для создания динамических эффектов. Важно отметить, что фильтры и переходы могут быть добавлены только к тегам HTML, которые рассматриваются как управляющие. Это любые теги, которые указывают браузеру, что надо создать прямоугольную область на Web-странице. Еще их называют тегами блочного уровня. Вот некоторые из управляющих тегов: BODY, DIV, MARQUEE, TD, IMG, SPAN, TR. Фильтры могут применяться и к строчным тегам, но при условии использования этим тегом свойства CSS width и/или height. Каждый фильтр имеет свойство enabled, которое имеет всего два значения true – применить фильтр и false– не применять фильтр. Каждый из визуальных эффектов создаваемых с помощью фильтров и переходов может быть запрограммирован. Тогда эти эффекты могут динамически задаваться пользователем и воспроизводиться в ответ на события, инициированные им, например клик или нажатие кнопки. Переход вводится, как значение свойства CSS filter точно так, как это делается для обычных фильтров. Удобство фильтров и переходов для пользователя заключается в их выполнении самим браузером на клиентском компьютере. Alpha – этот фильтр устанавливает уровень прозрачности и позволяет использовать эффект постепенного перехода от начального до конечного значения цвета. При настройке этого фильтра можно использовать следующие параметры:
div{filter: alpha(opacity=10, finishopacity=90, style=0, startX=10, startY=10, finishX=100, finishY=100)} BlendTrans переход, создающий эффект плавного понижения или повышения яркости объекта. Blur – этот фильтр смазывает изображение или текст в заданном (одном из восьми) направлении, создавая иллюзию движения. Значения аргументов для настройки этого фильтра:
img{filter: blur(Add=1, Direction=1, Strength=15)} Фильтр chroma делает прозрачным заданный цвет, не обращаясь при этом к графическим редакторам. Значение аргумента для настройки этого фильтра:
img{filter: chroma(color=#6c75d2)} Фильтр dropshadow создает эффект имитирующий отбрасываемую тень. Он создает теневое изображение оригинала и помещает его под оригинал со смещением задаваемым числом пикселей. Значения аргументов определяющих эффект:
div{filter: dropshadow(color=silver, offx=3, offy=3, positive=0)} Фильтр fliph переворачивает объект горизонтально (зеркально отражает объект по горизонтали). img{filter: fliph} Фильтр flipv зеркально отражает объект по вертикали (переворачивает объект вертикально). marquee{filter: flipv} Фильтр glow выполняет наложение цветовой ауры вокруг внешних границ объекта, создавая эффект регулируемого по цвету и силе свечения "возгорания/тления" границ объекта. Общий вид filter: glow(strength, color). Значения аргументов для настройки этого фильтра:
div{filter: glow(strength=5, color=red)} Фильтр gradient позволяет создать эффект градиентной закраски блочных элементов. Общий вид filter:progid:DXImageTransform.Microsoft.Gradient(gradientType, startColorStr, endColorStr) Значения аргументов определяющих эффект:
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) При настройке этого фильтра можно использовать следующие параметры:
div{filter: shadow(color="green", direction=45)} Фильтр wave производит «синусоидальное» искажение объекта вдоль вертикальной оси. Общий вид filter: wave(add, freq, lightStrength, phase, strength) При задании этого фильтра используются следующие параметры:
div{ filter: wave(add=0, freq=2, lightstrength=10, phase=1, strength=3)} Фильтр xray отображает объект в черно-белом варианте, как на рентгеновском снимке, создает эффект инверсии полутонового изображения. Противоположный эффект фильтру gray. img{filter: xray()} Элементы таблиц Они появились только в CSS2. Их свойства определяют стиль, промежутки и структуру таблиц. Border-collapse определяет отображение табличных границ на экране. При настройке отображения можно использовать следующие параметры:
table{border-collapse: separate} Border-spacing определяет интервалы между табличными границами. Если имеется только одно значение, то оно будет применено и к горизонтальному, и к вертикальному направлению. При настройке интервала между табличными границами можно использовать следующие параметры:
table{border-spacing: 4px} Caption-side определяет положение подписи таблицы по отношению к самой таблице. При настройке положения подписи таблицы можно использовать следующие параметры:
table{caption-side: top} Column-span определяет количество соединяемых (span) столбцов. При настройке этого количества можно использовать следующие параметры:
td{column-span: 3} Empty-cells определяет, как выводить на экран границы пустых ячеек. При настройке вывода можно использовать следующие параметры:
table{empty-cells: show} Row-span определяет количество соединяемых (span) строк. При настройке этого количества можно использовать следующие параметры:
td {row-span: 3} Speak-header определяет, как программа чтения экрана (screen reader) произносит табличные заголовки. При настройке этого произношения можно использовать следующие параметры:
table{speak-header: once} Table-layout определяет общий вид таблицы. При настройке этого вида можно использовать следующие параметры:
table {table-layout: fixed} Не нашли, что искали? Воспользуйтесь поиском:
|