形状が外側のCSSのフローティング要素の周りの雑誌スタイルの形状

投稿日: 2022-04-20 2022-10-08
タグ: css

序章

CSSShapesモジュール1の一部であるshape-outsideは、フローティング要素の周りにテキストを折り返すための形状を簡単に設定できる興味深いプロパティです。たとえば、浮動要素が多くの空白のある画像である場合、または境界半径が異なる場合、shape-outsideの値が関係して、その周りのテキストがどのように折り返されるかを定義します。

shape-outsideを使用すると、雑誌で見慣れているページレイアウトに近いページレイアウトを作成できます。これは、ブラウザをサポートするための優れたプログレッシブエンハンスメントであり、サポートされていないブラウザでは、プロパティは単に無視されます。

shape-outsideの値は、キーワード、形状関数、または画像へのURLにすることができます。各オプションについて簡単に説明します。

形状キーワード

shape-outsideを次のような値に設定できます margin-box, padding-box, content-box また border-box. これにより、float要素に適用される境界半径値に続くテキストを簡単に作成できます。

マージンボックス
Lorem ipsum dolorは、amet、consecteturadipiscingelitに座ります。 Pellentesque faucibuseuismodtempor。 Ut accondimentumneque。 Vivamusveltristiquelacus。 Aenean volutpat volutpat diam、euvolutpatmauris。 Donec interdumtemporrisus。 Maecenaseutincidunttortor。 Donec tincidunt turpis enim、ac bibendum loremblanditat。 Pellentesque ullamcorper ex sit amet maurisdictumvarius。

img.shape1 {
  float: left;
  margin-right: 2rem;
  border-radius: 0% 90%;
  -webkit-shape-outside: margin-box;
  shape-outside: margin-box;
}

の違い margin, padding, content と border キーワードは、ブラウザが図形の「境界」を設定する場所にあります。たとえば、設定 border-box テキストを強制的に外側の端の周りに流します border 要素の。

形状関数

shape-outside は、 circle（）、 polygon（）、 ellipse（）、またはの4つの可能な形状関数のいずれかを取ることもできます。 X136X] inset（）。

サークル

これは、左に浮いていて、境界半径が 50％の画像の例です。

Lorem ipsum dolorは、amet、consecteturadipiscingelitに座ります。 Sed non arcu nec lacusvenenatispulvinar。 Cras lacinia turpis diam、euismod velitauctorsedで。 Curabitur bibendum sodales tortoretlobortis。 Cras vitaevulputateex。 faucibusmiのVivamus。 Aliquam auctor sem aclobortisvolutpat。整数のfringillalacussuscipit nisl blandit、sed efficiturelitultricies。 Curabitur aclaoreetligula。 Nullam et enim ut risuscommodotempor。 Vivamus dictum sit amet eratvitaedapibus。

img.shape2 {
  float: left;
  margin-right: 2rem;
  border-radius: 50%;
  -webkit-shape-outside: circle();
  shape-outside: circle();
}

circle（） shape関数は、半径と位置の値を取ることもできます。

/* Circle width a 40% radius and positioned at 20% 60% */
shape-outside: circle(40% at 20% 60%);

楕円

ellipse（） shape関数の場合、構文は円の構文と似ていますが、X半径とY半径が提供されている点が異なります。

Lorem ipsum dolorは、amet、consecteturadipiscingelitに座ります。 Vivamus quam dolor、pulvinar et odio eu、accumsanmalesuadaaugue。 Donec luctus et nequenecdignissim。 Phasellus varius ex sit amet ipsum gravida、at tinciduntnequeluctus。 Proin molstie、risus eu interdum bibendum、mauris urna laoreet nisi、eleifend eros arcuinelit。 Donec imperdiet dignissim eratetsemper。 Maecenas vestibulum tempor nequeidpellentesque。 Aenean vel justo maximus metus rutrum accumsan acadolor。 Vivamus a nunc non elit luctus ornare pretiumidrisus。 Nunc diam sapien、varius sit amet accumsan sit amet、malesuadaquisdiam。 Donec condimentum odio eu expretiumfacilisis。 Phasellus ligula enim、pulvinar sit amet efficitur vitae、sodalesatelit。 convallismolestieのDonecsagittisarcu。 Maecenas vehicula hendrerit lacusatornare。 Suspendisse mattis ac mauriseuauctor。 Nulla eu ipsum a lectus posuere aliquam ididest。

.shape3 {
  float: right;
  width: 230px;
  height: 140px;
  margin-left: 2rem;
  border-radius: 50%;
  -webkit-shape-outside: ellipse(100px 55px at 38.7% 52.25%);
  shape-outside: ellipse(100px 55px at 38.7% 52.25%);
  object-fit: cover;
}

ここでは、 object-fit を使用して、寸法を押しつぶしても画像のアスペクト比が維持されるようにしました。

ポリゴン

ポリゴン（）カラー関数を使用して、あらゆる種類の興味深い形状を作成できます。ただし、適切な寸法を把握するのは非常に複雑です。したがって、より複雑な形状の場合は、この優れた CSS Shapes Editor ChromeExtensionのようなツールを使用することをお勧めします。

img.shape4 {
  float: left;
  -webkit-shape-outside: polygon(-5px 86px, 243px 253px, 300px 220px, 296px 434px, -2px 434px);
  shape-outside: polygon(-5px 86px, 243px 253px, 300px 220px, 296px 434px, -2px 434px);
  -webkit-shape-margin: .7rem;
  shape-margin: .7rem;
}

ここで、 shape-margin プロパティを使用して、形状全体をわずかに微調整していることに注目してください。

挿入図

inset（）形状関数を使用して、上、右、下、および左の位置のインセット値を証明しました。

img.shape5 {
  float: right;
  -webkit-shape-outside: inset(50px 0 50px 55px);
  shape-outside: inset(50px 0 50px 55px);
}

URL

URLを介して画像を提供でき、画像の不透明な部分で形状を作成できます。

img.shape6 {
  float: left;
  shape-outside: url("/shape.png");
}

透明なpng（ shape.png ）画像は次のようになります。

ブラウザの互換性： 2020年現在、世界中の 94% ofブラウザは shape-outside 財産。完全にサポートが不足している唯一のブラウザはInternetExplorer11です。

getdocs

13036