CSS3-фильтры воспроизводят в браузере визуальные эффекты, похожие на фильтры Photoshop. Фильтры можно добавлять не только к изображениям, но и к любым непустым элементам.

Набор фильтров не ограничивается предустановленным в браузере. Вы также можете использовать фильтры SVG, загрузив их по ссылке вместе с элементом svg.

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

Браузеры обрабатывают страницу попиксельно применяя заданные эффекты и отрисовывают результат поверх оригинала. Таким образом, применяя несколько фильтров можно достигать различных эффектов, они как бы накладываются друг на друга. Чем больше фильтров, тем больше времени требуется браузеру, чтобы отрисовать страницу.

Можно применять несколько фильтров одновременно. Классический способ применения таких эффектов — при наведении на элемент:hover .

Поддержка браузерами

IE: не поддерживает
Edge: 13.0 кроме url()
Firefox: 35.0
Chrome: 18.0 -webkit-
Safari: 9.1, 6.0 -webkit-
Opera: 40.0, 15.0 -webkit-
iOS Safari: 9.3, 6.1 -webkit-
Android Browser: 53.0, 4.4 -webkit-
Chrome for Android: 55.0, 47.0 -webkit-

filter
blur()	Значение задается в единицах длины, например px , em . Применяет размытие по Гауссу к исходному изображению. Чем больше значение радиуса, тем больше размытие. Если значение радиуса не задано, по умолчанию берется 0 .
brightness()	Значение задается в % или в десятичных дробях. Изменяет яркость изображения. Чем больше значение, тем ярче изображение. Значение по умолчанию 1 .
contrast()	Значение задается в % или в десятичных дробях. Регулирует контрастность изображения, т.е. разницу между самыми темными и самыми светлыми участками изображения/фона. Значение по умолчанию 100% . Нулевое значение скроет исходное изображение под темно-серым фоном. Значения, увеличивающиеся от 0 до 100% или от 0 до 1 , будут постепенно открывать исходное изображение до оригинального отображения, а значения свыше будут увеличивать контраст между светлыми и темными участками.
drop-shadow()	Фильтр действует подобно свойствам box-shadow и text-shadow . Использует следующие значения: смещение по оси Х смещение по оси Y размытость растяжение цвет тени. Отличительная особенность фильтра заключается в том, что тень добавляется к элементам и его содержимому с учетом их прозрачности, т.е. если элемент содержит текст внутри, то фильтр добавит тень одновременно для текста и видимых границ блока. В отличие от других фильтров, для этого фильтра обязательно задание параметров (минимальное — величина смещения).
grayscale()	Извлекает все цвета из картинки, делая на выходе черно-белое изображение. Значение задается в % или десятичных дробях. Чем больше значение, тем сильнее эффект.
hue-rotate()	Меняет цвета изображения в зависимости от заданного угла поворота в цветовом круге. Значение задается в градусах от 0deg до 360deg . 0deg — значение по умолчанию, означает отсутствие эффекта.
invert()	Фильтр делает негатив изображения. Значение задается в % . 0% не применяет фильтр, 100% полностью преобразует цвета.
opacity()	Фильтр работает аналогично со свойством opacity , добавляя прозрачность элементу. Отличительная особенность — браузеры обеспечивают аппаратное ускорение для фильтра, что позволяет повысить производительность. Дополнительный бонус — фильтр можно одновременно сочетать с другими фильтрами, создавая при этом интересные эффекты. Значение задается только в % , 0% делает элемент полностью прозрачным, а 100% не оказывает никакого эффекта.
saturate()	Управляет насыщенностью цветов, работая по принципу контрастного фильтра. Значение 0% убирает цветность, а 100% не оказывает никакого эффекта. Значения от 0% до 100% уменьшают насыщенность цвета, выше 100% — увеличивают насыщенность цвета. Значение может задаваться как в % , так и целым числом, 1 эквивалентно 100% .
sepia()	Эффект, имитирующий старину и «ретро». Значение 0% не изменяет внешний вид элемента, а 100% полностью воспроизводит эффект сепии.
url()	Функция принимает расположение внешнего XML-файла с svg-фильтром, или якорь к фильтру, находящемся в текущем документе.
none	Значение по умолчанию. Означает отсутствие эффекта.
initial	Устанавливает это свойство в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Но еще HTML поддерживает работу с Фильтрами . Применяя различные Фильтры к тексту, можно добиться интересных эффектов. Но будьте осторожны, не все браузеры одинаково отображают эффекты которые должны давать фильтры , некоторые браузеры откровенно игнорируют фильтры. Поэтому тестируйте свои web-странички в различных браузерах. Все Фильтры корректно работают Internet Exhlorer. Итак давайте рассмотрим работу фильтров.

Например мы хотим выделить фразу: "Доброго времени суток!!! " Давайте попробуем поизвращать эту фразу:-) , применяя к ней различные фильтры.

Фильтр Mask.

Выделяет текст, точнее фон на котором написан текст, как будто бы Вы выделили текст мышью.

Синтаксис фильтра: STYLE="filter:Mask(Color="Color")

Color - цвет выделения в шестнадцатиричном виде (напр. #000FFF) или название цвета на английском, например, Red, Blue, Green. Такое определение цвета применяется во всех фильтрах, поэтому дальше это повторяться не будет.

Листинг 19.1.

Фильтр DropShadow.

Добавляет тень к тексту.

Синтаксис фильтра:
STYLE="filter:DropShadow(Color="Color", OffX="Offx", OffY="Offy", Positive="Positive")"

Color - Цвет тени
OffX - Смещение тени по X
OffY - Смещение тени по Y
Positive - Тень слева или справа (0 или 1 соответственно)

Листинг 19.3.

Вот как это смотрится web-странице:

Фильтр FlipV.

Переворачивает текст вертикально.

Синтаксис фильтра: STYLE="filter:FlipV"

Листинг 19.5.

Вот как это смотрится web-странице:

Фильтр Wave.

Делает текст волнистым.

Синтаксис фильтра: STYLE="filter: Wave(Freq="Freq", Add="Add", LightStrength="LightStrength", Phase="Phase", Strength="Strength")"

Freq - колличество волн
Add - показать/скрыть окантовку (1 или 0 соответственно)
LightStrength - сила волн
Phase - угол волн
Strength - интенсивность волн

Листинг 19.7.

Доброго времени суток!!!

Вот как это смотрится web-странице:

Фильтр Blur.

Размывает текст в определенную сторону.

Синтаксис фильтра:
STYLE="filter:Blur(Add="Add", Direction="Direction", Strength="Strength")"

Add - умеренное или сильное размытие (соответственно 1 или 0)
Direction - в какую сторону произойдет размытие (oт 0 до 315)
Strength - смещение размытия

Материал предназначен в основном для начинающих веб-программистов.

Введение.

Часто ко мне обращаются клиенты, у которых установлены самописные CMS или модули, написанные начинающими веб-программистами, которые не понимают, что нужно для защиты данных и зачастую копируют функции фильтрации, не задумываясь о том как они работают и что именно нужно с ними делать.

Здесь я постараюсь описать как можно подробнее частые ошибки при фильтрации данных в PHP скрипте и дать простые советы как правильно выполнить фильтрацию данных.

В сети много статей по поводу фильтрации данных, но они как правильно не полные и без подробные примеров.

Разбор полетов.

Фильтрация. Ошибка №1

Для числовых переменных используется такая проверка:
$number = $_GET["input_number"]; if (intval($number)) { ... выполняем SQL запрос... }
Почему она приведет к SQL инъекции? Дело в том, что пользователь может указать в переменной input_number значение:
1"+UNION+SELECT
В таком случаи проверка будет успешно пройдена, т.к. функция intval получает целочисленное значение переменной, т.е. 1, но в самой переменной $number ничего не изменилось, поэтому весь вредоносный код будет передан в SQL запрос.
Правильная фильтрация:
$number = intval($_GET["input_number"]); if ($number) { ... выполняем SQL запрос... }
Конечно, условие может меняться, например если вам нужно получить только определенный диапазон:
if ($number >= 32 AND $number <= 65)

Если вы используете чекбоксы или мультиселекты с числовыми значениями, выполните такую проверку:
$checkbox_arr = array_map("intval", $_POST["checkbox"]);
array_map
Так же встречаю фильтрацию в виде:
$number = htmlspecialchars(intval($_GET["input_number"]));
htmlspecialchars
Или:
$number = mysql_escape_string(intval($_GET["input_number"]));
mysql_escape_string

Ничего кроме улыбки это не может вызвать:)

Фильтрация. Ошибка №2.

Для стринг-переменных используется такая фильтрация:
$input_text = addslashes($_GET["input_text"]);
Функция addslashes экранирует спец. символы, но она не учитывает кодировку БД и возможен обход фильтрации. Не стану копировать текст автора, который описал данную уязвимость и дам просто ссылку Chris Shiflett (перевод можно поискать в рунете).

Используйте функцию mysql_escape_string или mysql_real_escape_string , пример:
$input_text = mysql_escape_string($_GET["input_text"]);
Если вы не предполагаете вхождение html тегов, то лучше всего сделать такую фильтрацию:
$input_text = strip_tags($_GET["input_text"]); $input_text = htmlspecialchars($input_text); $input_text = mysql_escape_string($input_text);
strip_tags - убирает html теги.
htmlspecialchars - преобразует спец. символы в html сущности.
Так вы защитите себя от XSS атаки, помимо SQL инъекции.
Если же вам нужны html теги, но только как для вывода исходного кода, то достаточно использовать:
$input_text = htmlspecialchars($_GET["input_text"]); $input_text = mysql_escape_string($input_text);

Если вам важно, чтобы значение переменной не было пустой, то используйте функцию trim , пример:
$input_text = trim($_GET["input_text"]); $input_text = htmlspecialchars($input_text); $input_text = mysql_escape_string($input_text);

Фильтрация. Ошибка №3.

Она касается поиска в БД.
Для поиска по числам используйте фильтрацию, описанную в первой ошибке.
Для поиска по тексту используйте фильтрацию, описанную во второй ошибке, но с оговорками.
Для того, чтобы пользователь не смог выполнить логическую ошибку, нужно удалять или экранировать спец. символы SQL.
Пример без доп. обработки строки:
$input_text = htmlspecialchars($_GET["input_text"]); // Поиск: "%" $input_text = mysql_escape_string($input_text);
На выходе у нас получится запрос вида:
... WHERE text_row LIKE "%".$input_text."%" ... // WHERE text_row LIKE "%%%"
Это значительно увеличит нагрузку на базу.
В своём скрипте я использую функцию, которая удаляет нежелательные мне символы из поиска:
function strip_data($text) { $quotes = array ("\x27", "\x22", "\x60", "\t", "\n", "\r", "*", "%", "<", ">", "?", "!"); $goodquotes = array ("-", "+", "#"); $repquotes = array ("\-", "\+", "\#"); $text = trim(strip_tags($text)); $text = str_replace($quotes, "", $text); $text = str_replace($goodquotes, $repquotes, $text); $text = ereg_replace(" +", " ", $text); return $text; }
Конечно, не все из выше перечисленных символов представляют опасность, но в моём случаи они не нужны, поэтому выполняю поиск и замену.
Пример использования фильтрации:
$input_text = strip_data($_GET["input_text"]); $input_text = htmlspecialchars($input_text); $input_text = mysql_escape_string($input_text);
Также советую сделать ограничение по количеству символов в поиске, хотя бы не меньше 3-х, т.к. если у вас будет большое количество записей в базе, то поиск по 1-2 символам будет значительно увеличивать нагрузку на БД.

Фильтрация. Ошибка №4.

Не фильтруются значения в переменной $_COOKIE . Некоторые думаю, что раз эту переменную нельзя передать через форму, то это гарантия безопасности.
Данную переменную очень легко подделать любым браузером, отредактировав куки сайта.
Например, в одной известной CMS была проверка, используемого шаблона сайта:
if (@is_dir (MAIN_DIR . "/template/" . $_COOKIE["skin"])){ $config["skin"] = $_COOKIE["skin"]; } $tpl->dir = MAIN_DIR . "/template/" . $config["skin"];
В данном случаи можно подменить значение переменной $_COOKIE["skin"] и вызвать ошибку, в результате которой вы увидите абсолютный путь до папки сайта.
Если вы используете значение куков для сохранения в базу, то используйте одну из выше описанных фильтраций, тоже касается и переменной $_SERVER .

Фильтрация. Ошибка №5.

Включена директива register_globals . Обязательно выключите её, если она включена.
В некоторых ситуациях можно передать значение переменной, которая не должна была передаваться, например, если на сайте есть группы, то группе 2 переменная $group должна быть пустой или равняться 0, но достаточно подделать форму, добавив код:

В PHP скрипте переменная $group будет равна 5, если в скрипте она не была объявлена со значением по умолчанию.

Фильтрация. Ошибка №6.

Проверяйте загружаемые файлы.
Выполняйте проверку по следующим пунктам:

1. Расширение файла. Желательно запретить загрузку файлов с расширениями: php, php3, php4, php5 и т.п.
2. Загружен ли файл на сервер move_uploaded_file
3. Размер файла

Проверка. Ошибка №1.

Сталкивался со случаями, когда для AJAX запроса (например: повышение репутации) передавалось имя пользователя или его ID (кому повышается репутация), но в самом PHP не было проверки на существование такого пользователя.
Например:
$user_id = intval($_REQUEST["user_id"]); ... INSERT INTO REPLOG SET uid = "{$user_id}", plus = "1" ... ... UPDATE Users SET reputation = reputation+1 WHERE user_id = "{$user_id}" ...
Получается мы создаем запись в базе, которая совершенно бесполезна нам.

Проверка. Ошибка №2.

При выполнении различного рода действий (добавление, редактирование, удаление) с данными не забывайте проверять права пользователя на доступ к данной функции и дополнительные возможности (использование html тегов или возможность опубликовать материал без проверки).

Давно исправлял в одном модуле форума подобную ошибку, когда любой пользователь мог отредактировать сообщение администрации.

Проверка. Ошибка №3.

При использовании нескольких php файлов сделайте простую проверку.
В файле index.php (или в любом другом главном файле) напишите такую строчку перед подключением других php файлов:
define ("READFILE", true);
В начале других php файлов напишите:
if (! defined ("READFILE")) { exit ("Error, wrong way to file.
Go to main."); }
Так вы ограничите доступ к файлам.

Проверка. Ошибка №4.

Используйте хеши для пользователей. Это поможет предотвратить вызов той или иной функции путём XSS.
Пример составления хеша для пользователей:
$secret_key = md5(strtolower("http://site.ru/" . $member["name"] . sha1($password) . date("Ymd"))); // $secret_key - это наш хеш
Далее во все важные формы подставляйте инпут со значением текущего хеша пользователя:

Во время выполнения скрипта осуществляйте проверку:
if ($_POST["secret_key"] !== $secret_key) { exit ("Error: secret_key!"); }

Проверка. Ошибка №5.

При выводе SQL ошибок сделайте простое ограничение к доступу информации. Например задайте пароль для GET переменной:
if ($_GET["passsql"] == "password") { ... вывод SQL ошибки... } else { ... Просто информация об ошибке, без подробностей... }
Это позволит скрыть от хакера информацию, которая может ему помочь во взломе сайта.

Проверка. Ошибка №5.

Старайтесь не подключать файлы, получая имена файлов извне.
Например:
if (isset($_GET["file_name"])) { include $_GET["file_name"] .".php"; }
Используйте переключатель

Наконец, я нашел время и хочу представить вашему вниманию свой новый скрипт, который позволяет осуществить фильтрацию данных в html-таблицах.

Скрипт поддерживает следующие типы фильтров:

• Текстовое поле
• Выпадающий список
• Радио-кнопки
• Чекбоксы

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

Фильтр таблицы демо:

Символы	Текст	Цифры	Цифры	Текст
A B C		--- 1 2 3	- 1 2 3
B	Арбуз	2	3	Фанат
B	Стрелок	1	2	Арба
C	Фанат	3	1	Стрелок
C	Стрелок	2	1	Фантомас
B	Стрелок	1	2	Арбуз
C	Фанат	3	3	Стрелок
A	Арбуз	2	2	Арбуз
A	Фанат	1	1	Стрелочник
C	Фанат	3	3	Арбуз
B	Фанат	2	3	Фантик
C	Стрелок	1	1	Арбуз
C	Фанат	3	2	Стрелка

Концептуально скрипт состоит из двух частей: объектов-фильтров filterTable.Filter и собственно из функции filterTable(...) , которая привязывает эти объекты-фильтры к html-таблице.

Объект-фильтр имеет следующий конструктор:

/** * Объект фильтр. * @param HTMLInputElement | HTMLSelect HTMLElementRef | - Ссылка, или массив ссылок * на html-элементы, служащие фильтрами. * @param Function callback - ф-ция обратного вызова. Вызывается когда скрипт * производит валидацию содержимого ячейки. Ф-ция вызывается для каждой строки таблицы, для * каждой ячейки столбца, для которого назначен фильтр. * Функции будут переданы 3 параметра: callback(value, filters, i) где: * String value - значение ячейки таблицы, проверяемой на момент вызова ф-ции * HTMLElements filters - массив HTML-элементов назначенных фильтрами для проверяемого столбца. * Number i - индекс элемента фильтра в массиве filters который является * валидатором для текущего вызова. Т.е. filters[i] внутри ф-ции * обратного вызова будет содержать элемент, с которым провзаимодействовал * пользователь, в результате чего был запущен процесс валидации. * @param String eventName - название события привязанного к фильтру, по которому будет * запускаться валидация (onkeyup | onclick | onblur | onchange и т.п.) * @constructor */ filterTable.Filter = function (HTMLElementRef, callback, eventName) Первый аргумент: HTMLElement HTMLElementRef

Второй аргумент: Function callback

Функция: callback(value, filters, i) где:
String value - значение ячейки таблицы, проверяемой на момент вызова ф-ции
HTMLElements filters - массив HTML-элементов назначенных фильтрами для проверяемого столбца.
Number i - индекс элемента фильтра в массиве filters который является валидатором для текущего вызова. Т.е. filters[i] внутри ф-ции обратного вызова будет содержать элемент, с которым провзаимодействовал пользователь, в результате чего был запущен процесс валидации. Функция должна возвращать true, или false в зависимости от того проходит фильтрацию пришедшее значение value при установленном значении фильтра filters[i] согласно вашей задумке, или нет.

Третий аргумент: String eventName

Название события привязанного к фильтру, по которому будет запускаться валидация (onkeyup | onclick | onblur | onchange и т.п.) onchange - значение по-умолчанию

Сама же функция filterTable имеет следующую сигнатуру:

таблицы * @param Object filters - объект-конфигурация фильтров: { N: FILTER[, N: FILTER] } * * Где: * NUM - это натуральное число - номер столбца таблицы, обслуживаемого * фильтром. Этот номер может принимать значения от 0 до кол-во * столбцов таблицы - 1. Номера можно задавать не по порядку. * * FILTER - это ссылка на HTML-элемент представляющий собой элемент * HTML-формы и имеющий атрибут value (select в том числе), либо * объект типа tableKit.Filter */ filterTable(HTMLTBodyRef, aFilters)

Выглядит достаточно запутанно, но давайте разберем на примере. Для начала нам необходим html - каркас таблицы. Заметьте, что фильтры - это просто элементы html-формы они кстати имеют уникальные атрибуты id по которым мы их будем выбирать для передачи в конструктор filterTable.Filter

Символы	Текст	Цифры	Цифры	Текст
A B C		--- 1 2 3	- 1 2 3
B	Арбуз	2	3	Фанат
B	Стрелок	1	2	Арба
C	Фанат	3	1	Стрелок
C	Стрелок	2	1	Фантомас
B	Стрелок	1	2	Арбуз
C	Фанат	3	3	Стрелок
A	Арбуз	2	2	Арбуз
A	Фанат	1	1	Стрелочник
C	Фанат	3	3	Арбуз
B	Фанат	2	3	Фантик
C	Стрелок	1	1	Арбуз
C	Фанат	3	2	Стрелка

Стоит отметить, что такие типы фильтров, как текстовое поле, или выпадающий список - являются для скрипта "родными" и для того чтобы их реализовать не требуется даже прибегать к вызову filterTable.Filter - достаточно просто передать ссылку на сам html-элемент.

Итак, каркас у нас есть. Фильтры в нём есть. Осталось все это связать воедино. Но давайте для начала рассмотрим простейший вариант подключения, и разберем лишь фильтры для 2-го и 3-го столбцов, потому, как там используются текстовое поле и выпадающий список значений, которые скрипт-фильтр понимает "нативно" без нужды создания filterTable.Filter Я нарочно закомментировал элементы 0, 3, 4 и пока обозначил их реализацию как "..." что бы преждевременно не отпугнуть слабонервных:)

Обратите внимание, что второй аргумент ф-ции filterTable(..., {...} ) - это объект-конфигурация фильтров, у которого свойства имеют имена-цифры, начиная от 0 и до КОЛ-ВО_СТОЛБЦОВ_ТАБЛИЦЫ-1 Значением каждого такого свойства должен стать фильтр:

таблицы */ document.getElementById("target"), /* Объект-конфигурация фильтров: */ { /* Фильтр для первого столбца чекбоксы: 0: ..., */ /* Фильтр для второго столбца текстовое поле - только точное совпадение: */ 1: document.getElementById("text"), /* Фильтр для третьего столбца выпадающий список: */ 2: document.getElementById("digits"), /* Фильтр для четвертого столбца радио кнопки: 3: ... , /* Фильтр для пятого столбца Постепенный ввод слова: 4: ... */ });

Если кому то понадобится весь функционал, как показанный в демо примере, например фильтры с радио-кнопками, или фильтры с чекбоксами, то подключение становится немного сложнее потому, как по сути это фильтры, состоящие из набора html-элементов, и при валидации нужно проверять значения всего набора такого фильтра. Тут в действие вступают callback-функции. Ниже в листинге я постарался подробно прокомментировать этот момент.

Опять же обратите внимание, что для текстового поля и выпадающего списка достаточно просто передать ссылку на html-элемент. А так же обратите внимание на подключение последнего фильтра. Вы спросите почему - ведь в последнем столбце фильтр - это текстовое поле! Да это так, но если вы внимательно поработали с демо примером, то заметили, что первый фильтр - тестовое поле срабатывает только после того как вы ввели значение полностью и нажали кнопку "Enter", или кликнули в любое другое место страницы т.е. фильтр срабатывает по дефолтному событию "onchange"! А вот фильтр-текстовое- поле последнего столбца - срабатывает моментально как только вы вводите какой-либо символ. Вот для реализации этого поведения пришлось создавать фильтр по всем правилам с filterTable.Filter а так же понадобилось задавать callback функцию и плюс к этому необходимо было передать имя события "onkeyup" по которому будет инициироваться процесс фильтрации. Вот так. Надеюсь я вас не запутал окончательно.

FilterTable(/* Ссылка на элемент таблицы */ document.getElementById("target"), /* Объект-конфигурация фильтров: */ { /* Фильтр для первого столбца чекбоксы: */ 0: new filterTable.Filter([ /* Элементы фильтра */ document.getElementById("charA"), document.getElementById("charB"), document.getElementById("charC") ], /* Коллбэк ф-ция валидации */ function (value, filters, i) { /* Если чекбокс не отмечен - его значение не учавствует в валидации поэтому мы обязаны вернуть true */ if (false === filters[i].checked) return true; /* Далее, при проверке, мы должны одновременно проверять значения всех элементов набора при условии чекбокс отмечен */ return filters.checked && filters.value === value || filters.checked && filters.value === value || filters.checked && filters.value === value; }), /* Фильтр для второго столбца текстовое поле - только точное совпадение: */ 1: document.getElementById("text"), /* Фильтр для третьего столбца выпадающий список: */ 2: document.getElementById("digits"), /* Фильтр для четвертого столбца радио кнопки: */ 3: new filterTable.Filter(, /* Коллбэк ф-ция валидации */ function (value, filters, i) { /* В filters - у нас радио кнопка "Не выбрано", если она установлена фильтр не участвует в валидации и мы обязаны вернуть true */ if (true === filters.checked) return true; /* Если какая то радио-кнопка отмечена и содержимое проверяемой ячейки совпало то вернем true */ return filters.checked && filters.value === value || filters.checked && filters.value === value || filters.checked && filters.value === value; }), /* Фильтр для пятого столбца Постепенный ввод слова: */ 4: new filterTable.Filter(document.getElementById("regexp"), /* Коллбэк ф-ция валидации */ function (value, filters, i) { return value.indexOf(filters[i].value) === 0; }, /* Будем вызывать валидацию по событию onkeyup фильтра */ "onkeyup") });

Собственно все, жду от вас отзывов и предложений и надеюсь вам пригодится мой труд. Ну, и напоследок привожу полный листинг скрипта.

/** * Привязать фильтры к таблице. * @param HTMLTableSectionElement HTMLTBodyRef - ссылка на элемент таблицы * @param Object filters - объект-конфигурация фильтров: { N: FILTER[, N: FILTER] } * * Где: * NUM - это натуральное число - номер столбца таблицы, обслуживаемого * фильтром. Этот номер может принимать значения от 0 до кол-во * столбцов таблицы - 1. Номера можно задавать не по порядку. * * FILTER - это ссылка на HTML-элемент представляющий собой элемент * HTML-формы и имеющий атрибут value (select в том числе), либо * объект типа tableKit.Filter */ var filterTable = function (HTMLTBodyRef, aFilters) { var rows = HTMLTBodyRef.getElementsByTagName("TR"), filters = {}, n, walkThrough = function (rows) { var tr, i, f; for (i = 0; i < rows.length; i += 1) { tr = rows.item(i); for(f in filters) { if (filters.hasOwnProperty(f)) { if (false === filters[f].validate(tr.children[f].innerText)) { tr.style.display = "none"; break; } else { tr.style.display = ""; } } } } }; for(n in aFilters) { if (aFilters.hasOwnProperty(n)) { if (aFilters[n] instanceof filterTable.Filter) { filters[n] = aFilters[n]; } else { filters[n] = new filterTable.Filter(aFilters[n]); } filters[n]._setAction("onchange", function () {walkThrough(rows);}); } } } /** * Объект фильтр. * @param HTMLInputElement | HTMLSelect HTMLElementRef | - Ссылка, или массив ссылок * на html-элементы, служащие фильтрами. * @param Function callback - ф-ция обратного вызова. Вызывается когда скрипт * производит валидацию содержимого ячейки. Ф-ция вызывается для каждой строки таблицы, для * каждой ячейки столбца, для которого назначен фильтр. * Функции будут переданы 3 параметра: callback(value, filters, i) где: * String value - значение ячейки таблицы, проверяемой на момент вызова ф-ции * HTMLElements filters - массив HTML-элементов назначенных фильтрами для проверяемого столбца. * Number i - индекс элемента фильтра в массиве filters который является * валидатором для текущего вызова. Т.е. filters[i] внутри ф-ции * обратного вызова будет содержать элемент, с которым провзаимодействовал * пользователь, в результате чего был запущен процесс валидации. * @param String eventName - название события привязанного к фильтру, по которому будет * запускаться валидация (onkeyup | onclick | onblur | onchange и т.п.) * @constructor */ filterTable.Filter = function (HTMLElementRef, callback, eventName) { /* Если ф-цию вызвали не как конструктор фиксим этот момент: */ if (!(this instanceof arguments.callee)) { return new arguments.callee(HTMLElementRef, callback, eventName); } /* Выравниваем пришедший аргумент к массиву */ this.filters = {}.toString.call(HTMLElementRef) == "" ? HTMLElementRef: ; /** * Шаблонный метод вызывается для каждой строки таблицы, для соответствующей * ячейки. Номер ячейки задается в объекте-конфигурации фильтров ф-ции * filterTable (См. параметр 2 ф-ции tableFilter) * @param String cellValue - строковое значение ячейки * @returns {boolean} */ this.validate = function (cellValue) { for (var i = 0; i < this.filters.length; i += 1) { if (false === this.__validate(cellValue, this.filters[i], i)) { return false; } } } this.__validate = function (cellValue, filter, i) { /* Если фильтр был создан явно и явно указана функция валидации: */ if (typeof callback !== "undefined") { return callback(cellValue, this.filters, i); } /* Если в фильтр напихали пробелов, или другой непечатной фигни - удаляем: */ filter.value = filter.value.replace(/^\s+$/g, ""); /* "Фильтр содержит значение и оно совпало со значением ячейки" */ return !filter.value || filter.value == cellValue; } this._setAction = function (anEventName, callback) { for (var i = 0; i < this.filters.length; i += 1) { this.filters[i] = callback; } } };

Фильтр диапазона значений "ОТ" и "ДО"

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

... ... ...

ОТ --- 1 2 3 ДО --- 1 2 3

А в вызове скрипта прописываем фильтр (для третьего столбца) для краткости я сократил листинг оставив только определение фильтра "от" и "до":

FilterTable(/* Ссылка на элемент таблицы */ document.getElementById("target"), /* Объект-конфигурация фильтров: */ { /* Фильтр для первого столбца чекбоксы: */ 0: ... , /* Фильтр для второго столбца текстовое поле - только точное совпадение: */ 1: ... , /* ФИЛЬТР диапазон значений ОТ и ДО */ 2: new filterTable.Filter([ document.getElementById("digits-from"), document.getElementById("digits-to") ], function (value, filters, i) { var accept = true; value = parseInt(value,10) if (filters.value) { accept = (value >= parseInt(filters.value,10)); } if (accept && filters.value) { accept = (value <= parseInt(filters.value,10)); } return accept; }), /* Фильтр для четвертого столбца радио кнопки: */ 3: ... , /* Фильтр для пятого столбца Постепенный ввод слова: */ 4: ... });

Примеры фильтров таблиц без учета регистра

Фильтр не чувствительный к регистру для точного совпадения (можно заменять им стандартный)

New filterTable.Filter(document.getElementById("text"), function (value, filters, i) { var empty_filter = filters[i].value == "", match_value = value.toLowerCase() == filters[i].value.toLowerCase(); return empty_filter || match_value; })

Фильтр не чувствительный к регистру для постепенного ввода слова

New filterTable.Filter(document.getElementById("regexp"), /* Коллбэк ф-ция валидации */ function (value, filters, i) { var c_value = value.toLowerCase(), f_value = filters[i].value.toLowerCase(); return c_value.indexOf(f_value) === 0; }, /* Будем вызывать валидацию по событию onkeyup фильтра */ "onkeyup")

В принципе не чувствительность к регистру можно встроить и в сам скрипт фильтра, но пока нет времени думаю в будущем переписать этот скрипт с учетом всех ваших пожеланий тогда и сделаем эту фичу там. Как говорится: оставайтесь с нами;)

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

Если раньше трудно было это даже представить, то сейчас в каскадной таблице реализованы практически все программные фильтры, начиная от размытия и заканчивая художественно-цветовыми моделями.

Но все же в CSS-фильтрах имеется один небольшой недостаток – не все веб-браузеры поддерживают визуальные эффекты. Разумеется, это лишь вопрос времени. И к наступлению часа «х» разработчикам нужно быть готовым. А пока рассмотрим то, что на данный момент уже реализовано.

Поддержка CSS фильтров браузерами

В основном все ходовые браузеры, Firefox, Chrome, Opera, имеют «дружеское» отношение с фильтр-эффектами. Чего не скажешь о IE, который напрочь отказывается поддерживать эффекты, даже в самых поздних версиях.

Браузер	Explorer	Chrome	Firefox	Safari	Opera	Android	iOS
Версия	no	31+	35+	7+	18+	4.4+	6+
filter	—	(-webkit-)	+	(-webkit-)	(-webkit-)	(-webkit-)	(-webkit-)

Функции и синтаксис CSS фильтров

Во всех свойствах CSS имеются некие параметры, сочетающие в себе порядок прописывания значений. Свойство filter не является исключением, как и другие, оно может использовать комбинацию нескольких правил в одном применении. К примеру, добавить фильтр яркости для изображения, а через пробел указать еще один — контрастность. Мы рассмотрим все в этой статье с несколькими примерами для лучшего понимания.

Синтаксис

Filter: название фильтра (процент значения) ; filter: url(img.svg); filter: blur(10px); filter: brightness(0.9); filter: contrast(150%); filter: drop-shadow(5px 5px 10px black); filter: grayscale(80%); filter: hue-rotate(60deg); filter: invert(80%); filter: opacity(50%); filter: saturate(50%); filter: sepia(40%); /* Применение нескольких фильтров */ filter: contrast(150%) grayscale (80%);

Список фильтров

Фильтр	Описание
blur (px)	Фильтр для размытия изображения. Степень размытия указывается в пикселях. Если число не задано, то по умолчанию используется 0.
drop-shadow ()	Тень. Альтернатива свойству box-shadow с аналогичными параметрами и тем же порядком прописывания. Исключением является четвертое значение «растяжение»: почти все браузеры его не поддерживают.
grayscale (%)	Фильтр «обесцветить». Применяются оттенки серого цвета к изображению в зависимости от указанного процента. Не допускается отрицательное значение, а оригинальность картинки равна 0.
brightness (%)	Настройка яркости изображения. Значение в 100% показывает исходную точку яркости. Регулировка совершается как отрицательно (-50%), так и положительно (150%).
contrast (%)	Настройка контрастности изображения. Как и в предыдущем фильтре, значение в 100% покажет исходную точку. Изменения можно задавать отрицательные (-20%) и положительные (120%).
hue-rotate (deg)	Поворотное наложение тона цвета. В зависимости от указанного градуса (от 0deg до 360deg) на изображение будет налаживается цвет, который определяется по цветовому кругу.
invert (%)	Инверсия изображения. Применяется значение от 0 до 100% без отрицательного параметра.
saturate (%)	Насыщенность изображения. Исходное положение определяется в 100% и не имеет отрицательного значения.
sepia (%)	Эффект сепия. Оригинальность картинки определяется в 0% и доступна до значения 100% без отрицания.
opacity (%)	Прозрачность картинки. Еще один фильтр, у которого есть аналогичное свойство opacity с таким же способам в использовании. Настройка допускается от 0 до 100% без отрицательного параметра.
url ()	CSS ссылка на SVG элемент с определенным идентификатором #id.
initial	Устанавливает значение свойства по умолчанию.
inherit	Наследует все значения свойства своего родительского элемента.

Примеры CSS filters

Мы подошли к интересной части статьи, в которой рассмотрим каждый фильтр в отдельности с примерами его применения. Для наглядности будут использоваться три картинки. Первая покажет исходную точку, облик оригинальности. Вторая послужит статичным примером в применении фильтра, а третья покажет hover-эффект, наведение курсора мыши на изображение.

Фильтр размытия

В графических редакторах фильтр размытия является незаменимым инструментом и часто применяемым в работе. Он способен непросто создавать расплывчатое изображение, а делать эффект фокусирования на определенном элементе при этом остальная часть изображения попадает под размытие. И многое другое.

В оформлении сайта (к примеру – размытие) можно использовать как подкладку для лучшей читаемости текста, расположенного на картинке. Собственно, размытие совершается по гауссу от значения 0 px и до полного исчезновения.

Оригинал

Фильтр

Hover-эффект

/*статичное правило*/ .efbl1 img{ filter: blur(2px); -webkit-filter: blur(2px); } /*для hover-эффекта*/ .efbl2 img{ transition: all 0.6s ease 0s; } .efbl2:hover img{ filter: blur(4px); -webkit-filter: blur(4px); transition: all 0.6s ease 0s; }

Фильтр тень

Свойство тень пришло к нам еще с третьей версией каскадной таблицы. Безусловно, оно знакомо всем, кто занимается сайтостроением, так как box-shadow в дизайне играет далеко не последнюю роль. Фильтр drop-shadow можно назвать неполноценной альтернативой с аналогичными параметрами, а их всего 5, не считая внутреннюю тень.

Порядок прописывания такой: 5px/-5px (смещение по горизонтали), 5px/-5px (смещение по вертикали), 15px (радиус размытия тени), 5px/-5px (растягивание тени), black (цвет). Фильтр поддерживает весь синтаксис кроме растягивания и значения inset (внутренняя тень), а также добавления нескольких теней через запятую. Но несмотря на все это, присутствуют свои достоинства, к примеру, фильтр учитывает псевдоэлементы, что позволяет отображать точную форму тени элемента.

Также интересным является то, что когда у блока нет фона, а лишь задана обводка border , то при использовании box-shadow будет отображаться тень с якобы учетом фона, то есть сплошная. А в случае использования drop-shadow тень принимает форму обводки без учета фона.

Оригинал

Фильтр

Hover-эффект

/*статичное правило*/ .efdrswd1 img{ filter: drop-shadow(6px 7px 3px rgba(0, 0, 0, 0.4)); -webkit-filter: drop-shadow(6px 7px 3px rgba(0, 0, 0, 0.4)); } /*для hover-эффекта*/ .efdrswd2 img{ transition: all 0.6s ease 0s; } .efdrswd2:hover img{ filter: drop-shadow(6px 7px 3px rgba(0, 0, 0, 0.4)); -webkit-filter: drop-shadow(6px 7px 3px rgba(0, 0, 0, 0.4)); transition: all 0.6s ease 0s; }

Фильтр обесцвечивания

Классический стиль фотографии для всех времен в правильном направлении. Фильтр допускает лишь одно значение — положительное. В зависимости от указанного процента оттенки серого будут плавно заменять цвет изображения. Также вместо процентов можно применять дробь до целого числа (0.01/1).

Оригинал

Фильтр

Hover-эффект

/*статичное правило*/ .efgrays1 img{ filter: grayscale(90%); -webkit-filter: grayscale(90%); } /*для hover-эффекта*/ .efgrays2 img{ transition: all 0.6s ease 0s; } .efgrays2:hover img{ filter: grayscale(90%); -webkit-filter: grayscale(90%); transition: all 0.6s ease 0s; }

Фильтр яркости

Добавление света к «неизведанным» черным углам изображения. В обработке фотографий применяется нередко, так как любительские снимки, как правило, совершаются в плохо освещенных местах. Яркость фильтра регулируется от 0% (полностью черная картинка) до почти полного исчезновения изображения. Оригинальная точка определяется в 100%, а значение также можно указывать дробью.

Оригинал

Фильтр

Hover-эффект

/*статичное правило*/ .efbrig1 img{ filter: brightness(150%); -webkit-filter: brightness(150%); } /*для hover-эффекта*/ .efbrig2 img{ transition: all 0.6s ease 0s; } .efbrig2:hover img{ filter: brightness(150%); -webkit-filter: brightness(150%); transition: all 0.6s ease 0s; }

Фильтр контрастности

Нехитрый способ сделать изображение более выразительным, поэкспериментировав с настройками яркости самых светлых и темных частей картинки. Фильтр contrast готов этому помочь. Его параметры, как и у многих, исключают отрицательное значение (-150%), а исходное положение обозначается в 100%. Кроме процентов, допускается также дробь (1.5).

Оригинал

Фильтр

Hover-эффект

/*статичное правило*/ .efcontr1 img{ filter: contrast(150%); -webkit-filter: contrast(150%); } /*для hover-эффекта*/ .efcontr2 img{ transition: all 0.6s ease 0s; } .efcontr2:hover img{ filter: contrast(150%); -webkit-filter: contrast(150%); transition: all 0.6s ease 0s; }

Фильтр тона цвета

Отличный дизайнерский прием в оформлении изображения, под стиль основного дизайна ресурса. Суть заключается в наложении оттенка выбранного цвета на исходную картинку. Соотношения выходят в зависимости от заданного градуса, который указывает точку цвета на цветовом круге.

Если значение указано положительное (150deg), то поворот происходит по часовой стрелке. Соответственно, если отрицательное, то против часовой. В двух положения начинается от 0deg до 360deg.

Оригинал

Фильтр

Hover-эффект

/*статичное правило*/ .efhrotai1 img{ filter: hue-rotate(180deg); -webkit-filter: hue-rotate(180deg); } /*для hover-эффекта*/ .efhrotai2 img{ transition: all 0.6s ease 0s; } .efhrotai2:hover img{ filter: hue-rotate(180deg); -webkit-filter: hue-rotate(180deg); transition: all 0.6s ease 0s; }

Фильтр инверсия

Специфический эффект, позволяющий перевернуть цвет изображения верх дном. В графических редакторах имеет определенную роль и бывает так, что без его участия не добиться нужного результата. Параметр фильтра инвертирования указывается лишь в положительную сторону от значения 0% до 100%.

Оригинал

Фильтр

Hover-эффект

/*статичное правило*/ .efinve1 img{ filter: invert(100%); -webkit-filter: invert(100%); } /*для hover-эффекта*/ .efinve2 img{ transition: all 0.6s ease 0s; } .efinve2:hover img{ filter: invert(100%); -webkit-filter: invert(100%); transition: all 0.6s ease 0s; }

Фильтр насыщенность

Когда изображение теряет свой естественный цвет красок по неизвестным причинам (что-то вроде выгоревшей футболки на солнце), то увеличением насыщенности можно вмиг восстановить прежний вид. А если этот фильтр использовать в сочетании с другими фильтрами, результат будет весьма удовлетворительным. Настройка совершается от 0 исходный вид, до больших чисел.

Оригинал

Фильтр

Hover-эффект

/*статичное правило*/ .efsatut1 img{ filter: saturate(165%); -webkit-filter: saturate(165%); } /*для hover-эффекта*/ .efsatut2 img{ transition: all 0.6s ease 0s; } .efsatut2:hover img{ filter: saturate(165%); -webkit-filter: saturate(165%); transition: all 0.6s ease 0s; }

Фильтр сепия

Имитация эффекта старинных фотографий (слегка коричневый оттенок). Таким образом достигается ретро стиль изображения, который пользуется особой популярностью. Фильтр сепия регулируется от 0% (исходное положение) до 100%.

Оригинал

Фильтр

Hover-эффект

/*статичное правило*/ .efsepiaa1 img{ filter: sepia(100%); -webkit-filter: sepia(100%); } /*для hover-эффекта*/ .efsepiaa2 img{ transition: all 0.6s ease 0s; } .efsepiaa2:hover img{ filter: sepia(100%); -webkit-filter: sepia(100%); transition: all 0.6s ease 0s; }

Фильтр прозрачность

Фильтр аналогичный свойству opacity из каскадной таблицы 3-й версии. Синтаксис такой же, а значение прозрачности регулируется от 0% до 100% (исходное положение).

Оригинал

Фильтр

Hover-эффект

/*статичное правило*/ .efopaty1 img{ filter: opacity(50%); -webkit-filter: opacity(50%); } /*для hover-эффекта*/ .efopaty2 img{ transition: all 0.6s ease 0s; } .efopaty2:hover img{ filter: opacity(50%); -webkit-filter: opacity(50%); transition: all 0.6s ease 0s; }

Фильтр ссылка

Создается собственный фильтр на основе SVG элементов с определенным идентификатором, который впоследствии можно используется в CSS через фильтр ссылку. Эффекты могут очень сильно отличаться от стандартных фильтров начиная от маски-наложения до банальной прозрачности.

Генератор CSS filters

Уже давно повелось создавать генераторы различных CSS свойств. , и многое-многое другое. Они служат как инструмент, упрощающий работу. А для начинающих вебмастеров могут нести двойную пользу. Ими очень легко пользоваться: перемещаете ползунки, и сразу же виден результат. А по окончании остается лишь скопировать сгенерированный код. То же и с генераторами CSS фильтров. Вот два из них для ознакомления:

Заключение

Обзор получился весьма немаленький, но надеюсь, что кому-то пригодится на практике. Также не забывайте комбинировать фильтры, один – хорошо, а два будет лучше, в определенных случаях.

Обзор технологий