Всё о создании сайтов…

29 Окт, 2008

Динамический фильтр CheckerBoard

Автор: Bormaley В: CSS

Описание

Задает или возвращает направление, в которое происходит открытие полосок.
Свойство может принимать следующие значения:

  • up - открытие вверх;
  • down - вниз;
  • right - вправо;
  • left - влево.

    Задает или возвращает количество колонок, использующихся для отображения фильтра.

    Задает или возвращает количество строк, использующихся для отображения фильтра.

    Задает или возвращает продолжительность преобразования в секундах.

    Задает или возвращает признак разрешения применения фильтра.
    Свойство может принимать следующие значения:

  • true - разрешает применить фильтр (значение по умолчанию);
  • false - не разрешает.

    Задает процент выполнения преобразования.
    Может принимать значения от 0 (преобразование еще не началось) до 100 (преобразование закончено).

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

  • 0 - если преобразование было остановлено;
  • 1 - если оно было применено;
  • 2 - если преобразование выполняется.
  • В записи нет меток.

    Связанные записи

    29 Окт, 2008

    Динамический фильтр Blinds

    Автор: Bormaley В: CSS

    Описание

    Задает или возвращает количество полос, на которые разделяется область.

    Задает или возвращает направление, в которое происходит открытие полосок.
    Свойство может принимать следующие значения:

  • up - открытие вверх;
  • down - вниз;
  • right - вправо;
  • left - влево.

    Задает или возвращает продолжительность преобразования в секундах.

    Задает или возвращает признак разрешения применения фильтра.
    Свойство может принимать следующие значения:

  • true - разрешает применить фильтр (значение по умолчанию);
  • false - не разрешает.

    Задает процент выполнения преобразования.
    Может принимать значения от 0 (преобразование еще не началось) до 100 (преобразование закончено).
    Возвращает состояние выполнения преобразования.
    Свойство может принимать следующие значения:

  • 0 - если преобразование было остановлено;
  • 1 - если оно было применено;
  • 2 - если преобразование выполняется.
  • В записи нет меток.

    Связанные записи

    29 Окт, 2008

    Динамический фильтр Barn

    Автор: Bormaley В: CSS

    Описание
    Задает или возвращает продолжительность преобразования в секундах.

    Задает или возвращает признак разрешения применения фильтра.
    Свойство может принимать следующие значения:

  • true - разрешает применить фильтр (значение по умолчанию);
  • false - не разрешает.

    Задает или возвращает направление движения: от центра к границам или наоборот.
    Свойство может принимать два значения:

  • out - движение происходит из центра к границам (значение по умолчанию);
  • in - движение происходит от границ к центру.

    Задает или возвращает направление преобразования: по вертикали или по горизонтали.
    Свойство может принимать два значения:

  • horizontal - преобразование происходит по горизонтали;
  • vertical - по вертикали.

    Задает процент выполнения преобразования.
    Может принимать значения от 0 (преобразование еще не началось) до 100 (преобразование закончено).
    Возвращает состояние выполнения преобразования.
    Свойство может принимать следующие значения:

  • 0 - если преобразование было остановлено;
  • 1 - если оно было применено;
  • 2 - если преобразование выполняется.
  • В записи нет меток.

    Связанные записи

    29 Окт, 2008

    Статические фильтры (часть 2)

    Автор: Bormaley В: CSS

    Gradient
    Эффект градиентной закраски элемента страницы.
    При настройке этого фильтра можно использовать следующие параметры:

    StartColor,StartColorStr
    - Начальный цвет градиентной закраски
    EndColor,EndColorStr
    - Конечный цвет градиентной закраски
    GradientType=1 (по умолчанию)
    - Градиентная закраска распологается по горизонтали
    GradientType=0
    - Градиентная закраска распологается по вертикали
    Enabled
    - Разрешение применения фильтра. Имеет два значения:
    true (по умолчанию) - разрешает применить фильтр
    false - не разрешает

    Light
    Создет эффект освещенности элемента страницы.
    Методы, применяемые к этому фильтру:

    AddAmbient({Красный},{Зеленый},{Синий},{Интенсивность})

    - Добавляет источник рассеянного света с заданными цветовыми параметрами

    AddCone

    ({x1},{y1},{z1},{x2},{y2},{Красный},{Зеленый},{Синий},{Интенсивность},{Угол})

    - Добавляет источник направленного света с заданными цветовыми параметрами.

    Параметры x1,y1,z1 задают координаты источника света, x2,y2 - точки,

    куда падает свет.

    AddPoint({x},{y},{z},{Красный},{Зеленый},{Синий},{Интенсивность})

    - Добавляет источник направленного света с заданными цветовыми параметрами.

    Координаты x,y,z - координаты источника света.

    ChangeColor({№},{Красный},{Зеленый},{Синий},1|0)

    - Изменяет цвет источника света с заданным номером на указанный цвет.

    Последний параметр указывает, будет абсолютное (1)

    или относительное (0) изменение цвета.

    ChangeStrength({№},{Интенсивность},1|0)

    - Изменяет интенсивность света источника с заданным номером.

    Последний параметр указывает, будет абсолютное (1)

    или относительное (0) изменение интенсивности.

    Clear()

    - Удаляет все источники света

    MoveLight({№},{x},{y},{z},1|0)

    - Перемещает источник света с заданным номером в место с заданными координатами.

    Последний параметр указывает, будет абсолютное (1)

    или относительное (0) перемещение.

    Enabled

    - Разрешение применения фильтра. Имеет два значения:
    true (по умолчанию) - разрешает применить фильтр
    false - не разрешает

    MaskFilter
    Отображает прозрачный цвет элемента страницы заданным цветом.
    При настройке этого фильтра можно использовать следующие параметры:

    Color
    - Задает цвет, которым замениться прозрачный цвет элемента страницы.
    Enabled
    - Разрешение применения фильтра. Имеет два значения:
    true (по умолчанию) - разрешает применить фильтр
    false - не разрешает

    Matrix
    Изменяет элемент страницы путем изменения размеров, поворотов или инвертируя его при помощи матричных преобразований.
    При настройке этого фильтра можно использовать следующие параметры:

    Dx
    - Значения fDx матричных преобразований
    Dy
    - Значения fDy матричных преобразований
    FilterType
    - Задает тип пикселов нового содержимого.
    "bilinear" (по умолчанию)
    "nearest neighbor"
    M11,M12,M21,M22
    - Значения fM11,fM12,fM21,fM22 матричных преобразований
    SizingMethod
    - Определяет способ размещения нового изображения в пределах элемента страницы, к которому применяется фильтр. Это свойство может иметь два значения:
    "clip to original" (по умолчанию) - обрезание изображения
    "auto expand" - уменьшение или увеличение изображения
    Enabled
    - Разрешение применения фильтра. Имеет два значения:
    true (по умолчанию) - разрешает применить фильтр
    false - не разрешает

    MotiobBlur
    Создает эффект быстрого движения (размытости).
    При настройке этого фильтра можно использовать следующие параметры:

    Add
    - Имеет 2 значения:
    true - исходный элемент страницы перекрывает результат работы фильтра
    false (по умолчанию) - результат работы фильтра перекрывает исходный элемент страницы
    Direction
    - Задает направление работы фильтра в градусах, которые должны быть кратны 45.
    Strength
    - Дистанция, задаваемая в пикселях, на которую выполняется работа фильтра
    Enabled
    - Разрешение применения фильтра. Имеет два значения:
    true (по умолчанию) - разрешает применить фильтр
    false - не разрешает

    Pixelate
    Отображает элемент страницы отдельными пикселами.
    При настройке этого фильтра можно использовать следующие параметры:

    MaxSquare
    - Этот параметр задает максимальный размер пикселов
    Enabled
    - Разрешение применения фильтра. Имеет два значения:
    true (по умолчанию) - разрешает применить фильтр
    false - не разрешает

    Shadow
    Создает эффект отбрасывания тени у элемента страницы.
    При настройке этого фильтра можно использовать следующие параметры:

    Color
    - Цвет тени
    Direction
    - Задает направление тени в градусах, которые должны быть кратны 45
    Enabled
    - Разрешение применения фильтра. Имеет два значения:
    true (по умолчанию) - разрешает применить фильтр
    false - не разрешает

    Wave
    Создает волнистое искажение элемента страницы.
    При настройке этого фильтра можно использовать следующие параметры:

    Add
    - Доступны два параметра:
    true - элемент страницы, к которому был применени фильтр закроет результат фильтрации
    false (по умолчанию) - результат фильтрации перекроет исходный элемент страницы
    Freq
    - Задает количество волн
    LightStrength
    - Окраска волн. Может принимать значение от 0 до 100
    Phase
    - Фаза волн. Может принимать значение от 0 до 100
    Strength
    - Дистанция, указанная в пикселах, на которую органицуется фильтрация
    Enabled
    - Разрешение применения фильтра. Имеет два значения:
    true (по умолчанию) - разрешает применить фильтр
    false - не разрешает
    Метки:, ,

    Связанные записи

    29 Окт, 2008

    Статические фильтры

    Автор: Bormaley В: CSS

    Alpha
    Задает уровень прозрачности элемента страницы.
    При настройке этого фильтра можно использовать следующие параметры:

    Opacity
    - Задает уровень прозрачности для элемента. Значение прозрачности может быть в пределах от 0 (полная прозрачность) до 100 (полностью непрозрачен).
    Style
    - Задает вид градиентной прозрачности: 0 (по умолчанию)-нет градиента, 1-линейный градиент, 2-круговой градиент, 3-прямоугольный градиент
    StartX
    - Горизонтальная координата, с которой начинается область градиентной прозрачности. Задается в пикселях.
    StartY
    - Вертикальная координата, с которой начинается область градиентной прозрачности. Задается в пикселях.
    FinishX
    - Горизонтальная координата, в которой заканчивается область градиентной прозрачности. Задается в пикселях.
    FinishY
    - Вертикальная координата, в которой заканчивается область градиентной прозрачности. Задается в пикселях.
    Enabled
    - Разрешение применения фильтра. Имеет два значения:
    true (по умолчанию) - разрешает применить фильтр
    false - не разрешает

    AlphaImageLoaded
    Отображает графическое изображение внутри элемента страницы между его фоном и содержимым.
    При настройке этого фильтра можно использовать следующие параметры:

    src
    - -адрес файла с изображением.
    SizingMethod
    - Способ размещения изображения в пределах элемента страницы.
    SezingMethod="crop" - обрезание изображения
    SezingMethod="image"(по умолч.) - уменьшение или увеличение самого элемента страницы
    SezingMethod="scale" - уменьшение или увеличение изображения
    Enabled
    - Разрешение применения фильтра. Имеет два значения:
    true (по умолчанию) - разрешает применить фильтр
    false - не разрешает

    BasicImage
    Делает элемент страницы черно-белым, как бы просвеченным рентгеновскими лучами, вращает его.
    Отдельно можно задавать угол поворота, стерень "просвеченности".
    При настройке этого фильтра можно использовать следующие параметры:

    GrayScale=1
    - Элемент страницы отображается черно-белым
    GrayScale=0 (по умолчанию)
    - Цветным
    Invert=1
    - Элемент страницы отображается с инвертированными цветами
    Invert=0 (по умолчанию)
    - Элемент страницы отображается как обычно
    MaskColor
    - Цвет, на который будет заменен прозрачный цвет элемент страницы
    Masc=1
    - Прозрачный цвет элемента страницы будет заменен значением свойства MaskColor
    Masc=0 (по умолчанию)
    - Не будет
    Mirror=1
    - Элемент страницы будет отображен зеркально
    Mirror=0 (по умолчанию)
    - Элемент страницы будет отображен как обычно
    Opacity
    - Уровень прозрачности элемента страницы. Варьируется в пределах от 0.0 до 1.0
    Rotation
    - Задает поворот элемента страницы. Доступны всего 4-е занчения: 0 (по умолчанию) - нет поворота, 1 - на 90 градусов, 2 - на 180 градусов и 3 - на 270 градусов
    XRay=1
    - Элемент страницы будет "просвечен рентгеновскими лучами"
    XRay=0 (по умолчанию)
    - Как обычно
    Enabled
    - Разрешение применения фильтра. Имеет два значения:
    true (по умолчанию) - разрешает применить фильтр
    false - не разрешает

    Blur
    Делает элемент страницы размытым.
    При настройке этого фильтра можно использовать следующие параметры:

    MakeShadow=true
    - Элемент страницы будет отображаться как тень
    MakeShadow=false (по умолчанию)
    - Элемент страницы будет отображаться как обычно
    PixelRadius
    - Задает размер области размытия. Может принимать значения от 0.0 до 100.0
    ShadowOpacity
    - Указывает прозрачность тени. Может принимать заначения от 0.0 (что соответствует полной прозрачности) до 1.0 (полная непрозрачность)
    Enabled
    - Разрешение применения фильтра. Имеет два значения:
    true (по умолчанию) - разрешает применить фильтр
    false - не разрешает

    Chroma
    Делает прозрачным отдельный цвет элемента.
    При настройке этого фильтра можно использовать следующие параметры:

    Color
    - Задает цвет, который будет прозрачным
    Enabled
    - Разрешение применения фильтра. Имеет два значения:
    true (по умолчанию) - разрешает применить фильтр
    false - не разрешает

    Compositor
    Объеденяет два цвета элемента страницы и выводит что получилось.
    При настройке этого фильтра можно использовать следующие параметры:

    Function
    - Функция преобразования
    Enabled
    - Разрешение применения фильтра. Имеет два значения:
    true (по умолчанию) - разрешает применить фильтр
    false - не разрешает

    DropShadow
    Отбрасывает тень у элемента страницы, которая отображается отдельно от самого элемента.
    При настройке этого фильтра можно использовать следующие параметры:

    Color
    - Цвет
    OffX
    - Горизонтальное смещение тени
    OffY
    - Вертикальное смещение тени
    Positive=true (по умолчанию)
    - Тень создается из прозрачных пикселов элемента страницы
    Positive=false
    - Тень создается из непрозрачных пикселов элемента страницы ("негативная" тень)
    Enabled
    - Разрешение применения фильтра. Имеет два значения:
    true (по умолчанию) - разрешает применить фильтр
    false - не разрешает

    Emboss
    Делает элемент страницы выпуклым.
    При настройке этого фильтра можно использовать следующие параметры:

    Bias
    - Процентное значение, добавляемое к цвету элемента
    Enabled
    - Разрешение применения фильтра. Имеет два значения:
    true (по умолчанию) - разрешает применить фильтр
    false - не разрешает

    Engrave
    Делает элемент страницы вдавленным.
    При настройке этого фильтра можно использовать следующие параметры:

    Bias
    - Процентное значение, добавляемое к цвету элемента
    Enabled
    - Разрешение применения фильтра. Имеет два значения:
    true (по умолчанию) - разрешает применить фильтр
    false - не разрешает

    Glow
    Создает эффект "тления" элемента страницы.
    При настройке этого фильтра можно использовать следующие параметры:

    Color
    - Цвет
    Strength
    - Расстояние в пикселях, на которое выполняется "тление"
    Enabled
    - Разрешение применения фильтра. Имеет два значения:
    true (по умолчанию) - разрешает применить фильтр
    false - не разрешает
    Метки:, , , ,

    Связанные записи

    12 Окт, 2008

    Пару вводных слов

    Автор: Bormaley В: CSS

    Надо отметить, что фильтры отображаются только в браузерах Internet Explorer не ниже 4-ой версии.
    Синтаксис:
    "filter:имя_фильтра(параметр1=значение, параметр2=значение,...)"
    Некоторые фильтры могут быть без параметров.
    Фильтры деляться на статические и динамические. Статические фильтры меняют вид объекта, а сам он остается неподвижным. Динамические фильтры позволяют менять объект с задаваемой скоростью переключения кадров.
    Далее будут мною описаны 18 статических и 19 динамических фильтра.
    Фильтры применяют через параметр STYLE:
    Возьмём картинку (img.gif) и применим к ней фильтр прозрачности:
    <IMG SRC=img.gif STYLE="filter:alpha(opacity=50)"> - имеем ту же картинку, но полупрозрачную.
    Фильтры поддерживаются языками сценариев. Доступ к фильтрам организуется через объектное свойство filters и атрибут ID графического элемента.
    :
    <script language="">
    function Blur(inc){
    Pic.filters.blur.strength+=inc;}
    </script>
    ...
    <IMG ID=Pic SRC=img.gif
    STYLE="filter:blur(strength=10)"
    OnMouseOver=":Blur(20)"
    OnMouseOut=":Blur(-20)">
    Здесь функция Blur() обращается к фильтру blur объекта Pic и изменяет его параметр strength при наведении курсора мышки.
    VBScript:
    <script language="VBScript"> Pic.style.filter = "flipv" </script> ... <IMG ID=Pic SRC=img.gif>
    Здесь используется фильтр flip, который переворачивает изображение вокруг вертикальной оси.

    Статические фильтры

    Alpha
    Задает уровень прозрачности элемента страницы.
    При настройке этого фильтра можно использовать следующие параметры:

    Opacity
    - Задает уровень прозрачности для элемента. Значение прозрачности может быть в пределах от 0 (полная прозрачность) до 100 (полностью непрозрачен).
    Style
    - Задает вид градиентной прозрачности: 0 (по умолчанию)-нет градиента, 1-линейный градиент, 2-круговой градиент, 3-прямоугольный градиент
    StartX
    - Горизонтальная координата, с которой начинается область градиентной прозрачности. Задается в пикселях.
    StartY
    - Вертикальная координата, с которой начинается область градиентной прозрачности. Задается в пикселях.
    FinishX
    - Горизонтальная координата, в которой заканчивается область градиентной прозрачности. Задается в пикселях.
    FinishY
    - Вертикальная координата, в которой заканчивается область градиентной прозрачности. Задается в пикселях.
    Enabled
    - Разрешение применения фильтра. Имеет два значения:
    true (по умолчанию) - разрешает применить фильтр
    false - не разрешает
    Метки:, , , , , , ,

    Связанные записи

    12 Окт, 2008

    Правила

    Автор: Bormaley В: CSS

    Правила используются в таблицах стилей для особых нужд.
    charset - Задает текстовую кодировку для внешней таблицы стилей.
    @charset {Кодировка};
    Пример:
    @charset "windows-1251";
    Может использоваться только во внешних таблицах стилей; должна быть первой строкой в файле.
    Поддерживается IE начиная с 4.0

    font-face - задает файл загружаемого шрифта для использования на Web-странице.
    @font-face {Определение загружаемого шрифта};
    Определение загружаемого шрифта имеет следующий формат:
    font-family: {Имя шрифта}
    src: ({Интернет-адрес файла шрифта}) }
    Пример:
    @font-face {
    font-family: comic;
    src: (http://www.youodmain.ru/comic_font_file.eot); }
    Поддерживается IE начиная с 4.0

    import - импортирует внешную таблицу стилей.
    @import ("{Интернет-адрес файла таблицы стилей}");
    Пример:
    @import ("http://www.youdomain.ru/style_file.css");
    Поддерживается IE начиная с 4.0

    page - используется при задании размеров, ориентаций и полей печатной страницы в таблице стилей.
    @page {Селектор страницы} {Правила}
    Селектор страницы может принимать одно из трех значений:
    first: - первая печатная страница;
    left: - четная страница;
    right: - нечетная страница.
    Пример:
    @page :first {margin-top: 2cm; margin-bottom: 2cm;}
    Здесь мы задали для первой печатной страницы поля по два сантиметра сверху и снизу.
    Поддерживается IE начиная с 5.5

    important - используется для задания неперекрываемых установок стиля.
    {Установки слиля}!important
    Пример:
    <STYLE>
    P { color: red !important}
    </STYLE>
    <P style="color: green">Этот текст останется красным.</P>
    Здесь установки, сделанные для текстового абзаца <P>, не будут перекрыты в дальнейшем.
    Поддерживается IE начиная с 4.0

    Единицы измерения CSS


    В этой таблице перечислены все единицы измерения, поддерживаемые CSS.

    Единица измерения
    Обозначение

    Высота буквы M текущего шрифта
    em

    Высота буквы x текущего шрифта
    ex

    Пикселы
    px

    Пункты
    pt

    Пики
    pc

    Дюймы
    in

    Миллиметры
    mm

    Сантиметры
    cm

    Метки:, , , , , , , , , , ,

    Связанные записи

    RSS

    Advertising

    Рубрики





    О блоге

    Добро пожаловать на наш сайт! На сайте представлена информация о том, как простому человеку начать делать сайты. Материалы будут разного рода. Как новички Web-программирования, так и знающие люди, смогут найти для себя полезную информацию. В качестве материалов, будет взят личный опыт и опыт других людей.