CSS Визуальное форматирование управление цветами и внешним видом

CSS Визуальное форматирование; управление цветами и внешним видом элементов

CSS-цвет, фон n color q n background-color q q n значение цвета transparent (по умолчанию) background-image q h 1{background-image: url(pictures. gif)}

CSS-цвет, фон n background-repeat q q q repeat - фоновое изображение повторяется по горизонтали и по вертикали (по умолчанию). repeat-x - фоновое изображение повторяется только по горизонтали. repeat-y - фоновое изображение повторяется только по вертикали. no-repeat - фоновое изображение не повторяется. body {background-image: url(pictures. gif); background-repeat: repeat-x}

CSS-цвет, фон n background-attachment q q q scroll - фоновое изображение прокручивается вместе с документом (по умолчанию) fixed - фоновое изображение фиксируется в окне браузера body{background-image: url(pictures. gif); background-attachment: fixed; }

CSS-цвет, фон n background-position q q q q число 1 - слева число 2 - сверху top - размещение фонового изображение по верхнему краю center - размещение фонового изображение по центру содержащего элемента. bottom - размещение фонового изображения по нижнему краю. left - размещение фонового изображение по левому краю. right - размещение фонового изображение по правому краю body {background-image: url(pictures. gif); backgroundrepeat: no-repeat; background-position: center; }

CSS-цвет, фон n Комбинирование свойств фона q body{background: black url(img/fon. jpg) center norepeat; }

CSS-списки n n list-style-type неупорядоченные q q n disc (диск) – по умолчанию circle (окружность) square (квадрат) none (нет маркера) упорядоченные q q q decimal (арабские цифры) lower-roman (маленькие римские цифры) upper-roman (большие римские цифры) lower-alpha (строчные латинские буквы) upper-alpha (заглавные латинские буквы) none (нет нумерации)

CSS-списки n list-style-image q n li {list-style-image: url(img/marker 1. gif)}. list-style-position q q Inside (маркер включен в текстовый блок) outside (маркер расположен снаружи)

CSS-визуальное форматирование n Вид курсора (cursor) q crosshair - принимает форму указателя "графическое выделение". q default - внешний вид, как у указателя, установленного в системе пользователя по умолчанию. q pointer - принимает форму указателя "выбор ссылки". q move - принимает форму указателя "перемещение". q e-resize, nw-resize, n-resize, se-resize, sw-resize, s- resize, w-resize - принимает формы указателей изменения размеров. q text - принимает форму указателя выделения текста. q wait - принимает форму указателя "система недоступна". q help - принимает форму указателя "выбор справки". q любой соответствующий стандарту URL - URL файла указателя мыши в форматах «cur, ani, svg, png» . n n n n {cursor: url(cursor. cur)} {cursor: url(cursor. cur), text} {cursor: url(cursor. ani)} {cursor: url(cursor. gif), text} {cursor: url(cursor. png), text} {cursor: url(cursor. svg), text} * Opera ? /* только IE */ /* IE и Firefox*/ /* только IE */ /* только Firefox */

CSS- полоса прокрутки n n n n n scrollbar-base-color (основной цвет полосы прокрутки) scrollbar-face-color (цвет бегунка и фон кнопки прокрутки) scrollbar-track-color (цвет полосы прокрутки) scrollbar-arrow-color (цвет изображения стрелки) scrollbar-face-color scrollbar-shadow-color (цвет тени бегунка и кнопок) scrollbar-darkshadow-color (цвет нижней границы тени бегунка и кнопок) scrollbar-3 dlight-color (цвет верхней и левой части бегунка и кнопок) scrollbar-hightlight-color (цвет подсветки)

CSS-визуальное форматирование

CSS-Фильтры (только IE) n filter alpha q q q q q filter: alpha(opacity, finishopacity, style, start. X, start. Y, finish. X, finish. Y) opacity - начальный уровень прозрачности. finishopacity - конечный уровень прозрачности; style - стиль градиента(0 -равномерная прозрачность, 1 линейный, 2 -радиальный, 3 -прямоугольный ). start. X - начальные координаты градиента по горизонтали. start. Y - начальные координаты градиента по вертикали. finish. X - конечные координаты градиента по горизонтали. finish. Y- конечные координаты градиента по вертикали. div{ filter: alpha(opacity=10, finishopacity=90, style=0, start. X=10, start. Y=10, finish. X=100, finish. Y=100)}

CSS-Фильтры n filter blur q Фильтр blur смазывает изображение. filter: blur(Add, direction, strength) q q add - объект (0 - результат работы фильтра, 1 - фильтр будет наложен на исходный образец). direction - направление смазывания объекта в градусах (0 - вверх и далее по часовой стрелке с шагом 45 градусов). strength - степень размытия. img{ filter: blur(Add=1, Direction=1, Strength=15)}

CSS-Фильтры n filter chroma – делает заданный цвет прозрачным. filter: chroma(color) n n Значение: color - цвет, который будет прозрачным img{ filter: chroma(color=#6 c 75 d 2)}

CSS-Фильтры n filter dropshadow – создает эффект «тени» . filter: dropshadow(color, offx, offy, positive) q q q color - цвет тени. offx - смещение тени относительно текста по оси X. offy - смещение тени относительно текста по оси Y. positive - характер освещения (0 или 1). div{filter: dropshadow(color=silver, offx=3, offy=3, positive=0) }

CSS-Фильтры n n filter flip. H – переворачивает объект горизонтально. img{ filter: fliph } filter flip. V – переворачивает объект вертикально. img{ filter: flipv }

CSS-Фильтры filter glow - добавляет свечение вдоль внешних границ объекта. n n filter: glow(strength, color) stregth - сила свечения в диапазоне 0 -100. color - цвет свечения. div{ filter: glow(strength=5, color=red)}

CSS-Фильтры n filter gray - удаляет цветовую гамму объекта и отображает его в серых тонах. q n img{ filter: gray()} filter invert – меняет оттенок, насыщение и яркость объекта на противоположные. q img{ filter: invert() }

CSS-Фильтры n filter mask – отображает текст так, как будто он выделен. filter: mask(Color) n n Color - цвет, окружающий текст. img{ filter: mask(color=red) }

CSS-Фильтры n filter shadow – создает эффект тени. filter: shadow(color, direction) n n color - цвет тени. direction - направление тени в градусах. q n div{ filter: shadow(color=green, direction=45) } filter xray – отображает объект в черно-белом варианте, как на рентгеновском снимке q img{ filter: xray()}

CSS-Фильтры n filter wave - производит "синусоидальное" искажение объекта вдоль вертикальной оси. filter: wave(add, freq, light. Strength, phase, strength) n n n add - булево значение, определяющее использование оригинала (0 или 1). По умолчанию 0 freq - количество волн light. Strength - величина подсветки phase - начальная фаза. По умолчанию - 0, изменяется от 0 до 100. strength - величина смещения div{ filter: wave(add=0, freq=2, lightstrength=10, phase=1, strength=3)}