CSSを使用して、円の中にテキストを設定します

HTMLとCSSのみを使用して、循環テキストディスプレイを作成したいですか？ shape-outsideプロパティといくつかの巧妙なCSSテクニックで達成可能です。ただし、このアプローチでは、テキストの長さ、フォントの選択、応答性などの要因を慎重に検討する必要があります。

目的は次のとおりです。柔軟できれいなソリューションを目指して、サークル内に引用と著者の帰属を埋め込みます。この方法は、追加のファイルを回避し、HTMLを簡潔に保ちます。最終結果はこれに似ているはずです。

（注： shape-outside Microsoft Edgeのインターネットエクスプローラーまたは古いバージョンでサポートされていません。）

HTML構造

使用します<div>外側のラッパーとセマンティックとして<code><blockquote></blockquote>内側の容器として：

<div class="quote-wrapper">
  <blockquote cite="http://www.inspireux.com/category/quotes/jesse-james-garrett/">
    <p class="text">エクスペリエンスデザインとは、媒体から独立した、またはメディア全体で、明示的な結果として人間の経験を備えたもの、および明示的な目標としての人間の関与を、あらゆるもののデザインです。</p>
    <footer> - ジェシー・ジェームズ・ギャレット</footer>
  </blockquote>
</div>

引用はaにあります<p>クラスの「テキスト」があり、著者の帰属は<code><footer></footer>。これらのクラスは、CSSスタイリングのフックを提供します。

初期のCSSスタイリング

ラッパーから始めましょう：

 .quote-wrapper {
  高さ：300px;
  位置：相対;
  幅：300px;
}

これにより、応答性のために最小サイズを設定し、後の調整のための相対的な位置を確立します。

次に、ラジアル勾配を使用して円形の外観を作成します。

 。文章 {
  背景：放射状勾配（
    中央の楕円、
    RGBA（0、128、172、1）0％、
    RGBA（0、128、172、1）70％、
    RGBA（0、128、172、0）70.3％
  ）;
  高さ：100％;
  幅：100％;
  色：白;
  位置：相対;
  マージン：0;
}

注：70.3％の値は、単純な70％よりもスムーズなエッジを提供します。

テキストスタイリングと形状の定義

段落をスタイリングしましょう：

 .text p {
  フォントサイズ：21px;
  フォントスタイル：イタリック;
  高さ：100％;
  ラインハイト：1.25;
  パディング：0;
  テキストアライグ：センター;
  テキストシャドウ：0.5px 0.5px 1px RGBA（0、0、0、0.3）;
}

テキスト領域を形作るために、擬似要素とshape-outsideプロパティ::before使用します。これには、円に近いポリゴンを定義することが含まれます。

 .text :: before {
  コンテンツ： "";
  フロート：左;
  高さ：100％;
  幅：50％;
  シェイプアウトサイド：ポリゴン（
    0 0、
    98％0、
    50％6％、
    23.4％17.3％、
    6％32.6％、
    0 50％、
    6％65.6％、
    23.4％82.7％、
    50％94％、
    98％100％、
    0 100％
  ）;
  シェイプマージン：7％;
}

同様の::before<p>円の残りの半分を作成する要素。</p> <h3 id="フッタースタイリング">フッタースタイリング</h3> <p>著者の帰属を正しく配置するには、絶対的なポジショニングを使用します。</p> <pre class="brush:php;toolbar:false"> .quote-wrapper blockquoteフッター{ 下：25px; フォントサイズ：17px; フォントスタイル：イタリック; 位置：絶対; テキストアライグ：センター; テキストシャドウ：0.5px 0.5px 1px RGBA（0、0、0、0.3）; 幅：100％; }</pre> <p> <code>font-size 、 shape-margin 、 line-height 、およびその他のプロパティの微調整が、形状内で最適なテキストフィッティングを実現するために必要になる場合があります。

引用マークを追加します

.quote-wrapperの擬似要素::beforeを使用して大きな引用マークを追加できます。

 .quote-wrapper :: before {
  コンテンツ： "\ 201c";
  色：#ccc;
  フォントファミリー：sans-serif、serif;
  フォントサイズ：270px;
  高さ：82px;
  Line-Height：1;
  不透明：.9;
  位置：絶対;
  上：-48px;
  左：0;
  z-index：1;
}

レスポンシブデザイン

メディアクエリを使用して、さまざまな画面サイズのサイズを調整できます。

 @media（min-width：850px）{
  .quote-wrapper {
    高さ：370px;
    幅：370px;
  }
  / * ...より大きな画面のその他の調整... */
}

この包括的なアプローチにより、HTMLとCSSのみを使用して視覚的に魅力的な円形のテキスト表示を作成できます。特定のテキストとデザインの好みに基づいて、微調整が必​​要になる場合があることを忘れないでください。