Треугольники на CSS

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

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

Cхема решения такая:

conic-gradient(
  from 335deg
  at bottom right,
  transparent 0 25deg,
  red 25deg
);

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

Этот полезный приём можно сразу закрепить в небольшом игровом уровне по CSS-градиентам: 5 минут практики, чтобы поиграть с параметрами и набить руку.

Опубликовали мой доклад про Реактивный CSS на весеннем HolyJS. Особенно прикольным получился третий пример про связку скролла с цсс-логикой. В нём у календаря-индикатора при прокрутке ячейки закрашиваются разными цветами.

Ну а мне как докладчику понравилась атмосфера в зале, хотя было утро второго дня конференции, самое тяжелое утро =)

Случайные испытания для демонстрации мастерства

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

Суть режима:
1. Пройти уровень из 10 случайных испытаний выбранной сложности
2. Использовать во время прохождения минимум лишних ходов
3. По результатам определяется ступень мастерства

Есть 3 уровня сложности, по 3 попытки на каждый.

И если на простом уровне всё проходится левой пяткой, то на сложном реально приходится попотеть. На внутренних тестах лучший результат — 8 ступень из 9.

Теперь вам есть чем поразвлекаться в пятницу =)

P.S.: а анимация то какая прикольная получилась у портала.

https://htmlacademy.ru/skill-trials/conic-ascension

CSS Anchor Positioning

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

Заякорённые элементы это как бы абсолютно позиционированные, но с суперспособностями.

Например, их можно привязывать не только к элементу в цепочке родителей, но к элементам вне родителя. И ещё куча других фич.

Короче, не затягивайте с тем, чтобы поиграться с Anchor Positioning, тем более мы сделали красивую мини игру про эту фичу (первую из множества).

CSS shape() — фича больших надежд

CSS начал вырастать из коротких штанишек квадратного веба. Швы конкретно затрещали, когда хром зарелизил свойство border-shape, ядро которого — CSS-функция shape().

shape() была не особо популярной, про неё вспоминали, когда нужно было что-то обрезать. Но и тут можно было повыбирать: маски или clip-path, а можно ли использовать какой-нибудь генератор?

Но давайте посмотрим на текущий потенциал фичи:
— сложные формы контейнеров (с нормальной отрисовкой рамок),
— траектории движения для анимаций,
— просто обрезки,
— комбинирование с другими фичами (например с anchor-positioning).

Короче, с фичей пора знакомиться, можно начать с мини-игры по CSS shape(). Цель — пройти уровень идеально.

P.S.: куда поместить навык работы с shape() в системе грейдов?

Я думаю, что на текущем этапе даже базовое владение shape() — это удел синьоров, потому что синьор — это про кругозор и перспективные фичи, а мидл — это про использование надёжного и предсказуемого. А как думаете вы?

Скругления в неожиданных местах

Скругления хороши в углах блоков, а в других местах они превращаются в жуткий головняк.

Проблему скруглений решает CSS-функция shape(), причём сразу несколькими способами. Самый грубый — команда arc.

Теперь с arc можно поиграться в новой мини-игре. Цель, как обычно, пройти уровень идеально (можно не с первого раза). В процесее оцените, насколько сложно вырезать стрелочку со скриншота.

P.S.: если в первый раз видите shape(), то начните игру с первого уровня

anchor() – царица якорей

Функция anchor() живёт внутри большинства сложных демок и крутых приёмов, связанных с якорным позиционированием.

Простейший вид якорей:
1. anchor-name у якоря;
2. position-anchor + position-area у привязанного элемента.

Продвиутый вид:
1. anchor-name у якоря;
2. inset-свойства со значениями, содержащими anchor(), у привязанного элемента.

Например:

.anchor {
  anchor-name: --a1;
}

.target {
  position: absolute;
  left: anchor(--a1 right);
}

То есть элемент можно привязать любой стороной к любому якорю (да-да, элемент можно привязать сразу к нескольким разным якорям). А ещё можно использовать выражения с anchor(). Всё это даёт невероятную гибкость в выборе точек привязки и в позиционировании элементов.

Поисследуйте anchor() самостоятельно в мини-игре. Цель — пройти уровень идеально. После этого, как говорил братишка Иллидан, вы будете готовы к сложным приёмам якорного позиционирования.

Какую же красоту можно делать с Anchor Positioning

Это просто промежуточный этап работы

ИИ становится пугающе сообразительным

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

Недавно дал астре абсолютно нетипичную для себя задачку. "А сможешь сделать вертикальный ролик?". Мол, сходи поиграй в мини-игру про гриды и сделай ролик. Тот ответил, что вообщше без проблем. И через 7 мин у меня был ролик, который вы видите.

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

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

В общем новые модельки меньше тупят и лучше соображают. И это прикольно

→ опубликовано через smmtp://

Суперприёмы Anchor Positioning

В детстве мы играли в файтинги на денди (а мажоры на сегамегадрайве). И там были суперприёмы. В анкор позишнинге они тоже есть!

Суперприём #1 – прочная связь двух элементов

Один угол заякорённого элемента привязываем к первому якорю, противоположный угол — ко второму якорю. Готово. Связь будет сохраняться при перемещении связанных элементов. Визуально оформить связь можно фоном или рамками. Код:

.svyaz {
  /* один угол связали с --a1 */
  top: anchor(--a1 center);
  left: anchor(--a1 center);

  /* второй с --a2 */ 
  bottom: anchor(--a2 center);
  right: anchor(--a2 center);
}

Суперприём #2 – цепочки якорей

Один заякорённый элемент можно делать якорем для второго, а тот для третьего и так далее. Простор для творчества — гигансткий.

Этот приём напоминает мне школьную игру про "... дорисуй вагон другой".

Пощупать эти приёмы можно в очередном уровне игры про Anchor Positioning. Перед этим лучше пройти все предыдущие уровни.

→ опубликовано через smmtp://