Пример кода HTML и включенный в него код CSS приведены ниже. Используемое в нем изображение — fd.jpg. Скопируйте код и назовите изображение fd.jpg, чтобы увидеть полный эффект.
<!DOCTYPE HTML PUBLIC "- //W3C. //DTD HTML 4.01 Переходный //EN">
<html>
<голова>
<title>Эффект CSS-фильтра.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="это моя страница">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
.альфа
{
filter:alpha(opacity=0,finishopacity=100,style=1,startx=0,starty=85,finishx=150,finishy=85);
}
.размытие
{
семейство шрифтов: lucida, рукописный курсив;
размер шрифта: 72 пикселей;
стиль шрифта: жирный;
цвет: #336600;
width:350px;/*Этот атрибут важен, иначе эффект не будет виден*/
фильтр: размытие (добавить = true, направление = 90, сила = 25);
}
.цвета
{
семейство шрифтов: lucida, рукописный курсив;
размер шрифта: 72 пикселей;
стиль шрифта: жирный;
цвет:красный;
ширина: 350 пикселей;
фильтр: цветность (цвет = красный);
}
.dropshadows
{
семейство шрифтов: lucida, рукописный курсив;
размер шрифта: 72 пикселей;
стиль шрифта: жирный;
цвет: #336600;
ширина: 350 пикселей;
фильтр: dropshadow (цвет = красный, offx = 15, offy = 10, положительный = 1);
}
.переворачивает
{
семейство шрифтов: lucida, рукописный курсив;
размер шрифта: 72 пикселей;
стиль шрифта: жирный;
цвет: #336600;
ширина: 350 пикселей;
фильтр: флип;
}
.flipvs
{
семейство шрифтов: lucida, рукописный курсив;
размер шрифта: 72 пикселей;
стиль шрифта: жирный;
цвет: #336600;
ширина: 350 пикселей;
фильтр: флипв;
}
.светится
{
семейство шрифтов: lucida, рукописный курсив;
размер шрифта: 72 пикселей;
стиль шрифта: жирный;
цвет: #336600;
ширина: 350 пикселей;
фильтр: свечение (цвет = синий, сила = 15);
}
.серые
{
семейство шрифтов: lucida, рукописный курсив;
размер шрифта: 72 пикселей;
стиль шрифта: жирный;
цвет: #336600;
ширина: 350 пикселей;
фильтр:серый;
}
.инвертирует
{
семейство шрифтов: lucida, рукописный курсив;
размер шрифта: 72 пикселей;
стиль шрифта: жирный;
цвет: #336600;
ширина: 350 пикселей;
фильтр: инвертировать;
}
.маски
{
семейство шрифтов: lucida, рукописный курсив;
размер шрифта: 72 пикселей;
стиль шрифта: жирный;
цвет: #336600;
ширина: 350 пикселей;
фильтр: маска (цвет = зеленый);
}
.тени
{
семейство шрифтов: lucida, рукописный курсив;
размер шрифта: 72 пикселей;
стиль шрифта: жирный;
цвет: #336600;
ширина: 350 пикселей;
фильтр: тень (цвет = красный, направление = 225);
}
.волны
{
семейство шрифтов: lucida, рукописный курсив;
размер шрифта: 72 пикселей;
стиль шрифта: жирный;
цвет: #336600;
ширина: 350 пикселей;
фильтр: волна (добавить = true, частота = 3, сила света = 100, фаза = 45, сила = 20);
}
.рентгеновские лучи
{
семейство шрифтов: lucida, рукописный курсив;
размер шрифта: 72 пикселей;
стиль шрифта: жирный;
цвет: #336600;
ширина: 350 пикселей;
фильтр: рентген;
}
</стиль>
</голова>
<тело>
<ширина таблицы=1000 граница=1>
<tr><td width=100>Свойства фильтра</td><td width=100>Описание</td><td width=400>Параметры и значения</td><td width=400>Примеры эффектов</td ></tr>
<tr><td><span class=alpha>Альфа</span></td><td>Установить эффект прозрачности</td><td>непрозрачность: уровень прозрачности, от 0 до 100, 0 — полная прозрачность<br>
стиль: определяет характеристики формы прозрачной области: 0 — равномерное распределение; 1 — линейное; 2 — радиальное; 3 — прямоугольное.<br>finishopacity: устанавливает прозрачность в конце градиента для достижения эффекта градиента, значение равно от 0 до 100<br>
startX, startY: начальные координаты эффекта прозрачности градиента<br>finishX, FinishY: конечные координаты эффекта прозрачности градиента</td><td><p><img src="fd.jpg" class="alphas"/ >/p >/td></tr>
<tr><td>Размытие</td><td>Создать эффект размытия</td><td>добавить: укажите, должно ли изображение быть изменено на эффект размытия: true или false<br>
направление: установите направление размытия, 0 градусов означает вертикально вверх, каждые 45 градусов — это единица, значение по умолчанию — 270 градусов влево<br>сила: показывает, на сколько пикселей ширины влияет размытие, значение по умолчанию — 5< /тд>
<td><div class="blrs">УДАЧИ!</div></td></tr>
<tr><td>Цветность</td><td>Установить прозрачный цвет для указанного цвета</td><td>цвет: указать прозрачный цвет</td><td>chroma<div class="chromas">Пример < /div></td></tr>
<tr><td>DropShadow</td><td>Создать смещенный контур изображения, то есть отбросить тень</td><td>color: цвет проекции<br>offx, offy: тень в Смещение направления x, y<br>
положительный: true создает тень для любого непрозрачного пикселя, false создает тень для прозрачных пикселей</td><td><div class="dropshadows">пример dropshadow</div></td></tr>
<tr><td>FlipH</td><td>Горизонтальное переворот</td><td>Нет</td><td><div class="fliphs">Горизонтальное переворот</div></td >< /тр>
<tr><td>FlipV</td><td>Вертикальное переворот</td><td>Нет</td><td><div class="flipvs">Вертикальное переворот</div></td >< /тр>
<tr><td>Свечение</td><td>Добавить световые эффекты к внешней границе объекта</td><td>Цвет: укажите цвет света<br>
сила: сила света</td><td><div class="glows">Пример свечения</div></td></tr>
<tr><td>Серый</td><td>Уменьшите цвет изображения и превратите его в оттенки серого</td><td>Нет</td><td><img src="fd.jpg" класс ="серые"/></td></tr>
<tr><td>Инвертировать</td><td>Полностью инвертирует значения цвета, насыщенности и яркости для создания негативного эффекта</td><td>Нет</td><td><img src="fd . jpg" class="inverts"/></td></tr>
<tr><td>Свет</td><td>Проецирование света на объект</td><td>нет</td><td>нет</td></tr>
<tr><td>Маска</td><td>Создать прозрачную маску для объекта</td><td>цвет: укажите цвет маски</td><td><div class="masks" >Пример МАСКИ</div></td></tr>
<tr><td>Тень</td><td>Создание сплошного контура объекта, то есть эффекта тени</td><td>цвет: цвет проекции<br>направление: направление проекции</td> <td>< div class="shadows">Пример ТЕНИ</div></td></tr>
<tr><td>Волна</td><td>Используйте синусоидальную рябь, чтобы исказить изображение по осям X и Y.</td><td>добавьте: true означает нарушение изображения волнами, false — нет. нарушая его<br >
freq: частота генерации ряби (сколько генерируется ряби)<br>lightstrength: усиление эффекта генерируемой ряби (значение от 0 до 100)<br>
фаза: установите смещение в начале синусоидальной волны, обычно от 0 до 100.<br>сила: установите амплитуду синусоидальной волны</td><td><div class="waves">Пример WAVE</ div> </ td></tr>
<tr><td>Рентген</td><td>Отображать только контур объекта</td><td>Нет</td><td><img src="fd.jpg" class="xrays" /> </td></tr>
</таблица>
</тело>
</html>