CSS Shapesでテキストを回り込ませるレイアウトを表現 | Webクリエイターボックス

CSS Shapesでテキストを回り込ませるレイアウトを表現Webでのデザインはどうしても四角形のボックス型になりがち。印刷物だとテキストの配置ももっと自由にできますよね。今回はテキストを画像などの形にあわせて回りこませたり流しこんだりできちゃう CSS Shapes について紹介します！ CSS Shapes とはCSS Shapes を使えば、円形や多角形、画像に合わせて、そのまわりに float で横並びにしているテキストを回り込ませて配置できます。雑誌や印刷物の広告などでみかけるレイアウトのひとつですね！これが Web でも表現できるようになれば、デザインの幅がグンと広がるのではないでしょうか？ 通常、テキストと円形の要素を横に並べると、この図のように四角形をベースとした配置になり、円の右上・左上・左下・右下には空白ができます。そのスペースを shape-outside プロパティ

[otchy210]

透明の div を何層にも重ねて float: right してたのは今は昔、ですな。

[localnavi]

あんまり複雑なことをするとスマホ対応で死ぬ気がするけど、円や楕円くらいなら使っても良さそう。

[redmarlboro]

CSS Shapesでテキストを回り込ませるレイアウトを表現｜Webクリエイターボックス @webcreatorboxさんから

[Hi32]

四角にとどまらず、丸や多角形に文字を流し込める

[mnyo]

こんなのあったのかーJS入れたらIEいくつから対応できるんだろう

[nohako]

これの実験する。忘れない！

[iceroom]

CSS

[cyclocosm]

まあ読みやすさはボックス型のほうが圧倒的だから読み手のことを無視したオナデザインだよな。

[ytsk]

[

[htnmiki]

まあ読みやすさはボックス型のほうが圧倒的だから読み手のことを無視したオナデザインだよな。技術としてはアリでも。

[alice_r]

[CSS3]

[caligo]

CSS Shapesでテキストを回り込ませるレイアウトを表現／ぅおおおすげーーこういうのテンションあがる！割と簡単にできるのがすごい。