css Фильтры css filter css
css Фильтры filter css
|
Реклама от Google
Поиск
Фильтры
Важно отметить, что фильтры могут быть добавлены только к элементам HTML, которые рассматриваются как управляющие. Это любые элементы создающие прямоугольное место на WEB-странице. Вот некоторые из управляющих элементов: BODY, DIV, MARQUEE, TD, IMG, SPAN, TR.
Фильтр alpha устанавливает уровень прозрачности
filter: alpha(opacity, finishopacity, style,startX, startY, finishX, finishY)
Значение:
css Фильтры filter css
- opacity - начальный уровень прозрачности.
- finishopacity - конечный уровень прозрачности;
- style - стиль градиента(0-равномерная прозрачность,1-линейный, 2-радиальный, 3-прямоугольный ).
- startX - начальные координаты градиента по горизонтали.
- startY - начальные координаты градиента по вертикали.
- finishX - конечные координаты градиента по горизонтали.
- finishY- конечные координаты градиента по вертикали.
css Фильтры filter css
div{ filter: alpha(opacity=10, finishopacity=90, style=0,startX=10, startY=10, finishX=100, finishY=100)}
Примеры: [1]
css Фильтры filter css
Фильтр blur смазывает изображение.
filter: blur(Add, direction, strength)
Значение:
- add - объект (0 - результат работы фильтра, 1 - фильтр будет наложен на исходный образец).
- direction - направление смазывания объекта в градусах (0 - вверх и далее по часовой стрелке с шагом 45 градусов).
- strength - степень размытия.
img{ filter: blur(Add=1, Direction=1, Strength=15)}
Примеры: [1]
filter chroma
Фильтр chroma делает заданный цвет прозрачным.
filter: chroma(color)
Значение:
- color - цвет, который будет прозрачным
img{ filter: chroma(color=#6c75d2)}
Примеры: [1]
Фильтр dropshadow создает эффект подвешенности.
filter: dropshadow(color, offx, offy, positive)
Значение:
css Фильтры filter css
- color - цвет тени.
- offx - смещение тени относительно текста по оси X.
- offy - смещение тени относительно текста по оси Y.
- positive - характер освещения (0 или 1).
div{filter: dropshadow(color=silver, offx=3, offy=3,positive=0) }
Примеры: [1]
css Фильтры filter css
Фильтр fliph переворачивает объект горизонтально.
css Фильтры filter css
img{ filter: fliph }
Примеры: [1]
Фильтр flipv переворачивает объект вертикально.
img{ filter: flipv }
Примеры: [1]
Фильтр glow добавляет свечение вдоль внешних границ объекта, создавая эффект "возгорания" границ объекта.
filter: glow(strength, color)
Значение:
css Фильтры filter css
- stregth - сила свечения в диапазоне 0-100.
- color - цвет свечения.
css Фильтры filter css
div{ filter: glow(strength=5, color=red)}
Примеры: [1]
css Фильтры filter css
Фильтр gradient позволяет заливать градиентом блочные элементы.
filter:progid:DXImageTransform.Microsoft.Gradient(gradientType, startColorStr, endColorStr)
Значение:
- gradientType – стиль градиента (0 - вертикальный; 1 - горизонтальный);
- startColorStr – цвет с которого начинается градиент;
- endColorStr – цвет которым заканчивается градиент.
div{
width:300px;
height:300px;
filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,
startColorStr=#ff0000, endColorStr=#0000ff);
}
Примеры: [1]
Фильтр gray удаляет цветовую гамму объекта и отображает его в серых тонах.
img{ filter: gray()}
Примеры: [1]
Фильтр invert меняет оттенок, насыщение и яркость объекта на противоположные.
img{ filter: invert() }
Примеры: [1]
css Фильтры filter css
Фильтр mask отображает текст так, как будто он выделен мышью.
filter:mask(Color)
Значение:
- Color - цвет, окружающий текст.
img{ filter:mask(color=red) }
Примеры: [1]
css Фильтры filter css
Фильтр shadow создает эффект тени.
filter: shadow(color, direction)
Значение:
- color - цвет тени.
- direction - направление тени в градусах.
div{ filter: shadow(color=green, direction=45) }
Примеры: [1]
Фильтр wave производит "синусоидальное" искажение объекта вдоль вертикальной оси.
filter: wave(add, freq, lightStrength, phase, strength)
Значение:
- add - блево значение, определяющее использование оригинала (0 или 1). По умолчанию 0
- freq - количество волн
- lightStrength - величина подсветки
- phase - начальная фаза. По умолчанию - 0, изменяется от 0 до 100
- strength - величина смещения
div{ filter: wave(add=0, freq=2, lightstrength=10, phase=1, strength=3)}Примеры: [1]
filter xray
Фильтр xray отображает объект в черно-белом варианте, как на рентгеновском снимке
img{ filter:xray()}
Примеры: [1]
|
alpha
