#видео дня

Да, я нашёл это на Reddit (но я хотя бы признаюсь в этом, в отличие от… 😇).

Оригинальное название — как создать визуальный XOR-эффект на одном только CSS filter и mix-blend-mode (инвертирование по маске, короче). Но для этого стоило бы заодно код переписать в кодпен… а мы заморозили рубрику, помните?

Поэтому делаем так: теперь это видео о том, как использовать Emmet будто ты бог вёстки.

Эффективность 9000, короче.

#emmet #filter #blend

#статья дня

Щас будет неожиданно. Потому что статья связана с темой поста лишь косвенно.

Итак, статья о том, как один тип работал модератором в PornHub: https://www.theverge.com/c/22925906/pornhub-mindgeek-content-moderation

Это было бы не так интересно, если бы он просто рассказывал о должностных обязанностях. Но он пишет и о том, чем и как вообще жила компания.

Хорошее чтиво на своей работе, да.

Ладно, суть-то не в этом. Мне понравился эффект пикселизации КДПВ. Естественно, я пожелал его повторить и отдать вам: https://codepen.io/alinaki/pen/podKqJP

SVG-фильтры + IntersectionObserver и дают такой результат. Для ускорения процессинга пикселизируется не основное изображение, а его миниатюра.

Pixelate all the thi(n)gs!

#js #pixel #effect #filter #svg

#codepen дня

Я вообще хотел очередной дедовской разгон на тему вёрстки и общения с заказчиком, но мне чота в лом. Может открытую дискуссию устроим под этим постом…

А сам пост будет посвящен прекрасному примеру использования SVG-фильтров на реальном контенте.

Помните, я когда-то показывал газету на CSS-grid? Ну вот же: https://yangx.top/htmlshit/508

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

И вот тут на помощь придёт реализация шума Перлина aka Perlin Noise для SVG: https://codepen.io/simoncoudeville/pen/zYRygaV

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

#svg #effect #filter

#фишка дня

Волки тут? 😭Две фишки за день, праздник-праздник 🎉

Ладно, шутка. Это лев на картинке. В цирке выступает.

Просто совсем скоро в Firefox тоже появится поддержка backdrop-filter. А что это значит?

Что все разом кинутся делать frosted glass effect (эффект замороженного, матового стекла)!

Но как сделать переход чуть более незаметным? Например, на iOS меня сильно раздражает резкая полоска на тех же картах.

Так вот, Louis Hoebregts (я не буду пытаться транслитерировать его фамилию) напоминает нам о существовании mask-image. Можно сделать переход пилой, а можно — градиентом.

Офигенно же! Для интерфейсов карт и всяких там игровых меню идеально.

https://codepen.io/Mamboleoo/pen/qBoqbVm

#css #filter #backdrop #glass

#инструмент дня

Вы замечали, что в отпуске ногти медленнее растут? Просто положение рук при печати такое же, как при копании. А в отпуске — не печатаешь. Впрочем, я отвлёкся (похвастался).

Глядите, какая штука от Йоксель: генератор SVG-фильтров, буквально — <filter/>.

https://yoksel.github.io/svg-filters/

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

Из таких простых инструментов и складывается сообщество. Кто-то когда-то что-то для себя :)

#css #svg #filter #tool

#статья дня

Щас будет неожиданно. Потому что статья связана с темой поста лишь косвенно.

Итак, статья о том, как один тип работал модератором в PornHub: https://www.theverge.com/c/22925906/pornhub-mindgeek-content-moderation

Это было бы не так интересно, если бы он просто рассказывал о должностных обязанностях. Но он пишет и о том, чем и как вообще жила компания.

Хорошее чтиво на своей работе, да.

Ладно, суть-то не в этом. Мне понравился эффект пикселизации КДПВ. Естественно, я пожелал его повторить и отдать вам: https://codepen.io/alinaki/pen/podKqJP

SVG-фильтры + IntersectionObserver и дают такой результат. Для ускорения процессинга пикселизируется не основное изображение, а его миниатюра.

Pixelate all the thi(n)gs!

#js #pixel #effect #filter #svg

#codepen дня

Я вообще хотел очередной дедовской разгон на тему вёрстки и общения с заказчиком, но мне чота в лом. Может открытую дискуссию устроим под этим постом…

А сам пост будет посвящен прекрасному примеру использования SVG-фильтров на реальном контенте.

Помните, я когда-то показывал газету на CSS-grid? Ну вот же: https://yangx.top/htmlshit/508

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

И вот тут на помощь придёт реализация шума Перлина aka Perlin Noise для SVG: https://codepen.io/simoncoudeville/pen/zYRygaV

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

#svg #effect #filter

#видео дня

Да, я нашёл это на Reddit (но я хотя бы признаюсь в этом, в отличие от… 😇).

Оригинальное название — как создать визуальный XOR-эффект на одном только CSS filter и mix-blend-mode (инвертирование по маске, короче). Но для этого стоило бы заодно код переписать в кодпен…

Поэтому делаем так: теперь это видео о том, как использовать Emmet будто ты бог вёрстки.

Эффективность 9000, короче.

#emmet #filter #blend

#видео дня

Да, я нашёл это на Reddit (но я хотя бы признаюсь в этом, в отличие от… 😇).

Оригинальное название — как создать визуальный XOR-эффект на одном только CSS filter и mix-blend-mode (инвертирование по маске, короче). Но для этого стоило бы заодно код переписать в кодпен…

Поэтому делаем так: теперь это видео о том, как использовать Emmet будто ты бог вёрстки.

Эффективность 9000, короче.

#emmet #filter #blend #бородач

#codepen дня

Какой самый приятный момент ведения канала по веб-разработке? inb4 Когда заказывают рекламу

Конечно же когда кто-то из подписчиков присылает свои измышления и эксперименты! Как будто у нас тут с вами настоящее сообщество!

Итак, сегодня — очередная вариация на тему из игры World of Goo. Жидкие перекаты 🙂

Предыдущий пост был вот: https://yangx.top/htmlshit/1867

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

Итак, встречайте: https://codepen.io/mdss/pen/qBLZeya?editors=1100

Автор честно признаётся, что анимация украдена с https://maps.mel.fm/ Вот только у них там SVG. Пример с SVG можете увидеть по ссылке на чат или на сайте.

В общем, вдохновлять людей — приятно. Рекомендую!

#css #goo #filter #svg

#codepen дня

Итак, вашему вниманию самый популярный в октябре кодпен небезызвестной Аны Тюдор.

Переливающийся всеми цветами радуги светящийся текст!

Вот: https://codepen.io/thebabydino/pen/rNPOpJK

Реализовано на SVG-фильтре gaussian blur: фон обрезается по контенту текста через -webkit-background-clip: text и размывается.

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

#css #svg #filter

#codepen дня

Какой самый приятный момент ведения канала по веб-разработке? inb4 Когда заказывают рекламу

Конечно же когда кто-то из подписчиков присылает свои измышления и эксперименты! Как будто у нас тут с вами настоящее сообщество!

Итак, сегодня — очередная вариация на тему из игры World of Goo. Жидкие перекаты 🙂

Предыдущий пост был вот: https://yangx.top/htmlshit/1867

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

Итак, встречайте: https://codepen.io/mdss/pen/qBLZeya?editors=1100

Автор честно признаётся, что анимация украдена с https://maps.mel.fm/ Вот только у них там SVG. Пример с SVG можете увидеть по ссылке на чат или на сайте.

В общем, вдохновлять людей — приятно. Рекомендую!

P. S. Кто на айфоне починит?

#css #goo #filter #svg #бородач

#фишка дня

Вроде как все в курсе, что в CSS есть функция filter(). С её помощью мы делаем размытие, дёргаем яркость... тень, опять же!

Но она умеет больше, намного больше. Точнее, умеют фильтры SVG, а функция — на них ссылаться:

filter: url("filters.svg#filterId");

Например, используя фильтр рассеянного света — feDiffuseLighting — можно превратить круг в шар: https://codepen.io/alinaki/pen/OJqmdEJ

А можно сымитировать бумагу, как в примере от Сары Суйедан: https://codepen.io/SaraSoueidan/pen/oppeJM/adc57533be256b5148d5924a5dbd46a3

Или угареть и применить карту смещений: https://www.smashingmagazine.com/2021/09/deep-dive-wonderful-world-svg-displacement-filtering/

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

Спека по ним великолепная просто: https://www.w3.org/TR/2002/CR-SVG11-20020430/filters.html

Хотя, если честно, тяжеловаты они, GPU c WebGL справляется получше. Да и поддержка на iOS так себе.

#css #filter #svg

#codepen дня

Я вообще хотел очередной дедовской разгон на тему вёрстки и общения с заказчиком, но мне чота в лом. Может открытую дискуссию устроим под этим постом…

А сам пост будет посвящен прекрасному примеру использования SVG-фильтров на реальном контенте.

Помните, я когда-то показывал газету на CSS-grid? Ну вот же: https://yangx.top/htmlshit/508

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

И вот тут на помощь придёт реализация шума Перлина aka Perlin Noise для SVG: https://codepen.io/simoncoudeville/pen/zYRygaV

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

#svg #effect #filter #бородач

#фишка дня

Вне зависимости от модных поветрий, отсутствие тёмной темы на ресурсах начинает иногда раздражать.

Давайте сделаем свою. Для любого сайта.

Секунд за пять.

1. Инвертируем всё к чертям.
2. Поворачиваем колесо hue (тон) на 180 градусов чтобы получить более приятные глазу цвета.
3. Отменяем эти фильтры на картинках.
4. …
5. PROFIT!!11

Ну и быстрый пример, основанный на уже известном вам газетном макете: https://codepen.io/alinaki/pen/jOBvzdW

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

Впрочем, он же пишет, что повторить подобное поведение ему не удалось.

Я у себя включил этот сниппет в браузерное расширение, позволяющее применить любой CSS к любому сайту. И иногда включаю, по настроению.

#css #darktheme #filter #бородач

#видео дня

Да, я нашёл это на Reddit (но я хотя бы признаюсь в этом, в отличие от… 😇).

Оригинальное название — как создать визуальный XOR-эффект на одном только CSS filter и mix-blend-mode (инвертирование по маске, короче). Но для этого стоило бы заодно код переписать в кодпен…

Поэтому делаем так: теперь это видео о том, как использовать Emmet будто ты бог вёрстки.

Эффективность 9000, короче.

#emmet #filter #blend #бородач

#фишка дня

Ана Тюдор выложила уморительный SVG-фильтр, который позволяет превратить картинку в её контуры.

Выглядит он прям максимально просто:

  <filter id="outline">
    <feGaussianBlur stdDeviation='3'/>
    <feComponentTransfer>
      <feFuncA type= "table" tableValues="-3 4 -3"/>
    </feComponentTransfer>
  </filter>

А результат даёт интересный, на видео.

Как минимум, это очень применимо в двух случаях:

1. Если есть иконка в PNG, но нужно срочно сделать её контурной
2. Для генерации разных игр вроде «сопоставь объект с его формой» для детей. Весьма популярная тема, кстати.

Лучше всего работает на картинках с чёткими раздельными элементами. Но даже для более простых вариантов я уже нашёл применение и распечатал ребёнку стикеров :)

#css #svg #filter

#codepen дня

Итак, вашему вниманию самый популярный в октябре кодпен небезызвестной Аны Тюдор.

Переливающийся всеми цветами радуги светящийся текст!

Вот: https://codepen.io/thebabydino/pen/rNPOpJK

Реализовано на SVG-фильтре gaussian blur: фон обрезается по контенту текста через -webkit-background-clip: text и размывается.

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

#css #svg #filter #бородач

#статья дня

Эффект frosted glass — матового стекла, а не замороженного, как вы могли бы подумать — последнее время довольно популярен.

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

Джош Комо решил подойти к этой проблеме серьезно: https://www.joshwcomeau.com/css/backdrop-filter/

Что он заметил?
Когда смотришь сквозь настоящее матовое стекло, размытие неравномерное:
Чем дальше объект за стеклом, тем сильнее он размывается.

Блики и яркие детали распространяются по стеклу, создавая эффект светящегося ореола.

В итоге он решил применить фильтр для гораздо большей части изображения, а остальное — скрыть

маской: 

  .backdrop {
    position: absolute;
    inset: 0;
    height: 200%;
    backdrop-filter: blur(16px);
    mask-image: linear-gradient(
      to bottom,
      black 0% 50%,
      transparent 50% 100%
    );
  }

Звучит страшно, но на самом деле всё достаточно просто. В статье объясняются как базовые принципы использования фильтров и масок в CSS, так и неожиданные их комбинации.

#css #filter #glass