CSS @property и новый стиль

Опубликовано 2 сентября 2024 г.

Продолжительность около 9 минут читать

The @property at-rule недавно получил поддержку во всех современных браузерах, открыв возможность явно определять синтаксис, начальное значение и наследование для пользовательских свойств CSS. Кажется, что CSS Houdini и его API свойств и значений CSS были первоначально введены. Я экспериментировал умеренно в течение долгого времени, читая статьи, которые танцевали вокруг концепций, но я едва коснулся поверхности того, что @property мог бы предложить. Последующая демонстрация исследует возможности следующего поколения CSS.

Призывы к действию

Видели ли вы когда-нибудь эти гладкие, привлекающие внимание, блестящие элементы веб-страницы с призывом к действию? Волны сайтов по всему Интернету, особенно те, которые предлагают услуги и программное обеспечение, призывающие вас «Обновить свой аккаунт» или «Зарегистрироваться сегодня», обнаружили этот вид и прицепились к нему. Я здесь не для того, чтобы критиковать его, и признаюсь, что он довольно свежий. Я подумал, что сам попробую этот стиль. Посмотрите на результат в CodePen ниже.

Открыть демо CodePen

В этой демонстрации есть масса всего, что можно распаковать. Давайте начнем с этого блеска, обтекающего кнопку. Переключите панель CSS демонстрации, чтобы найти коллекцию @property правила, связанные с теми пользовательскими свойствами, которые нужно анимировать. Вот одно из них, определенное для --gradient-angle:

@property --gradient-angle {
  syntax: "";
  initial-value: 0deg;
  inherits: false;
}

The @property правило сообщает браузеру, что допустимый синтаксис для этого пользовательского свойства, а его начальное значение — 0deg. Это позволяет браузеру плавно переходить от 0deg к 360deg и вывести вращающийся градиент.

@keyframes rotate-gradient {
  to { --gradient-angle: 360deg; }
}

.rotate-gradient {
  background: conic-gradient(from var(--gradient-angle), transparent, black);
  animation: rotate-gradient 10s linear infinite;
}

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

Открыть демо CodePen

Мы можем добиться эффекта блестящей анимированной границы, немного улучшив этот код. Мы представим linear-gradient как первое значение элемента background свойство и установить background-origin к каждому значению.

• Происхождение linear-gradient установлен на padding-box. Это предотвращает проникновение градиента в приграничную зону.
• The conic-gradient источник установлен на border-box. Этот градиент перетекает в пространство, созданное шириной границы.
• Чтобы показать вращающийся conic-gradientдобавляется однопиксельная прозрачная граница.

.border-gradient {
  background: 
    linear-gradient(black, black) padding-box,
    conic-gradient(from var(--gradient-angle), transparent 25%, white, transparent 50%) border-box;
  border: 1px solid transparent;
}

На панели CSS простая демонстрация градиентного вращенияраскомментируйте .border-gradient Набор правил для отображения блестящей анимированной границы. Выглядит довольно скользко! Для большего количества примеров я включил кучу статей об анимированных градиентных границах в раздел ресурсов в конце поста.

Плавные переходы при наведении

Несколько специальных ингредиентов помогают обеспечить плавный градиентный переход при наведении на элемент. Давайте разберемся с его background ценности:

.shiny-cta {
  background: 
    linear-gradient(var(--shiny-cta-bg), var(--shiny-cta-bg)) padding-box,
    conic-gradient(
        from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
        transparent,
        var(--shiny-cta-highlight) var(--gradient-percent),
        var(--gradient-shine) calc(var(--gradient-percent) * 2),
        var(--shiny-cta-highlight) calc(var(--gradient-percent) * 3),
        transparent calc(var(--gradient-percent) * 4)
      )
      border-box;
}

Каждое пользовательское свойство, которое необходимо анимировать, имеет syntax заявил в своем @property определение, чтобы браузер мог интерполировать между соответствующими изменениями значений и плавно их переносить. Размер блестящей области определяется --gradient-percent значение. При наведении более высокий процент удлиняет блеск. --gradient-angle-offset значение используется для корректировки угла градиента, чтобы блеск не колебался вперед и назад при наведении курсора.

Мне пришлось подстраивать процент и значения смещения, пока длина блеска и переход не стали визуально выровнены. Наконец, --gradient-shine Яркость снижается, чтобы более плавно сочетаться с соседними цветами подсветки.

Давай помедленнее.

Этот Совет CSS по замедлению вращения при наведении действительно взорвал мой мозг. В коде примера подсказки одна и та же анимация вращения объявлена дважды. Вторая анимация реверсируется и останавливается, ее длительность делится пополам. Когда на элемент наводят курсор, animation-play-state: running переопределяет paused значение и замедляет вращение до половины скорости. Самое ошеломляющее, по крайней мере для меня, то, что анимация ускоряется обратно в текущую позицию, когда элемент больше не находится под наведением. Никакого возврата к исходной позиции, никаких дополнительных элементов-оберток не требуется. Это чертовски хороший совет.

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

Крошечные блестящие точки

Если присмотреться еще ближе, то мы обнаружим мерцающие внутри кнопки точки размером с булавочное отверстие, когда блестящая граница проходит рядом с ними. Чтобы отобразить этот точечный узор, radial-gradient фон создан.

.shiny-cta::before {
  --position: 2px;
  --space: calc(var(--position) * 2);
  background: radial-gradient(
      circle at var(--position) var(--position),
      white calc(var(--position) / 4),
      transparent 0
    )
    padding-box;
  background-size: var(--space) var(--space);
  background-repeat: space;
}

Помните, что --gradient-angle пользовательское свойство? Оно вернулось! Но на этот раз оно используется в conic-gradient Маска, которая раскрывает части точечного рисунка при его вращении. Угол градиента смещен на 45 градусов, чтобы идеально выровнять его с вращением блестящей границы.

.shiny-cta::before {
  mask-image: conic-gradient(
    from calc(var(--gradient-angle) + 45deg),
    black,
    transparent 10% 90%,
    black
  );
}

Для последнего штриха магии к изображению добавляется градиент, содержащий цвет подсветки. ::after Псевдоэлемент, вращающийся в унисон с областью блеска. Эти блики, проходящие через кнопку, добавляют приятную, гостеприимную атмосферу, которой раньше не хватало.

Улучшение цветов при наведении

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

Кнопка ::before и ::after псевдоэлементы уже использовались, поэтому я обернул текст кнопки в span элемент. Размытый box-shadow содержащий цвет подсветки, применяется к одному из его псевдоэлементов, который затем расширяется, чтобы заполнить размеры кнопки. При наведении мыши псевдоэлемент медленно увеличивается и уменьшается, вызывая вибрацию, похожую на расслабленное дыхание. В сочетании с вращающимся цветом подсветки внутри кнопки эффект наконец нашел во мне отклик. Эта замысловато спроектированная кнопка призыва к действию ощущалась завершенной.

В новом стиле

Многие из вышеперечисленных методов были бы почти невозможны совсем недавно. Явное определение пользовательских свойств открывает огромный мир возможностей. Мне особенно не терпится увидеть, как @property будет использоваться в крупномасштабных приложениях и системах проектирования. Предоставление определений типов для CSS с помощью @property Стефани Эклс, а также Адама Аргайла Системы проектирования CSS с безопасными типами и @property — это всего лишь несколько взглядов на действительно многообещающее будущее публикации наших CSS.

Полезные ресурсы

Вернуться ко всем записям блога