1. Bitcoin адрес для пожертвований: 1dapfB97R98wg8J3hknWpMDJ7P61CWjNn
    Скрыть объявление
  2. Участникам форума доступны: Skype, WhatsApp и Telegram конференции. Присоединяйтесь!
  3. Наши основные группы и каналы: VK, Twitter. Подписывайтесь!
  4. Мы открыли музыкальный клуб! Заходи и ставь свое музло!
  5. Скрыть объявление

Фильтры в CSS

Тема в разделе "Архив", создана пользователем WTBG, 29 июл 2008.

  1. WTBG

    WTBG Старейшина

    Репутация

    0 / 0


    Фильтры

    Важно отметить, что фильтры могут быть добавлены только к элементам HTML, которые рассматриваются как управляющие. Это любые элементы создающие прямоугольное место на WEB-странице. Вот некоторые из управляющих элементов: BODY, DIV, MARQUEE, TD, IMG, SPAN, TR.


    filter alpha

    Фильтр alpha устанавливает уровень прозрачности

    Код (Text):
    1. filter: alpha(opacity, finishopacity, style,startX, startY, finishX, finishY)
    Значение:
    • opacity - начальный уровень прозрачности.
    • finishopacity - конечный уровень прозрачности;
    • style - стиль градиента(0-равномерная прозрачность,1-линейный, 2-радиальный, 3-прямоугольный ).
    • startX - начальные координаты градиента по горизонтали.
    • startY - начальные координаты градиента по вертикали.
    • finishX - конечные координаты градиента по горизонтали.
    • finishY- конечные координаты градиента по вертикали.
    Код (Text):
    1. div{ filter: alpha(opacity=10, finishopacity=90, style=0,startX=10, startY=10, finishX=100, finishY=100)}

    filter blur

    Фильтр blur смазывает изображение.

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

    filter chroma

    Фильтр chroma делает заданный цвет прозрачным.

    Код (Text):
    1. filter: chroma(color)
    Значение:
    • color - цвет, который будет прозрачным
    Код (Text):
    1. img{ filter: chroma(color=#6c75d2)}

    filter dropshadow

    Фильтр dropshadow создает эффект подвешенности.

    Код (Text):
    1. filter: dropshadow(color, offx, offy, positive)
    Значение:
    • color - цвет тени.
    • offx - смещение тени относительно текста по оси X.
    • offy - смещение тени относительно текста по оси Y.
    • positive - характер освещения (0 или 1).
    Код (Text):
    1. div{filter: dropshadow(color=silver, offx=3, offy=3,positive=0) }

    filter flipH

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

    Код (Text):
    1. img{ filter: fliph }

    filter flipV

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

    Код (Text):
    1. img{ filter: flipv }

    filter glow

    Фильтр glow добавляет свечение вдоль внешних границ объекта, создавая эффект "возгорания" границ объекта.

    Код (Text):
    1. filter: glow(strength, color)
    Значение:
    • stregth - сила свечения в диапазоне 0-100.
    • color - цвет свечения.
    Код (Text):
    1. div{ filter: glow(strength=5, color=red)}

    filter gradient

    Фильтр gradient позволяет заливать градиентом блочные элементы.

    Код (Text):
    1. filter:progid:DXImageTransform.Microsoft.Gradient(gradientType, startColorStr, endColorStr)
    Значение:
    • gradientType – стиль градиента (0 - вертикальный; 1 - горизонтальный);
    • startColorStr – цвет с которого начинается градиент;
    • endColorStr – цвет которым заканчивается градиент.
    Код (Text):
    1.    div{
    2.       width:300px;
    3.       height:300px;
    4.       filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,
    5.        startColorStr=#ff0000, endColorStr=#0000ff);
    6.    }

    filter gray

    Фильтр gray удаляет цветовую гамму объекта и отображает его в серых тонах.

    Код (Text):
    1. img{ filter: gray()}

    filter invert

    Фильтр invert меняет оттенок, насыщение и яркость объекта на противоположные.

    Код (Text):
    1. img{ filter: invert() }

    filter mask

    Фильтр mask отображает текст так, как будто он выделен мышью.

    Код (Text):
    1. filter:mask(Color)
    Значение:
    • Color - цвет, окружающий текст.
    Код (Text):
    1. img{ filter:mask(color=red) }

    filter shadow

    Фильтр shadow создает эффект тени.

    Код (Text):
    1. filter: shadow(color, direction)
    Значение:
    • color - цвет тени.
    • direction - направление тени в градусах.
    Код (Text):
    1. div{ filter: shadow(color=green, direction=45) }

    filter wave

    Фильтр wave производит "синусоидальное" искажение объекта вдоль вертикальной оси.

    Код (Text):
    1. filter: wave(add, freq, lightStrength, phase, strength)
    Значение:
    • add - блево значение, определяющее использование оригинала (0 или 1). По умолчанию 0
    • freq - количество волн
    • lightStrength - величина подсветки
    • phase - начальная фаза. По умолчанию - 0, изменяется от 0 до 100
    • strength - величина смещения
    Код (Text):
    1. div{ filter: wave(add=0, freq=2, lightstrength=10, phase=1, strength=3)}

    filter xray

    Фильтр xray отображает объект в черно-белом варианте, как на рентгеновском снимке

    Код (Text):
    1. img{ filter:xray()}

    Пожалуйста, войдите или зарегистрируйтесь для просмотра скрытого текста.



  2. Злой заяц

    Злой заяц Новичок

    Репутация

    24 / 7


    Скрытый текст:
    Для просмотра скрытого текста Вы должны отключить AdBlock, либо другой блокировщик рекламы.

  3. nuvusuki

    nuvusuki Новичок

    Репутация

    0 / 0


    Какие браузеры поддерживают фильтры?