CSSオフセットを使用した要素の周りにテキストを配置します

CSSは、position属性や対応するinset-*属性などのテキストを含むページ要素を見つけるさまざまな方法を提供します。 translate属性は別のオプションです。 margin anchor() offset属性は通常、所定のパスに沿って要素をアニメーション化するために使用されます。たとえば、次の例の正方形は、円形の経路に沿って移動します：

offset

登録済みのCSSカスタム属性（

<div>
  <div></div>
</div>

）を使用して、正方形の要素を設定およびアニメーション化します。アニメーションは、特定のパスの任意のポイントで要素を見つけるために

@property --p {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
.square {
  offset: top 50% right 50% circle(50%) var(--p);
  transition: --p 1s linear;

  /* 等同于：
    offset-position: top 50% right 50%;
    offset-path: circle(50%);
    offset-distance: var(--p); */

  /* 其他样式 */
}

.circle:hover .square{ --p: 100%; }</percentage>

を使用できるため、機能します。

が次の属性で構成される略語属性であることを知らないかもしれません。 --p offset-distance offset：パスの開始点offset

• ：要素がそれに沿って動くことができる形状offset-position
• ：要素がパスに沿って移動する距離offset-path
• ：アンカーポイントとオフセットパスに対する要素の回転角offset-distance
• ：パスoffset-rotateに合わせた要素内の位置
• 属性は、達成したいことにとって重要です。 SVG形状またはCSS形状関数を含む形状値と、パスを作成するコンテナ要素の参照ボックスを受け入れます。 offset-anchor参照フレーム？これらは、CSSボックスモデルに従って決定された要素サイズであり、、
、

、および

、offset-path、

などのSVGコンテキストです。

コンテナ要素の端のパスに沿って要素を配置する方法を簡素化します。 content-box以下は例です。下のすべての小さな正方形は、コンテナ要素のデフォルトの左上隅に配置されていますpadding-box。代わりに、小さな円は、それぞれborder-box、view-box、fill-boxの右上隅にあります（コンテナ要素の正方形の周囲の25％）。 stroke-box content-boxcontent-box注：border-box含有している親要素内の要素にスペースを割り当てたくない場合は、要素のレイアウトコンテキストを取り外すことができます。これは、内部段落テキストがエッジに近づくことができるように、上記の例で取得した方法です。したがって、padding-box配置された要素（小さな正方形と円）を使用して、独自のコンテキストを取得し、通常のドキュメントストリームからそれらを削除します。

参照フレームに対するこの位置決め方法により、特定のUIモジュールの周辺に沿って通知ポイントや装飾的なリボンの先端などの要素を簡単に配置できます。さらに、、がパスに沿って要素を回転させることができるため、テキストが含まれるブロックの端に沿って配置される方法を簡素化します。簡単な例は、ブロックの右端に配置された記事の日付を示しています。 offset-rotate offset 見たように、

<div>
  <div></div>
</div>

@property --p {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
.square {
  offset: top 50% right 50% circle(50%) var(--p);
  transition: --p 1s linear;

  /* 等同于：
    offset-position: top 50% right 50%;
    offset-path: circle(50%);
    offset-distance: var(--p); */

  /* 其他样式 */
}

.circle:hover .square{ --p: 100%; }</percentage>

プロパティは、参照フレームパス

およびコンテナユニットをより効率的に使用しますoffset -conted要素の幅または高さに基づいてを簡単に設定できます。この記事の最後にある「さらに読む」セクションに、コンテナクエリとコンテナクエリユニットについての学習に関する参照を追加します。 offset-distanceプロパティは、最後の例でも使用されています。要素変位と回転のアンカーポイントを提供します。たとえば、例の90度回転は、要素の左下隅で発生します。また、

属性は、

値を調整することにより、基準フレームから要素を内側または外側に移動することもできます。たとえば、offset-anchorパラメーターは、要素のボトムエッジを外側に引っ張ります。これにより、以下に示すように、配置の精度が向上します。 offset-anchor inset-* bottom -10px 記事の冒頭に示されているように、padding-box

ポジショニングはアニメーション化されています。これにより、次のような動的な設計効果が可能になります。

<div>
  <div></div>
  <div></div>
  <p>She sells sea shells by the seashore</p>
</div>

<div>
  <div></div>
  <div></div>
  <p>She sells sea shells by the seashore</p>
</div>

<div>
  <div></div>
  <div></div>
  <p>She sells sea shells by the seashore</p>
</div>

.small {
  /* 其他样式 */
  position: absolute;

  &.square {
    offset: content-box;
    border-radius: 4px;
  }

  &.circle { border-radius: 50%; }
}

.big {
  /* 其他样式 */
  contain: layout; /* (或 position: relative) */

  &:nth-of-type(1) {
    .circle { offset: content-box 25%; }
  }

  &:nth-of-type(2) {
    border: 20px solid rgb(170 232 251);
    .circle { offset: border-box 25%; }
  }

  &:nth-of-type(3) {
    padding: 20px;
    .circle { offset: padding-box 25%; }
  }
}

要約offset

グラフィックデザイン（境界に沿ったテキストなど）、テキストアノテーション、または動的テキスト（エラーメッセージなど）の場合、CSS

<h1>The Irreplaceable Value of Human Decision-Making in the Age of AI</h1>

<div>Published on 11<sup>th</sup> Dec</div>
<cite>An excerpt from the HBR article</cite>

は使いやすいオプションです。親要素を含むリファレンスボックスに沿って要素を見つけ、それらを回転させ、必要に応じてアニメーションを追加できます。

article {
  container-type: inline-size;
  /* 其他样式 */
}

.date {
  offset: padding-box 100cqw 90deg / left 0 bottom -10px;

  /*
    等同于：
    offset-path: padding-box;
    offset-distance: 100cqw; (容器元素宽度的 100%)
    offset-rotate: 90deg;
    offset-anchor: left 0 bottom -10px;
  */
}

さらに読み取り

offset

css

プロパティ：

css-tricks、mdn

• cssoffset-pathプロパティ：css-tricks、mdn
• コンテナクエリ長さユニット：offset-anchorCSS-tricks、mdn
• at-rule：css-tricks、web.dev
• cssボックスモデル：@propertycss-tricks
• SVGリファレンスボックス：w3c

以上がCSSオフセットを使用した要素の周りにテキストを配置しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。