Канал про сложные места CSS без магии и суеверий.

https://tml.io/cssbol

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

01. «Абсолютное позиционирование» — как сверстать «точечные» лидеры в адаптивном оглавлении и на пальцах понять containing block, static position и shrink-to-fit для position: absolute.

02. «Радиальные градиенты, часть 1» — базовая грамотность по radial-gradient(): color stops, эллипс vs круг, центр через at, управление плотностью и первые трюки с анимацией через CSS-переменные.

03. «sibling-index() и sibling-count() вместо инлайнов и костылей» — практично применяем «соседей» для состояния без JavaScript, строим гибкие связи в разметке и следим за специфичностью.

04. «Радиальные градиенты, часть 2» — продвинутая практика: резкие переходы, отрицательные color stops, градиентный бокс через background-size и точное позиционирование центра.

05. «Вырезы в блоках — революция» — новая парадигма: делаем вырезы масками (mask-image + градиенты) вместо обёрток — меньше кода, больше гибкости и честная работа на сложных фонах.

06. «CSS if() — провал или прорыв?» — трезво оцениваем: if() внутри значений свойств с style, media, supports — где полезно, где нет, и что такое стилевые «самозапросы».

07. «Сравнение CSS-переменных на чистом CSS» — приём с sign() и @property для «меньше, больше или равно», версии на if() и на container style queries, с оговорками по поддержке.

08. «Конические градиенты — что скрывает спецификация W3C» — полный разбор conic-gradient(): углы и стопы, from и at, практические эффекты (рамки, диаграммы, узоры) и что реально написано в спецификации CSS Images Module Level 4.

09. «Голограммы на чистом CSS» — собираем «шейдерный» перелив: слои с mask + mix-blend-mode (multiply, color-dodge) и вращающийся conic-gradient через анимируемую --angle.

10. «Вогнутые углы за пару строк CSS» — быстрые инвертированные углы с nebo.css: классы и CSS-переменные для формы и смещений, комбинация нескольких углов через обёртки и корректная работа поверх градиентов и картинок.

11. «Великий апгрейд CSS-условий» — историческое обновление Chrome 142: функция if() и стилевые контейнерные запросы теперь поддерживают диапазонные сравнения (>, <, =) и позволяют сравнивать CSS-переменные между собой. Разбираем спецификацию CSS Conditional Rules Module Level 5, примеры с переменными x и y, проверка значений в пикселях, процентах и em, применение в реальных интерфейсах и приём с sign() как фолбэк для старых браузеров.

12. «Реактивный CSS близко» — новая парадигма, в которой сложная логика отображения, которую раньше могли делать только на JS, теперь делается на CSS. В выпуске показано, как построить слайдер без классов и JS, управляя состоянием одной переменной --current. Компоненты реагируют на состояние, меняют внешний вид и анимируются полностью нативно — Reactive CSS в действии.

13. «Математика в CSS» — визуализация школьных функций на чистом CSS: движение точек по оси Y через вычисления в calc(), построение графиков прямых, парабол, кубических кривых, корней и логарифмов с помощью pow() и log(), а также тригонометрии через sin(), cos() и tan(). В выпуске — интерактивная демка, смещения и масштабирование функций, перевороты и фазовые сдвиги, а также примеры, где такая математика реально используется: параллакс-эффекты, анимации, меню по спиралям и нестандартные UI-траектории.

14. «:nth-child – разбор для новичков» — наглядное объяснение того, как работает формула an + b в селекторе :nth-child(): выбор чётных и нечётных элементов, последовательности «начиная с» и «до», построение сложных выборок через 2n+1, n+4, -n+3 и другие выражения. В выпуске — визуализация того, как изменяется n, пересечения селекторов без пробела, объединения через запятую и разбор того, почему odd и even — всего лишь сокращённые математические формулы.

15. «Полное разочарование в CSS» — честный разбор нового синтаксиса и работающего решения без JavaScript. В выпуске — наглядное объяснение, почему nth-child(of S) не делает то, что все от него ждут, и как в реальности работает выбор элементов внутри контейнера. Разбираемся, что именно не так в спецификации, почему MDN вводит в заблуждение и чем всё это оборачивается на практике.

✨ На грядущем PiterJS для вас выступит Александр Першин с докладом:

📜 Реактивный CSS близко

Мы стоим на пороге революции в вёрстке, связанной с новым подходом — реактивным CSS. В нём привычная логика отображения «переезжает» из JavaScript в стили, и весь внешний вид компонента зависит от CSS-переменных состояния.

В докладе мы детально разберём, как работает реактивный CSS. Мы создадим и сравним две реализации типового слайдера. Вы увидите как логика из JS перетекает в стили, сможете оценить объём и сложность кода на CSS и понять, есть ли у подхода будущее.

🗣 Немного об авторе

20 лет в веб-разработке, сооснователь HTML Academy, много лет исследую современный CSS.

🎫 Регистрируйся, пока есть места: https://piterjs.org/#meetup=tx5uqh_fox5zo

✔️ А если передумал идти — отмени регистрацию там же, чтобы кто-то смог прийти вместо тебя.

Уже сегодня, приходите в 20:00!

Игруля про декабрь в айти — такой знакомый и болючий!

Смотря на новогодние активности, мы в @outagency и @ligaaagency решили сделать игру про такое знакомое — классический предновогодний кранч и трэш в диджитале.

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

В игре можно выбрать роль — дизайнер или разработчик, а затем получить клиента и попытаться завершить его проект до нового года! А ещё внутри прикольные клиенты, открытки, поздравляшки и разные концовки :)

[Поиграть в игру]