ForumDesign TechSupport - Дизайн для форумов и техническая поддержка

Объявление

К ЧЕМУ ПРИВОДЯТ ПОПЫТКИ ИЗМЕНИТЬ ХОД ИСТОРИИ

«22 февраля 2035 года я появился на Таймс-сквер с единственной целью: предотвратить надвигающиеся катастрофы.
Я — носитель, и я пришёл к вам из 2045 года, где мир, который вы всегда знали, превратился в руины...»
// Читать сюжет
Ключевые слова: авторский мир, способности • NC-17 • эпизоды

Подробнее

Акция! Дизайн «MyBB Technical Support»

Дизайн для форума MyBB в тематике компьютерных сообществ или технической поддержки
Стоимость при покупке эксклюзивно: 2000р 1200р
Скидка 40%. В стоимость входит настройка и корректировка дизайна.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Светлый дизайн в фентези стиле с аниме-графикой

Макет для светлого дизайна в фентези стиле с аниме-графикой.
Стоимость: 2600р*
Дизайн продается эксклюзивно (в одни руки).

Подробнее

Дизайн для MyBB форума гильдии WoW Exodar

Детализированный rpg-дизайн для mybb форума гильдии в тематике Экзодара.
Стоимость: 2150р*
В стоимость входит настройка и корректировка дизайна.

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Фонд форумаРеклама на сайте
Стать модераторомОтзывыДонат

Предложения

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.



CSS Filters

Сообщений 1 страница 4 из 4

1

CSS Filters

CSS Filters были созданы для получения различных визуальных эффектов при применении их к DOM элементам. В данной статье мы поговорим об истории фильтров, о том, что они делают и как их применять. Так же рассмотрим их влияние на производительность как на десктопах, так и на мобильных устройствах.
источник

https://habrastorage.org/storage2/628/af4/990/628af49909e447ac4354488edc15e8f2.jpg

Прошлое, настоящее и будущее фильтров
Фильтры были созданы как часть спецификации SVG. Их задачей было применение эффектов, основанных на пиксельной сетке к векторной графике. Со временем интернет-браузеры были наделены поддержкой SVG и полезность фильтров стала очевидна. Robert O’Callahan из Mozilla описал идею применения SVG фильтров к элементам DOM с помощью описания их в CSS. Он создал пример в котором показал насколько проще может быть применение SVG эффектов в комбинации с CSS. Рабочие группы CSS и SVG объединились и создали новое CSS свойство filter.

Как работают фильтры
Что же делают фильтры? Можно представить себе что это некий постпроцесс, который творит чудеса с элементами на странице уже после того как они были отрисованны.

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

Как использовать СSS Filters
Фильтры можно применять к любому видимому элементу на странице.

Код:
div { filter: grayscale(100%); }

Данный пример изменит цвет контента находящегося внутри тега на ч/б.
https://habrastorage.org/storage2/d08/5b4/d20/d085b4d205fc13d54c424d982e78563a.jpg
Каждый фильтр имеет параметр который позволяет изменять силу действия фильтра.

Код:
div { filter: grayscale(50%); }

https://habrastorage.org/storage2/2e0/4e4/6b0/2e04e46b039c8bc93fe06539c41d5e47.jpg
Можно применять несколько фильтров одновременно.

Код:
div { filter: grayscale(100%) sepia(100%); }

https://habrastorage.org/storage2/292/835/45c/29283545c9a59d333c8dbd1187b96bc8.jpg

Какие фильтры доступны для использования в CSS
grayscale(значение)
Конвертирует цвета в ч/б. Значение задается как в процентах (0% — 100%), так и в десятичных дробях (0 — 1).
https://habrastorage.org/storage2/bdf/e72/0f6/bdfe720f60eb6aa615f1fc648be3e8e5.jpg

sepia(значение)
Создает эффект сепии. Значение задается как в процентах (0% — 100%), так и в десятичных дробях (0 — 1).
https://habrastorage.org/storage2/609/b80/db8/609b80db88780c23cc852af29e0f858e.jpg

saturate(значение)
Управляет насыщенностью цвета. Значение задается как в процентах (0% — 100%), так и в десятичных дробях (0 — 1).
https://habrastorage.org/storage2/c4c/c5e/647/c4cc5e6471a4d51a02a5f17be0514871.jpg

hue-rotate(угол)
Меняет цвета изображения в зависимости от заданного угла. Угол поворота определяет на сколько изменится данный цвет в цветовом круге от красного до фиолетового. Значение задается в градусах (0deg — 360deg).
https://habrastorage.org/storage2/baa/280/f1c/baa280f1cc207f457d6ea729b58fd232.jpg

invert(значение)
Инвертирует цвета. Значение задается как в процентах (0% — 100%), так и в десятичных дробях (0 — 1).
https://habrastorage.org/storage2/aec/002/115/aec0021159eeaaedec06c03ed4bb12c7.jpg

opacity(значение)
Задает прозрачность элемента. Значение задается как в процентах (0% — 100%), так и в десятичных дробях (0 — 1).

Данный фильтр работает так же как и CSS свойство opacity. Единственное различие в том, что фильтр поддерживает аппаратное ускорение, а свойство нет. Таким образом применение фильтра даст большую производительность.
https://habrastorage.org/storage2/09b/bf6/462/09bbf64626d1d4eab19b5ec685089994.jpg

brightness(значение)
Изменяет яркость изображения. Значение задается как в процентах (0% и больше), так и в десятичных дробях (0 и больше).
https://habrastorage.org/storage2/89f/66e/633/89f66e63363a733924cb0cd7704b9200.jpg

contrast(значение)
Изменяет контрастность изображения. Значение задается как в процентах (0% и больше), так и в десятичных дробях (0 и больше).
https://habrastorage.org/storage2/2e8/642/24c/2e864224c13d55e855578e6f412973f2.jpg

blur(радиус)
Создает эффект размытости. Значение задается в пикселях (px).
https://habrastorage.org/storage2/e2a/9bf/603/e2a9bf603100b612c1a5407ac4820772.jpg

drop-shadow(x, y, радиус, цвет)
Создает тень аналогично CSS свойству box-shadow, но только фильтр имеет поддержку аппаратного ускорения. Значения задаются аналогично значениям CSS аналога.

Код:
drop-shadow(16px 16px 20px black);

https://habrastorage.org/storage2/8dd/7f8/c19/8dd7f8c19e5cadf421057144975e9b69.jpg

Код:
filter: drop-shadow(inset 0 0 2rm blue);

https://habrastorage.org/storage2/371/cdd/7fa/371cdd7faae9c24395236566fd4e406c.jpg

url(ссылка на SVG фильтр)
Можно создавать собственные фильтры с помощью SVG элемента filter и ссылаться на них из CSS. Каждый фильтр имеет свой id.
SVG:

Код:
<filter id=”foo”>...</filter>

CSS:

Код:
div { filter: url(#foo); }

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

Большинство фильтров работают довольно быстро на любом устройстве поддерживающем их. Однако фильтры blur и drop-shadow, использующие эффект размытости, работают намного медленнее остальных. Как именно они работают?

Когда вы применяете фильтр blur, он смешивает цвета пикселей вокруг каждого пикселя, таким образом создавая эффект размытости. Например, если задан радиус 2px, то фильтр будет выбирать по два пикселя во всех направлениях и смешивать их цвета и так для каждого пикселя. Чем больше радиус, тем больше времени нужно на расчет эффекта. Так как фильтр выбирает пиксели во всех направлениях, то при увеличении радиуса размытости в 2 раза количество пикселей возрастает в 4 раза. Это означает, что времени на расчет потребуется ровно в 4 раза больше. Фильтр drop-shadow содержит в себе фильтр blur.

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

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

Совместимость
Большинство CSS фильтров сейчас доступны для использования в браузере FireFox и браузерах на движке WebKit. В скором времени надеемся увидеть поддержку в браузерах Opera и IE10. Так как спецификация все еще находится в разработке, приходится использовать вендорные префиксы. Для WebKit -webkit-filter, для FireFox префикс не требуется.

Ниже приведена таблица совместимости фильтров с браузерами.
https://habrastorage.org/storage2/fa7/b2a/768/fa7b2a768073a00620f5a8605e8114ea.png

В помощь для составления годов и подбора нужных эффектов:
Генератор фильтров

+1

2

а какой в них смысл?
типа, чтобы не фотошопить картинки?

0

3

Гуру, по сути да. Коды всегда весят меньше, чем картинки.
А теперь представь эффект, когда в каком-нибудь меню товаров или скриншотов дизайнов при наведении курсора картинка блюрится или становится чёрно-белый и полупрозрачной, а поверх нее всплывает описание товара/скриншота. Круто? Да. Будем для этого каждую картинку блюрить? Ну, нахер))) лучше воспользоваться фильтрами.

0

4

Гуру написал(а):

а какой в них смысл?

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

+1