CSS 3_html/css_WEB-ITnose を使用して不規則なグラフィックを作成する

はじめに

複雑なグラフィックスを作成するための CSS テクノロジーは、間もなく広くサポートされ、実際のプロジェクトに適用されるようになるでしょう。この記事の目的は、氷山の一角をすべての人に公開することです。この記事で不規則な形状について予備的な理解をしていただければ幸いです。

これで、以下に示すように、CSS 3 の一般的な不規則で複雑なグラフィックを使用できるようになります (リンクをクリックして表示します):

CSS を使用して作成されたグラフィックには、組み込みのテキストまたはテキストの折り返し効果を含めることはできません。そのため、不規則なグラフィックやテキストの複雑なレイアウトをどのように実現するかも話題となっています。

今日はこの効果を達成する方法を紹介します。この記事では、CSS を使用して不規則なグラフィックを作成し、不規則なテキスト レイアウトを実現する方法を説明します。不規則なグラフィックの作成方法を学んだ後は、想像力を働かせて美しい CSS ページを作成できます。下の写真は、このテクノロジーを使用して作成された「不思議の国のアリス」のレンダリングです。

注: これは CSS テクノロジーの最新バージョンです。 , そのため、ブラウザのバージョン要件が高くなります。オンラインの例を見たい場合は、ブラウザがこの CSS テクノロジーをサポートしていることを確認する必要があります。この記事では、効果を確認するためにいくつかのスクリーンショットも提供します。

グラフィックの宣言

不規則なグラフィックを宣言するには、shape-outside 属性を使用する必要があります。現在、shape-outside 属性はフローティング要素、およびブロックレベル要素にのみ適用できます。非ブロックレベル要素でこれらの属性を使用する必要がある場合は、最初に要素をブロックレベルとして宣言する必要があります。

Shape-* 値には、自動、基本シェイプ、または画像リンクの 3 つの割り当て方法があります。自動に設定すると、フローティング要素は従来のボックス モデルとしてレンダリングされ続けます。ボックス モデルに詳しくない場合は、この記事を読むための基礎となる CSS ボックス モデルを参照してください。

描画方法には、長方形、差し込み長方形、円、楕円、または多角形の方法などが含まれます。リンクから詳細な説明をご覧いただけます。

属性が画像リンクに設定されている場合、ブラウザは画像の「アルファ チャネル」に従ってグラフィック形状を描画します。

要素に座標系を作成する

CSS 形状を宣言した後、最初に形状の描画に使用される座標系を作成する必要があります。

グラフィックスはこの座標系の格子に基づいて描画する必要があるため、座標系は非常に必要です。 shape-* 属性はボックス モデルに基づいており、これを機能させるには、ボックスのサイズを明示的に指定し、不規則な形状をボックスに制限する必要があります。これは、描画座標系の作成にも使用されます。座標系の開始点は、形状ボックスの左上隅にあります。幅と高さを明示的に宣言しないと、shape-* 属性は効果がありません。

カスタム グラフィックの背景色を設定します

カスタム グラフィックが適用された後も、そのボックス モデルはまだ存在し、他の従来のスタイル設定がボックス モデルのスコープに適用されます。たとえば、次の例では、フローティング円を作成し、この円の背景色を設定するだけです。通常の考え方によれば、効果は次のようになります。

しかし、ボックスの背景色を設定すると、期待される効果とは異なることがわかります。

で。上の図では背景が表示されています。予想どおり、円ではなくボックス モデル領域に色が適用されています。

それでは、円の背景色をどのように設定すればよいでしょうか?これにより、新しい CSS スタイル、clip-path が生まれます。クリップパスは、現在のスタイルの範囲を制限するために使用されます。以下の例では、それがどのように使用されるかを示します。

リマインダー

現在、shape-outside 属性は浮動要素のみをスコープとし、ブロックレベルの要素のみに制限されています。これらのプロパティを使用して定義された要素の周囲のテキストは、グラフィックの形状に基づいて配置されます。将来的には、CSS シェイプが制限され、フローティング要素に適用されるだけでなく、テキストの外側のグラフィックを大騒ぎするだけでなく、テキストの内側にカスタム グラフィックを定義して、次のような効果を実現できるようになります。 Shape -outside を使用して、カスタムシェイプの周囲にラップされたフローティングテキストを作成します

簡単な例から始めましょう。この例では、組み込みのテキスト フローを使用してカスタム グラフィックを作成します。最終的なレンダリングは次のとおりです (サンプルのダウンロード リンクは記事の最後にあります):

この例では、設定用のコンテナが 2 つあります。カスタムシェイプとネストされたテキストコンテンツ。コードは次のとおりです。

rrree

まず、浮動領域の DIV ノードを宣言し、固定値を使用してサイズを設定する必要があります。コードは次のとおりです:

<div class="container">  <div class="shaped"></div>  <div class="content">    <h1><span>La</span> Tour <br/>Eiffel</h1>    <p>Lorem Ipsum.....</p>  </div></div>

座標系が正常に作成されたので、次にグラフィックスを描画します。グラフは 2 つの方法で描画できます:

Polygon() を使用する

Polygon() メソッドを使用してグラフ範囲を計算できます。このメソッドは、グラフィックスを描画するために座標系から複数の点を取得します。各点は (x, y) 値によって配置されます。 この例では、以下に示すように、非常に単純な多角形を作成します。

座標点の単位は、固定値またはパーセンテージにすることができます。この例では、ドットの位置をパーセントで設定します。次に、このスタイルをフローティング要素に適用する必要があります。

.shaped{/*…*/  shape-outside: polygon（0 0, 100% 0, 100% 100%,30% 100%）;  shape-margin: 20px;}

 

应用以上的样式后，一个不规则的图形-梯形产生了。

可以看到代码中使用了shape-margin 属性，它用于设置图形和文本内容之间的边距。

接下来需要添加背景图，需要注意在添加背景图之后，它将被应用于盒模型，目前为止效果如下：

所以，为了达到预期效果，我们需要设置clip-path 属性，并且设置其范围和shape-outside 属性相同。

.shaped{/*…*/  clip-path: polygon（0 0, 100% 0, 100% 100%,30% 100%）;}

 

现在，我们就通过polygon() 方法实现了目标效果。

 

使用图片链接

我们也可以通过图片（严格说是拥有通明区域的图片）来创建不规则图形，依据图片的“alpha通道” 生成不规则图形。

例如，替代polygon() 声明方法。我们可以设置shape-outside 属性值为图片URI，浏览器就会自动依据图片来绘制不规则图形。

图片中的透明部分将被声明为文本元素的浮动部分。其余部分被声明为不规则图形。代码如下：

.shaped{/*…*/  shape-outside: url（/images/mm.png）;  shape-image-threshold: 0.5;这个属性用于设置浮动区域透明度范围}

 

上述的两种方法都拥有各自的优缺点。例如，如果图形过于复杂，通过图片方法比手动计算图形绘制节点更方便。

 

源码下载