#библиотека дня

Атомарность пробивает новое дно (или берёт новые высоты, кому как).

Это было лишь вопросом времени, как быстро пользовательские свойства начнут собирать в библиотеки. И вот одна из них: https://open-props.style/

.noise-noise-noise {
  /* stack grain with a gradient */
  background-image: var(--gradient-3), var(--noise-3);
  /* force colors and noise to collide */
  filter: var(--noise-filter-3);
  /* fit noise image to element */
  background-size: cover;
}

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

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

#css #atomic #var #tailwind

#codepen дня

Сколько div-ов на иллюстрации? Если ты ответил, что сколько и квадратов — ты ошибся.

Один там. И куча градиентов :)

А вот количеством и размером кубов легко можно управлять через пользовательские свойства: https://codepen.io/t_afif/pen/PoJeqwN

Пугающе гениальная штука :)

#css #var #gradient

#фишка дня

Среди наименее используемых (в 2023 году) правил CSS имеется такое: background-attachment: fixed;

Что оно делает? Ну, собственно, закрепляет фон на экране так, чтобы он не двигался со скроллом. Году так в 2004-2006 было модно, во всяких браузерных играх 🫠

Давайте реабилитируем его.

Бывший деврел Google Jhey предлагает следующее: а что если следить за курсором мыши и передавать координаты в фон?

И таки да:
.card {
background:radial-gradient(circle at var(--x) var(--y), ...);
background-attachment:fixed;
}

Передаём --x и --y как координаты курсора и получаем прожектор!

Немного магии блендинга и красота: https://codepen.io/jh3y/pen/RwqZNKa

Время переосмыслять, котаны!

#css #js #var #spotlight

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

Я когда готовил пример для поста про View Transition API, обратил внимание, как написан один из CodePen'ов, на которые я опирался. Конкретно, вот этот: https://codepen.io/argyleink/pen/GRPRJyM

Что же с ним не так? Да вроде всё так, но он импортирует нечто под названием open-props и потом использует какие-то переменные в коде...

Итак, оказалось, это — прости, господи — субатомные стили под названием Open Props: https://open-props.style/

Как можно догадаться, названы они так в пику атомным стилям типа Tailwind CSS, Assembler CSS, Tachyons или Windi CSS. Или любой другой попытке бакендеров сделать свой UI-кит.

Вот только вышеописанные наборы оперируют классами, а Open Props — переменными. Они предлагают интересный набор из цветов, размерностей, анимаций, теней и даже градиентов. Особенно меня порадовали типографические шлюзы aka clamp (Fluid sizes в терминологии фреймворка).

Получается что-то такое:

.card {
  border-radius: var(--radius-2);
  padding: var(--size-fluid-3);
  box-shadow: var(--shadow-2);

  &:hover {
    box-shadow: var(--shadow-3);
  }

  @media (--motionOK) {
    animation: var(--animation-fade-in);
  }
}

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

В общем, интересный подход. Точно имеет право на жизнь.

#css #var #variables #ui #kit

#фишка дня

Я долгое время не понимал, нафига нужен background-attachment: fixed;. Но потом в моду вошли скелетоны для загрузки (терпеть их не могу), и существование fixed стало чуть более понятным.

Но тут же появилась такая штука, как CSS-переменные... Это привело к тому, что буквально парой строк JS можно установить координаты этому самому фону и практически бесплатно получить эффект "фонарика". Вот демо от DX-инженера Vercel Джея: https://codepen.io/alinaki/pen/poYyNbB

Но он не остановился на достигнутом эффекте и пошёл дальше. Я не просто так сначала приложил простое демо. "Фонарик" — это радиальный градиент, координаты центра которого устанавливаются JS-ом. Собственно, база.

Теперь давайте перейдём к эффекту посложнее, на видео. Там подключен реакт, чтобы можно было добавлять карточки и управлять параметрами эффекта.

Впрочем, хоть сам эффект и кажется сложным, реализация его хорошо раскладывается на шаги: https://codepen.io/alinaki/pen/jOJqVmR

1. Применяем всё тот же радиальный градиент для "фонарика".
2. Цвета меняем через функцию hsl, передавая в неё градусы поворота цветового колеса:

[data-glow] {
  background-image: radial-gradient(
    var(--spotlight-size) var(--spotlight-size) at
    calc(var(--x, 0) * 1px)
    calc(var(--y, 0) * 1px),
    hsl(var(--hue) 100% 70% / 0.25), transparent
  );
  background-attachment: fixed;
}

3. Накладываем маску из псевтоэлементов так, чтобы подсветить границу чуть сильнее:

  mask:
    linear-gradient(transparent, transparent),
    linear-gradient(white, white);
  mask-clip: padding-box, border-box;
  mask-composite: intersect;

4. Вы великолепны.

#css #mask #var

#фишка дня от Jhey

Не только лишь все знают, что в content у псевдоэлементов можно использовать переменные. Это позволяет удобно помечать, например, уведомления. Или те же бейджики на карточках.

Но ведь, как мы уже. недавно выяснили, анимировать можно вообще что угодно!

Потому... разбиваем строку на span-ы и в каждом с помощью ключевых кадров меняем переменные, отвечающие за контент:

button:hover span:after {
  animation: flip 0.2s calc(var(--i) * 0.05s);
}
@​keyframes flip {
  20% { content: '_'; }
  40% { content: var(--c1); }
  60% { content: var(--c2); }
}

Вуаля, вы великолепны!

Естественно, символы надо определить заранее:

  <span
    style="--i: 0; --c1: 'x'; --c2: '$'; --c3: '≈';"
  >C</span>

The Matrix has you.

А, ну и ссылочка на кодпен: https://codepen.io/jh3y/pen/GRLKMPY

#css #var #flip

#расширения дня

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

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

Но выход есть! И это — расширение Designgui от Джеймса Четвуда.

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

А ещё в ней заложена работа с UI-китами и дизайн системами. Пока только Shadcn UI и Daisy UI, но начало положено: все токены на местах.

Думаю, надо делать такое же расширение, но для анимаций... А то вытаскивать их всё сложнее, обмажутся тейлвиндами... ну да ладно.

Ссылка на вебстор Хрома: https://chromewebstore.google.com/detail/design-gui/ldhbojdgokammocadfgbidodgffnimfj?pli=1

#css #var #color #design

#фишка дня

Я долгое время не понимал, нафига нужен background-attachment: fixed;. Но потом в моду вошли скелетоны для загрузки (терпеть их не могу), и существование fixed стало чуть более понятным.

Но тут же появилась такая штука, как CSS-переменные... Это привело к тому, что буквально парой строк JS можно установить координаты этому самому фону и практически бесплатно получить эффект "фонарика". Вот демо от DX-инженера Vercel Джея: https://codepen.io/alinaki/pen/poYyNbB

Но он не остановился на достигнутом эффекте и пошёл дальше. Я не просто так сначала приложил простое демо. "Фонарик" — это радиальный градиент, координаты центра которого устанавливаются JS-ом. Собственно, база.

Теперь давайте перейдём к эффекту посложнее, на видео. Там подключен реакт, чтобы можно было добавлять карточки и управлять параметрами эффекта.

Впрочем, хоть сам эффект и кажется сложным, реализация его хорошо раскладывается на шаги: https://codepen.io/alinaki/pen/jOJqVmR

1. Применяем всё тот же радиальный градиент для "фонарика".
2. Цвета меняем через функцию hsl, передавая в неё градусы поворота цветового колеса:

[data-glow] {
  background-image: radial-gradient(
    var(--spotlight-size) var(--spotlight-size) at
    calc(var(--x, 0) * 1px)
    calc(var(--y, 0) * 1px),
    hsl(var(--hue) 100% 70% / 0.25), transparent
  );
  background-attachment: fixed;
}

3. Накладываем маску из псевтоэлементов так, чтобы подсветить границу чуть сильнее:

  mask:
    linear-gradient(transparent, transparent),
    linear-gradient(white, white);
  mask-clip: padding-box, border-box;
  mask-composite: intersect;

4. Вы великолепны.

#css #mask #var #бородач

#фишка дня

Многие недооценивают css variables, особенно при небольшой поддержке javascript.

Думали динамически можно изменять только цвет/типографику и что-то еще такое же очевидное?
А вот и нет, управлять можно даже текстом (ну ладно, еще немного математикой).

Идея для использования - динамический брендинг.
Задали название продукта/компании/клиента в одном свойстве --client-id и изменили один раз для шапки/подвала/сайдбара.

Пример кода показывает насколько это легко понять и использовать.
https://codepen.io/glebcha/pen/gbpwbob

#css #var

#фишка дня от Jhey

Не только лишь все знают, что в content у псевдоэлементов можно использовать переменные. Это позволяет удобно помечать, например, уведомления. Или те же бейджики на карточках.

Но ведь, как мы уже. недавно выяснили, анимировать можно вообще что угодно!

Потому... разбиваем строку на span-ы и в каждом с помощью ключевых кадров меняем переменные, отвечающие за контент:

button:hover span:after {
  animation: flip 0.2s calc(var(--i) * 0.05s);
}
@​keyframes flip {
  20% { content: '_'; }
  40% { content: var(--c1); }
  60% { content: var(--c2); }
}

Вуаля, вы великолепны!

Естественно, символы надо определить заранее:

  <span
    style="--i: 0; --c1: 'x'; --c2: '$'; --c3: '≈';"
  >C</span>

The Matrix has you.

А, ну и ссылочка на кодпен: https://codepen.io/jh3y/pen/GRLKMPY

#css #var #flip #бородач