#codepen дня

В чём секрет производительных анимированных градиентов?

В том, что их не надо анимировать!

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

Работать-то будет: https://codepen.io/P1N2O/pen/pyBNzX

А что лучше? Так старый добрый transform. Не на фон, конечно же, а на псевдоэлемент, его содержащий. Его и двигайте. Давайте что-нибудь запилим прям щас.

Например, очередной лоадер на этой неделе: https://codepen.io/alinaki/pen/zYGvWYN

Одним градиентом рисуем полоски, второй — запихиваем в псевдоэлемент и двигаем его.

Ну вроде ок, не? Кто сделает на шейдерах?

P. S. впрочем, иногда можно и пользовательскими свойствами долбануть по всем фронтам: https://dev.to/afif/we-can-finally-animate-css-gradient-kdk

#css #gradient #performance

#фишка дня

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

А очень просто: указывайте чёткие границы продолжительности цвета — color-stop, в два числа. А учитывая, что background-image способен принимать несколько значений, возможности комбиринирования огромны. Например: https://codepen.io/natszafraniec/pen/JmQmBV

Заметка была бы неполной без одной маленькой детали: чтобы не разбираться в особенностях работы repeating-linear-gradient и понять всю мощь комбинирования свойств, чтобы заполнить весь блок, стоит указать размер фоновой картинки, background-size. В примере выше — это 20% от ширины блока и 100% высоты. Итого, градиент из двух вертикальных полосок повторится пять раз.

#css #gradient

#codepen дня

На TikTok развелось огромное количество дизайнеров, которые отточили владение прототипами в Figma до невероятных высот.

Естественно, под каждым из таких видео с названиями «how to make supa 3d carousel in Figma supafast» раздаётся вой вида: «А как это верстать?»

Ну иногда, к счастью, верстать это можно так же, как рисовалось, и Jhey — деврел Google — нам это демонстрирует при помощи градиентной маски, смотрим: https://codepen.io/jh3y/pen/gOeXgXv

Элегантно, конечно, но требует тонкой настройки, чтобы не кружилась голова 🤪

#css #tiktok #mask #gradient

#прекрасное дня

Ни больше ни меньше. Прекрасное. Потому что я не могу это описать каким-то другим словом.

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

Не, я понимаю, мода на 3D-карточки в лендингах давно прошла, все эти перевороты и шевеления мышкой… Это всё прошлое десятилетие.

Но ребят, я за всю свою карьеру и представить не мог, что можно настолько точно передать эффект переливающейся металлизированной карточки настолько точно манипулируя одним только положением фона! Это какое-то безумное умение сочитать mix-blend-mode, градиенты и SVG-фильтры.

Вам срочно надо зайти и посмотреть самим: https://deck-24abcd.netlify.app/

Ну и гитхаб, конечно: https://github.com/simeydotme/pokemon-cards-css

Крышу сносит, потрясающе. И без WebGL.

#css #3d #gradient

#codepen дня

На TikTok развелось огромное количество дизайнеров, которые отточили владение прототипами в Figma до невероятных высот.

Естественно, под каждым из таких видео с названиями «how to make supa 3d carousel in Figma supafast» раздаётся вой вида: «А как это верстать?»

Ну иногда, к счастью, верстать это можно так же, как рисовалось, и Jhey — деврел Google — нам это демонстрирует при помощи градиентной маски, смотрим: https://codepen.io/jh3y/pen/gOeXgXv

Элегантно, конечно, но требует тонкой настройки, чтобы не кружилась голова 🤪

#css #tiktok #mask #gradient

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

Тема генерации градиентов буквально неисчерпаема. Вот подъехал ещё инструмент: https://components.ai/gradient/rfx04toi2Bx4GLUxPpdV

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

Удобный предпросмотр и экспорт в React-компоненты наличествуют.

#gradient #css #tool

#заметка дня

CSS-градиенты, конечно, были в своё время прорывом, вот только есть одна проблема.

Математически линейное изменение цвета и/или прозрачности глазом воспринимается слишком резким и… ранним.

Точно так же как и с transition, можно было бы применить функции плавности (easing). Правда, это потребует некоторых усилий, в стандарт CSS они пока не вошли.

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

Можно, конечно, и проще. Добавить промежуточный цвет при помощи пары остановок, т. н. подсказки перехода. Этот цвет может стать едва ли не основным: https://codepen.io/argyleink/pen/GRZoQLB

Какой бы способ вы ни применили, доверяйте своим глазам.

#css #color #gradient #easing

#статья дня

А приходилось ли тебе когда-нибудь, дорогой мой друг, верстать по утрам рамочки для всякой ерунды?

Нет? А вот мне приходилось... то ещё ощущение. Но есть вероятность, что понадобится и тебе.

Итак, какие есть варианты, помимо просто картинок?

1. Сочетать градиенты
2. border-image
3. SVG data-uri
4. Маскирование
5. Houdini API
6. Ну и далее везде — SVG.

Всё это есть в статье Шарлотты Дан «Fancy frames with css»: https://charlottedann.com/article/fancy-frames-with-css

Примеры крутые, пользуемся.

#css #frame #gradient

#фишка дня

А вот как сделать полосатый текст, да так, чтобы даже переносы учитывались верно?

Вот такой: https://codepen.io/chriscoyier/pen/BaOZpVm

Очень просто! Но не везде... весь секрет в двух штуках:
1. Уже упомянутый в канале -webkit-background-clip: text
2. Единица измерения lh aka line-height, интерлиньяж, буквально.

Правда, поддержка пока только в Chrome (Blink) 😅 Но кого это останавливало когда, верно?

Статья на тему есть в блоге Chris Coyer. По ссылке ещё интересное решение, чтобы сделать... полосатость надёжнее.

#css #zebra #gradient

#прекрасное дня

Ни больше ни меньше. Прекрасное. Потому что я не могу это описать каким-то другим словом.

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

Не, я понимаю, мода на 3D-карточки в лендингах давно прошла, все эти перевороты и шевеления мышкой… Это всё прошлое десятилетие.

Но ребят, я за всю свою карьеру и представить не мог, что можно настолько точно передать эффект переливающейся металлизированной карточки настолько точно манипулируя одним только положением фона! Это какое-то безумное умение сочитать mix-blend-mode, градиенты и SVG-фильтры.

Вам срочно надо зайти и посмотреть самим: https://deck-24abcd.netlify.app/

Ну и гитхаб, конечно: https://github.com/simeydotme/pokemon-cards-css

Крышу сносит, потрясающе. И без WebGL.

#css #3d #gradient #бородач

#прекрасное дня

Ни больше ни меньше. Прекрасное. Потому что я не могу это описать каким-то другим словом.

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

Не, я понимаю, мода на 3D-карточки в лендингах давно прошла, все эти перевороты и шевеления мышкой… Это всё прошлое десятилетие.

Но ребят, я за всю свою карьеру и представить не мог, что можно настолько точно передать эффект переливающейся металлизированной карточки настолько точно манипулируя одним только положением фона! Это какое-то безумное умение сочитать mix-blend-mode, градиенты и SVG-фильтры.

Вам срочно надо зайти и посмотреть самим: https://poke-holo.simey.me/

Прекрасно выглядит даже на мобильных устройствах.

Ну и гитхаб, конечно: https://github.com/simeydotme/pokemon-cards-css

Крышу сносит, потрясающе. И без WebGL.

#css #3d #gradient #бородач

#фишка дня

Не только лишь все знают, что одному элементу можно задавать несколько фонов.

Ну, буквально:

.myclass {
  background:
    background1,
    background2,
    /* …, */ backgroundN;
}

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

Пруф имеется: https://codepen.io/alinaki/pen/zYbbvWr

Всем красоты, котаны.

#css #gradient

#codepen дня

Даже не кодпен дня, а коллаборация дня. Это моя любимая тема.

Автор A выкладывает концепт, автор B дополняет его. Автор C анимирует и добавляет интерактива.

Следите за руками:

1. При помощи правила -webkit-background-clip: text; можно сделать полосатый текст, просто наложив градиент: https://codepen.io/TajShireen/pen/YzZmbep
2. Градиент может быть и коническим: https://codepen.io/argyleink/pen/XWRWagg
3. Или анимированным, используя Houdini и пользовательские свойства: https://codepen.io/bramus/pen/abWbvXJ
4. А ещё можно заставить градиент следить за курсором, используя всё те же пользовательские свойства: https://codepen.io/bramus/pen/PomoJym

Простой концепт, а сколько вариантов и идей.

#css #houdini #gradient #clip #бородач

#фишка дня

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

Сидите вы такие в уютном месте, пьёте кофе, работаете на макбуках, с экранами высокой плотности... в итоге забывая, что клиенты-то ваши — на ThinkPad с разрешением 1366*768.

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

Итак, сегодня вашему вниманию пара вариантов сглаживания градиентов.

1. Используйте нецелые значения процентов для стоп-меток. Если честно, я в механизме не до конца разобрался, но это заставляет браузер размывать линию стыка: https://codepen.io/alinaki/pen/oNrKXpM

  background: linear-gradient(
    176deg,
    red,
    red 50%,
    black 50.3%
  );

2. Похожее решение — прибавить пиксель к стоп-метке: https://codepen.io/alinaki/pen/xxovGyz

  background: linear-gradient(
    176deg,
    red,
    red 50%,
    black calc(50% + 1px)
  );

Второе решение даёт больший контроль над качеством размытия, потому что под разные плотности экранов можно давать разные значения. Например, если плотность экрана x2.5, делим наш несчастный пиксель на 2.5 и получаем ещё более красивую картинку на экранах высокой плотности (хотя мне не очень уже ясно, зачем).

P. S. естественно, Telegram зашакалил картинку на 10 шакалов из 10. Так что ползите смотреть кодпены, дамы и господа.

#css #trick #gradient #smooth

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

Дизайнеры в последнее время очень полюбили градиенты. Особенно ненаправленные.

Градиенты как элемент оформления. Градиенты как плейсхолдеры. Градиенты как идея.

И вот вроде есть у нас продукты, исповедующие идеологию LQIP (Low Quality Image Preview), о которых я писал не так давно, но многим этого мало и охота точной настройки. Особенно если дело касается mesh-градиентов (по сетке, или, проще говоря, ненаправленных).

И тут нашёлся такой инструмент для генерации и настройки градиента по фото! Буквально, так и называется: https://photogradient.com/

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

Но для нагруженного проекта я предпочту LQIP или SQIP, ссылку на которые дал выше.

#gradient #tool #mesh

#фишка дня

Не только лишь все знают, что одному элементу можно задавать несколько фонов.

Ну, буквально:

.myclass {
  background:
    background1,
    background2,
    /* …, */ backgroundN;
}

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

Пруф имеется: https://codepen.io/alinaki/pen/zYbbvWr

Всем красоты, котаны.

#css #gradient #бородач

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

Дизайнеры в последнее время очень полюбили градиенты. Особенно ненаправленные.

Градиенты как элемент оформления. Градиенты как плейсхолдеры. Градиенты как идея.

И вот вроде есть у нас продукты, исповедующие идеологию LQIP (Low Quality Image Preview), о которых я писал не так давно, но многим этого мало и охота точной настройки. Особенно если дело касается mesh-градиентов (по сетке, или, проще говоря, ненаправленных).

И тут нашёлся такой инструмент для генерации и настройки градиента по фото! Буквально, так и называется: https://photogradient.com/

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

Но для нагруженного проекта я предпочту LQIP или SQIP, ссылку на которые дал выше.

#gradient #tool #mesh #бородач

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

Дизайнеры в последнее время очень полюбили градиенты. Особенно ненаправленные.

Градиенты как элемент оформления. Градиенты как плейсхолдеры. Градиенты как идея.

И вот вроде есть у нас продукты, исповедующие идеологию LQIP (Low Quality Image Preview), о которых я писал не так давно, но многим этого мало и охота точной настройки. Особенно если дело касается mesh-градиентов (по сетке, или, проще говоря, ненаправленных).

И тут нашёлся такой инструмент для генерации и настройки градиента по фото! Буквально, так и называется: https://photogradient.com/

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

Но для нагруженного проекта я предпочту LQIP или SQIP, ссылку на которые дал выше.

#gradient #tool #mesh #бородач