Ранее в этом месяце была выпущена новая спецификация Filter Effects 1.0 . В нем представлены некоторые захватывающие новые Photoshop-подобные эффекты, которые мы можем использовать в браузере. Более того, Webkit уже получил поддержку (по ночам)!
Согласно спецификации …
«Эффект фильтра — это графическая операция, которая применяется к элементу при его рисовании в документе. Это эффект на основе изображения, в котором в качестве входных данных принимается ноль или более изображений, число параметров, характерных для эффекта, а затем производит изображение в качестве вывода. «
Теперь, по крайней мере, на этом этапе, я бы не предполагал, что смогу показать вам все, что возможно с этими новыми фильтрами. Я все еще учу их сам! Тем не менее, я покажу вам несколько новых фильтров, как мы можем использовать их в наших проектах, а затем, мы надеемся, мы все сможем провести мозговой штурм и учиться друг у друга в комментариях. Давайте начнем.
Фильтры обычно связаны с изображениями (хотя они также могут применяться к видео). Таким образом, для нескольких демонстраций ниже мы будем использовать логотип Nettuts + в качестве входных данных.
|
1
|
<img src=»https://cdn.tutsplus.com/net/uploads/legacy/nt-logo.jpg» data-original-url=»https://cdn.tutsplus.com/net/uploads/legacy/nt-logo.jpg» data-original-url=»http://nettuts.s3.amazonaws.com/nt-logo.jpg» alt=»Nettuts+ Logo»>
|
Помните: эти эффекты еще не доступны в публичных выпусках браузеров Webkit. На данный момент загрузите Canary при тестировании этих демонстраций.
Оттенок поворота
Вы когда-нибудь играли с панелью Hue / Saturation в Photoshop? Ну, теперь вы можете поиграть с ним в браузере.
|
1
2
3
|
img {
-webkit-filter: hue-rotate(50deg);
}
|
Если указание этого значения в градусах кажется непонятным, просто представьте цветовое колесо. Количество градусов, которое вы указываете, определяет, где останавливается это колесо. Это означает, что 0deg ничего не сделает, а 50deg повернет ручку соответственно.
В этом случае логотип Nettuts + приобретет голубоватый оттенок.
Или, скажем, вы хотите, чтобы ваше изображение постоянно меняло цвета. Вероятно, в реальном проекте цветовые переходы будут намного более тонкими, но для этой демонстрации мы будем немного противны.
|
1
2
3
4
5
6
7
8
9
|
img {
-webkit-animation: adjustHue 1s alternate infinite;
}
@-webkit-keyframes adjustHue {
0% { -webkit-filter: hue-rotate(30deg);
50% { -webkit-filter: hue-rotate(60deg);
100% { -webkit-filter: hue-rotate(90deg);
}
|
Достаточно просто. Посмотреть демо
полутоновой
В прошлом мы использовали множество хаков для перевода изображения из черно-белого в цветное в браузере. Одна техника требует двух изображений, накладываемых друг на друга. Другим вариантом является использование холста. Или … мы можем использовать фильтр в grayscale .
|
1
2
3
|
img {
-webkit-filter: grayscale(100%);
}
|
Применяя процентное соотношение к функции grayscale , подумайте про себя: «На шкале от 0 до 100%, насколько серым я хочу, чтобы это изображение было?
При использовании в тандеме с переходами CSS3 мы можем применить приятный и чистый эффект наведения.
|
1
2
3
4
5
6
|
img {
-webkit-transition: -webkit-filter 1s;
}
img:hover {
-webkit-filter: grayscale(100%);
}
|
В будущем вы захотите предоставить префиксы для других браузеров, однако в этом нет необходимости. Нет необходимости применять переходы Mozilla для размещения фильтра, который реализован только в Webkit (пока).
сепия
Наслаждаешься эффектом сепии со вкусом Instagram? Давайте посмотрим, как выглядели Nettuts + на старом западе.
|
1
2
3
|
img {
-webkit-filter: sepia(100%);
}
|
Обычно, однако, этот эффект применяется к фотографиям. Давайте посмотрим, как выглядит величайший художник, который когда-либо жил в сепии.
Отлично.
пятно
Передав радиус, мы можем легко размыть изображение в браузере.
|
1
2
3
|
img {
-webkit-filter: blur(2px);
}
|
Или увеличив радиус размытия до 50px .
яркость
Мы используем фильтр brightness чтобы указать … дождаться его … насколько ярким должно быть изображение на входе.
|
1
2
3
|
img {
-webkit-filter: brightness(15%);
}
|
Думайте о 100% как о домашней базе. brightness(100%) сохраняет изображение без изменений. Однако при уменьшении этого процента изображение будет продолжать темнеть.
Не забывайте: вы можете комбинировать все эти фильтры.
|
1
2
3
|
img {
-webkit-filter: brightness(60%) sepia(100%);
}
|
контраст
Теперь мы можем легко настроить контраст изображения.
|
1
2
3
|
img {
-webkit-filter: contrast(200%);
}
|
Еще раз, думайте о 100% как о положении покоя. Затем мы можем уменьшить или увеличить это значение, чтобы отрегулировать контрастность изображения. Согласно спецификации, применение значения 0% должно сделать изображение на 100% черным, аналогично тому, что вы можете ожидать от -webkit-filter: brightness(0%); , Тем не менее, я вижу больше темно-серого цвета.
|
1
2
3
|
img {
-webkit-filter: contrast(0%);
}
|
Теперь, если мы значительно увеличим процент, до 2000% :
|
1
2
3
|
img {
-webkit-filter: contrast(2000%);
}
|
Просто для удовольствия, давайте создадим пульсирующую матричную версию логотипа Nettuts +. Мы будем комбинировать CSS3-анимацию и фильтры.
|
1
2
3
4
5
6
7
8
|
img {
-webkit-animation: bluePill 1s alternate infinite;
}
@-webkit-keyframes bluePill {
0% { -webkit-filter: contrast(2000%);
100% { -webkit-filter: contrast(100%);
}
|
инвертировать
Пользователи Mac: нажмите Control + Option + Command + 8 . Обратите внимание, как он переворачивает ваш экран (конечно, вы заметили). Я использую этот трюк поздно ночью, когда читаю на компьютере, и у меня болят глаза.
Применив процентное значение 100 к новому invert фильтру, мы можем добиться точно такого же эффекта.
|
1
2
3
|
img {
-webkit-filter: invert(100%);
}
|
Обратите внимание, что 0% оставит изображение без изменений.
Теперь вы можете технически применить это, скажем, к телу вашего сайта, и это сработает. Однако вы заметите значительное замедление и потеряете возможность прокручивать страницу. АКА — Не делай этого, кроме веселья.
Насыщение
В дополнение к настройке grayscale(100%) , мы могли бы также достичь аналогичного эффекта, полностью обесцветив изображение.
В этом случае 100% — это неизменное состояние, и в этот момент вы можете уменьшить или увеличить это значение. Таким образом, уменьшение этого значения до 0% должно удалить весь цвет с изображения.
|
1
2
3
|
img {
-webkit-filter: saturate(0%);
}
|
Или, увеличив значение до 700%:
Это все на данный момент
Следите за новостями этой статьи в течение следующей недели. Поскольку эти методы все еще супер новы, всем нам нужно время, чтобы понять, как их использовать. Я буду обновлять эту статью, как я узнаю больше !