デモ
CSS Shapeの導入方法
Chrome Canaryの設定で「試験運用版のウェブ プラットフォームの機能を有効にする」をONにし、ブラウザを再起動すれば良い。
めんどくさい場合はChorme Canaryのアドレスバーに下のやつを入力すれば良い。
chrome://flags/#enable-experimental-web-platform-features
・参考
Adobe products: desktop, web, and mobile applications | Adobe
CSS Shapeジェネレーター
Loading...
不思議の国のアリスのデモ
CSS Shapeを使ってテキストのレイアウトを変えているのがよくわかる。
Demo for Alice's Adventures in Wonderland, by Lewis Carroll
書き方
AdobeのAndyさんのブログを参考にした。これを見るのが一番早いと思う。
CSS Shapes デモと解説 | fenomas.com
コード
<div class="container"> <p> CSS Shape Example(Chrome Canary & Nightly Build) </p> <div id="circle"></div> <p>ある日の暮方の事である。。。。 </p> </div>
.container{ border:solid 1px #333; padding:10px 5px; } #circle{ width:100px; height:100px; float:left; margin-left:50px; -webkit-shape-outside:circle(0,0,100px); -webkit-shape-margin:5px; border:solid 1px #dd0000; }
CSS Exclusion
Exclusionは指定された要素を「wrap-flow:both」で除外(exclusion)することで回り込みをする手法。現在IEでしか実装されていないから試していないw
<div class="container"> <div id="exclusion"></div> <p>ある日の暮方の事である。。。。 </p> </div>
#exclusion{ wrap-flow:both; width:100px; height:100px; -webkit-shape-outside:circle(0,0,100px); -webkit-shape-margin:5px; border:solid 1px #dd0000; }