あなた自身のために書かれたCSS形状レイアウトチュートリアル

この記事は2019年2月2日土曜日22:47に公開され、CSS関連として分類されています。24509回読む、今日1回 7コメント

https://www.zhangxinxu.com/wordpress/?p=8453 から zhangxinxuによってこの記事は完全に複製することができます。個人のウェブサイトは許可を必要としません。記事の元の著者、ソースおよびリンクが保持されている限り、どのウェブサイトも要約して商業目的で使用することができます。

1.まえがきと索引

CSS Shapesレイアウトは、不規則なテキストの折り返し効果を実現できます。これは、フローティングと組み合わせて使用する必要があります。

互換性は次のとおりです。

サラウンドレイアウトの互換性

それはまだ非常に良いです、モバイル端末が利用可能です、内部のミドルエンドとバックエンドのプロジェクトが利用可能です。

CSSシェイプのレイアウトに関連する属性は多くなく、学習コストはグリッドレイアウトやフレックスレイアウトよりもはるかに小さくなります。

形状レイアウト関連の属性
形状-外側形状マージン形状-画像-しきい値

2.形状の詳細-外部

shape-outsideこれは、不規則な形状のサラウンドレイアウトの中核です。サポートされている属性値は、次の4つのカテゴリに分類されます。

なし-デフォルト値
<shape-box> –シェイプボックス。
<basic-shape>-基本的な形状関数。
<画像>-画像カテゴリ。

その中で：

noneわかりやすい、普通の長方形に囲まれているという意味です。
<shape-box>（グラフィックボックス）に比べて、レイアウト形状を関連用語であるclip-path属性<geometry-box>小さくなるように（ジオメトリボックス）サポートボックス、ボックスは、CSS2.1基本ボックスモデルの4種類がありmargin-box、border-box、padding-boxおよびcontent-box。テキストの折り返しを指定する場合は、ボックスの端に応じて計算されます。
<basic-shape>これは、CSSクリップパスクリッピングプロパティでサポートされている基本的な形状関数とまったく同じ基本的な形状関数を指します。
<image>値は、URLリンク画像、グラデーション画像、cross-fade（）、element（）などを含む画像クラスです。これらのすべての画像クラスはされてもでサポートされているCSS3マスクマスクプロパティ。この記事では、唯一の一般的に使用されるURLのリンクや勾配画像をご紹介します。その他の画像クラスが導入されることはありません。あなたが興味を持っている場合は、あなたが訪問することができマスキングについては、この記事で、完全に表示されます。

さまざまなタイプの属性値の使用（MDNから取得）：

/ *関連键字值* / 
shape-outside：none; 
形状-外側：マージンボックス; 
形状-外側：コンテンツボックス; 
形状-外側：ボーダーボックス; 
形状-外側：パディングボックス; 

/ *関数数值* / 
shape-outside：circle（）; 
形状-外側：ellipse（）; 
形状-外側：inset（10px 10px 10px 10px）; 
形状-外側：polygon（10px 10px、20px 20px、30px 30px）; 

/ * <url>值* / 
shape-outside：url（image.png）; 

/ *渐変
形值* / shape-outside：linear-gradient（45deg、rgba（255、255、255、0）150px、red 150px）;

例を通じて、各タイプの属性値の役割とパフォーマンスをすばやく理解します。

1.キーワード属性値

テストHTMLおよびCSSコードは次のとおりです。

<span class = "shape"> </ span> 
<p> CSSシェイプが出る前... </ p>

.shape { 
    float：左; 
    幅：60px; 高さ：60px; 
    パディング：10px; マージン：10px; 
    ボーダー：10pxソリッド; 
    ボーダー半径：50％; 
    背景色：currentColor; 
    background-clip：content-box; 
    色：＃cd0000; 
    形状-外側：なし; / *またはmargin-box、border-box、padding-box、content-box * / 
}

結果のレイアウトはGIFスクリーンショットとして表示されます。

さまざまなキーワード属性値のサラウンドパフォーマンス

時にあることがわかるshape-outside属性値がnoneそれよりも、キーワード別のある、でも普通のborder-radius丸みを帯びた角はラッピング効果を実現することができます。

見ることは信じています、あなたはここをクリックすることができます：CSS形状-キーワード属性値テストデモの外側

2.基本的な形状機能

次の4つの基本的な形状関数を参照します。

circle（）–円
ellipse（）-楕円
inset（）-内側の長方形（角の丸い長方形を含む）
ポリゴン（）-ポリゴン

その中で：

circle（）-circle
構文は次のとおりです。

circle（[<shape-radius>]？[at <position>]？）

疑問符?は正規表現の特殊文字です。つまり、0合計を意味します。つまり1、shape-radius（円の半径）とposition（円の中心位置）をデフォルトにすることができます。したがって、次の記述は合法です。

形状-外側：circle（）; 
形状-外側：円（50％）; 
形状-外側：円（50％50％）; 
形状-外側：円（50％50％で50％）; 
形状-外側：circle（50px at 50px 50px）;

次の図のようなサラウンド効果を実現できます。

サークルサラウンド効果

キーワード属性値を追加してborder-radius実現される円形サラウンドと比較すると、circle()実現は比較的柔軟です。たとえば、半円形サラウンド効果を作成する場合は、次のことができます。

形状-外側：円（0％50％で50％）;

結果を以下に示します。

半円サラウンド効果

ellipse（）-楕円

構文は次のとおりです。

ellipse（[<shape-radius> {2}]？[at <position>]？）

x軸の半径、y軸の半径、および楕円の中心位置。以下はすべて合法です。

形状-外側：ellipse（）; 
形状-外側：ellipse（50px 75px）; 
形状-外側：楕円（50％50％）; 
形状-外側：楕円（50px 75px at 50％50％）;

X、さらに、支持体の特定の値のY半径farthest-sideとclosest-side定義によって2つのキーワードは、最長辺の長さと最短辺の長さを示すために。例えば：

楕円（25％25％で最も遠い側最も近い側）

フローティング要素の25% 25%位置を示します。フローティング要素の最も長い側からの距離を楕円のx座標とし、フローティング要素のエッジからの最短距離を楕円のy座標とします。したがって、次のレンダリングがあります（フローティング要素のサイズは100 * 100、赤い点は25% 25%位置、楕円の輪郭が表示されます）。

最長の副作用と最短の副作用

順序を変更する場合は、最短の辺をx軸、最長の辺をy軸とします。

楕円（25％25％で最も近い側最も遠い側）

最終的なパフォーマンスは次のとおりです。

最短の副作用と最長の副作用

注意深く観察し、理解しfarthest-side、closest-side意味するのは難しくありません。

inset（）-内側の長方形（角の丸い長方形を含む）

構文は次のとおりです。

inset（<shape-arg> {1,4} [round <border-radius>]？）

それらの中にshape-argは、1〜4の値である必要なパラメーターがあります。最初の4つのパラメータがすべて指定されている場合、それらは参照フレームから内側への上部、右側、下部、および左側のオフセットを表します。つまり、挿入された長方形のエッジ位置を定義します。これらのパラメータは、マージン略語の構文に従う（同様のmargin、padding等の属性）、我々は1、2、3または4の値を使用することができます。border-radiusデフォルトで使用できるフィレットのサイズを示します。

したがって、次の書き込み方法は合法です。

形状-外側：inset（10px）; 
形状-外側：inset（10px 20px）; 
形状-外側：inset（10px 20px 30px）; 
形状-外側：inset（10px 20px 30px 40px）; 
形状-外側：inset（10px 20px 30px 40px round 10px）;

たとえば、上記のコードの最後の行の効果は次のとおりです。
内側の角丸長方形効果

コンソールビューの要素ボックスには、次のものが表示されます。

ラウンドコーナーサラウンド効果

ポリゴン（）-ポリゴン

polygon()ポリゴンは最もよく理解されている構文です。

porn（[<fill-rule>、]？[<shape-arg> <shape-arg>]＃）

fill-rule充填ルールを表します。これはnonzero、evenoddデフォルト値と同様に使用できますnonzero。これらの2つの充填ルールは、グラフィックス分野で習得する必要のある基本的な知識です。学習については、以前の記事「SVG / Canvasの非ゼロおよび偶数の充填ルールを理解する」を参照してください。

シーンのpolygon使用法は次のとおりです。

ポリゴン（x1 y1、x2 y2、x3 y3、...）

ポリゴンの点座標です。

形状-外側：polygon（0 0、0 100px、100px 200px）; 
形状-外側：polygon（0 0、100px 0、0 50px、100px 100px、0 100px）;

効果の表示：
ポリゴンの概略図

ポリゴン効果の概略図

// zxx：Firefoxブラウザにはシェイプエディタが組み込まれていますpolygon()。インスペクタでポリゴンの視覚化をクリックすると、必要な座標コードを生成できます。

レビュー概要

上記のすべての形状関数には、体験できるデモがあります。ここをクリックしてください：CSS形状-基本的な形状テストのデモ以外

赤いグラフィックは、形がどのように見えるかをみんなに知らせるためのものです。実際の開発では、単に省略したり、写真、風景、イラストなどの他の文字やビットマップに置き換えたりすることができます。

文字ラッピング組版のスクリーンショット

3.画像

画像カテゴリについては、URLとグラデーションの例のみが示されています。これは、これら2つのタイプが最も一般的に使用されているためです。

URLの不規則なグラフィック

次のように、国の第2レベルの保護された動物のオウムのPNGグラフィックがあることが知られています。

オウムの写真

次のCSSコードは、オウムのアウトラインレイアウト効果を囲むテキストを実現できます。

.shape { 
    float：left; 
    width：200px; height：300px; 
    / *オウムの周りのテキスト* / 
    shape-outside：url（./ birds.png）; 
    / *オウムの色と表示* / 
    background-color：＃ cd0000; 
    -webkit-mask：url（./ birds.png）no-repeat;
    マスク：url（./ birds.png）no-repeat; 
}

達成された効果は、以下のスクリーンショットに示されています。

テキストサラウンドオウム表示効果

この効果専用のデモページがあります。ここをクリックしてください：CSSシェイプ-PNG画像サラウンドデモの外側

注：url()リンクされた画像のサイズは変更できません。url()リンクされた画像はクロスドメインにすることはできません。そうしないと、CORSと互換性がないため、効果がありません。ブラウザコンソールを開くと、次のようなエラーレポートが表示されます。次の写真：

クロスドメインエラー

このとき、サーバー側またはCDNの現在のページのドメイン名を含めるように「Access-Control-Allow-Origin」ヘッダーを構成する必要があります。

グラデーションとサラウンド

ここでのグラデーションは、線形グラデーションまたは放射状グラデーション、および繰り返しグラデーションにすることができます。

たとえば、対角線形グラデーションを描画する場合、CSSは次のようになります。

.shape { 
    float：左; 
    幅：150px; 高さ：120px; 
    --gradient：linear-gradient（右下、＃cd0000、透明50％、透明90％、＃cd0000）; 
    形状-外側：var（-gradient）; 
    背景：var（-gradient）; 
}

結果を以下に示します。

グラデーションと形状のサラウンドデモのスクリーンショット

ShapeレイアウトにはCSSプロパティ名がありshape-image-threshold、画像を囲むテキストの境界線の透明度の値を指定できます。これは後で紹介されます。

3、形状マージンを理解する

shape-margin理解しやすいです。つまり、テキストがグラフィックを囲んでいる場合、境界線からの位置は非常に便利です。Shapeレイアウトでは、テキストの折り返しでmargin属性が無視されることがあるため、間隔を広げたい場合は、通常、shape-margin属性を使用する必要があります。

使用法の表示：

/ *長さの値* / 
shape-margin：10px; 
shape-margin：20mm; 

/ *パーセンテージ値* / 
shape-margin：60％;

このプロパティは含まれていますが、margin動作とCSSmarginプロパティには大きな違いがあります。最初にshape-margin1つの値のみがサポートされ、margin次に1〜4がサポートされます。次にshape-margin、有効な値の範囲が0からフローティング要素の境界まで制限されます（レイアウト効果は通常のフローティングレイアウトのようになります）。

小さなオウムの場合、さまざまなshape-margin値のパフォーマンスが次のgifアニメーションに示されています：

形状マージンの値が異なるサラウンドパフォーマンスGIFスクリーンレコーディング

ときに見ることができるshape-marginこの時点で、変化は、値（浮動要素のボックスの境界を超えて）一定量を超えるshape-marginことが可能であること、見られないだけ不規則な周囲の間隔を制御することができます。

ここをクリックしてください：CSS形状マージンテストデモ

第四に、形状-画像-しきい値を理解する

しきい値という言葉は、「しきい値（yu）値」をshape-image-threshold意味し、画像が囲まれているときの半透明のしきい値を指します。デフォルトでは0.0、画像が透明な0領域の境界を囲むことができます。同様に、値0.5が0.5未満の透明度の領域をテキストで囲むことができることを示している場合。

この属性も非常に実用的で理解しやすいです。たとえば、単色から透明への斜めの線形グラデーションを作成すると、0から1までの透明度がカバーされます。このとき、shape-image-threshold値が異なるとレイアウトが異なります。次のGIF図は次のとおりです。

透明度のしきい値が異なるテキストラッピングのパフォーマンス

次のしきい値のサラウンドパフォーマンスがそれぞれ示されています。

形状-画像-しきい値：0.0; 
形状-画像-しきい値：0.3; 
形状-画像-しきい値：0.6; 
形状-画像-しきい値：0.8;

見ることは信じています、あなたは激しくここをクリックすることができます：CSSの異なる形状-画像-しきい値テストデモ

5.ケース：iPhone X Liu Haitou

iPhone Xの前髪を囲む効果を実現するには：

シェイプによって実装されたサラウンドリスト効果-外部URL

これは、2年前に私のiPhone Xによって導入されたレイアウト実装です。CSSシェイプレイアウトを使用します。詳細な実装については、この記事「CSSシェイプを使用したiPhoneXの強打の周りの要素スクロールの実装」を参照してください。

ここでは詳しく説明しません。

6、結論

この時点で、この記事のFlexレイアウト、Gridレイアウト、Columnsレイアウト、ShapesレイアウトのCSS3レイアウトの導入はすべて完了しています。CSSRegionsレイアウトについては、傾向に応じて、ブラウザーはサポートを放棄する必要があるため、無視してください。それを紹介しないでください。

この記事にはある程度の長さがありますが、グリッドレイアウトよりも習得がはるかに簡単です。

読んでくれてありがとう、そしてコミュニケーションを歓迎します！