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

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

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

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

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

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

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

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

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

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

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

Большой визуальный гайд по CSS Anchor Positioning

От базовой привязки элементов до прикладных приёмов: создания прочных соединителей и цепочек якорей.

Собрали материалы нескольких месяцев работы в большую статью в формате "CSS-фича в картинках". Получилось больше 50 иллюстраций!

Теперь про Anchor Positioning можно и почитать, и поиграть.

https://habr.com/ru/articles/1092540/

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