【CSS】画像に合わせて文字を流し込んでみよう！
皆さんこんにちは。本日はCSS「Shapes」をご紹介します。
画像の形状に合わせて、文字が並ぶレイアウトです。海外では昔の書物にも登場したりするレイアウトですね。
Can I usehttps://caniuse.com/css-shapes
文字を回り込ませるCSS「Shapes」
「Shapes」はコンテンツの幅や高さ、背景色とは別に見えないマスクをかける感じで実装出来ます。
例えば左端に存在する赤い丸には、「Shapes」の真円を設定しています。画像が透過で真円でなくとも、形状がマッチするのであれば、自動的に切り抜いたかのような効果をもたらします。
「Shapes」の真円を設定しています。視覚的にわかりやすくborder-radiusを指定していますが、実際は四角の範囲に見えない円が存在しています。画像が四角でもイラストが円であれば切り抜いて表現することが可能です。
<p class="shapes"></p>
.shapes{
shape-outside: circle();/*円形*/
width: 200px;
height: 200px;
float: left;/*回り込みにはfloatが必要*/
}
複雑な形状を編集するのに便利なChromeの拡張機能「CSS Shapes Editor」もあるようなので是非挑戦してみて下さい。
