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

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

Проблему скруглений решает 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

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

Суперприём #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://

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

WayDev работает с тех времён, когда каждая веб-команда писала собственную CMS. Теперь студия — один из работодателей нашей новой программы «Фронтенд-разработчик».

22 октября в 12:00 (MSK) на эфире познакомимся с её руководителем и командой, в которую попадут выпускники. Спросим:

– Какими проектами в студии гордятся больше всего?
– Как устроена команда разработки и где в ней место фронтенд-разработчика?
– Что руководитель хочет понять о новичке на собеседовании?

Среди первых 100 зарегистрировавшихся разыграем бесплатное место на программе. Победителя выберем случайно и назовём в конце эфира.

https://htmlacademy.ru/events/live-waydev