CSS @property と新しいスタイル

の @property アットルールは最近、すべてのモダンブラウザでサポートされるようになり、CSSカスタムプロパティの構文、初期値、継承を明示的に定義できるようになりました。CSS Houdiniとその CSS プロパティと値 API 最初に紹介された。私は時間をかけて、概念を飛び越えた記事を読んで、控えめに実験したが、 @property 提供できるもの。次のデモでは、次世代の CSS で何が可能になるかを探ります。

行動を促す呼びかけ

洗練された、注目を集める、きらびやかな CTA ウェブページ要素を見たことがありますか? Web 上の多くのサイト、特に「アカウントをアップグレード」や「今すぐサインアップ」を促すサービスやソフトウェアのマーケティング サイトが、このスタイルを発見し、採用しています。私はこれを批判するつもりはありませんが、確かに斬新だと思います。自分でもこのスタイルを試してみようと思いました。下の CodePen で結果を確認してください。

CodePenデモを開く

このデモには、解き明かすべきことが山ほどあります。まずはボタンの周りを回る輝きから始めましょう。デモのCSSパネルを開いて、 @property アニメーション化が必要なカスタムプロパティに関連するルール。以下は、 --gradient-angle:

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

の @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これにより、グラデーションが境界領域に溢れるのを防ぎます。
• の conic-gradient 原点は border-boxこのグラデーションは、境界線の幅によって作成されたスペースに溢れます。
• 回転を明らかにする conic-gradient1 ピクセルの透明な境界線が追加されます。

.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 のヒント 本当に驚きました。ヒントのサンプルコードでは、同じ回転アニメーションが2回宣言されています。2回目は反転して一時停止し、その持続時間は半分に分割されています。要素がホバーされると、 animation-play-state: running を上書きする paused 値を変更し、回転速度を半分に減速します。少なくとも私にとっては、要素がホバーされなくなると、アニメーションが現在の位置で再び高速化される点が衝撃的です。開始位置に戻る必要はなく、追加のラッパー要素も必要ありません。これは非常に優れたヒントです。

の 行動喚起アニメーション この方法を使用すると、ボタンにマウスを置いたときに速度を落とすことができます。このテクニックにより、速度が変わってもすべての回転と動きが同期されます。

小さな光沢のある点

さらによく見ると、光沢のある境界線がボタンの近くを通過すると、ボタンの内側にピンホールサイズのドットがきらきらと光っているのがわかります。このドットパターンをレンダリングするには、 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 ハイライトカラーを含むボタンは、その疑似要素の 1 つに適用され、ボタンの寸法に合わせて拡大されます。マウスオーバーすると、疑似要素がゆっくりと拡大縮小し、リラックスした呼吸に似た雰囲気を醸し出します。ボタン内の回転するハイライトカラーと組み合わせることで、この効果がようやく私の心に響きました。この精巧に設計された CTA ボタンは、完成したように感じました。

新しいスタイルを取り入れる

上記のテクニックの多くは、ほんの少し前まではほぼ不可能だったでしょう。カスタムプロパティを明示的に定義することで、非常に大きな可能性の世界が開かれます。私は特に、 @property 大規模なアプリケーションや設計システムに活用されます。 @property を使用して CSS の型定義を提供する ステファニー・エクルズとアダム・アーガイルの @property を使用した型安全な CSS デザイン システム これらは、CSS を公開する上での本当に有望な未来を垣間見たほんの一例です。

役立つリソース

すべてのブログ投稿に戻る