not good but great

プログラミング、アート、映画・本の感想について書きます。

CSS ShapeとExclusion(IEなので未確認)を使ってみた

デモ

CSS Shapeって何?

テキストがCSSで作った図形に沿って回り込みができる技術。これを駆使すれば、より柔軟にレイアウトを作成することが出来る。

CSS Shapeの導入方法

Chrome Canaryの設定で「試験運用版のウェブ プラットフォームの機能を有効にする」をONにし、ブラウザを再起動すれば良い。

めんどくさい場合はChorme Canaryのアドレスバーに下のやつを入力すれば良い。

chrome://flags/#enable-experimental-web-platform-features

・参考
Enable Features | Web Platform | Adobe & HTML

CSS Shapeジェネレーター
CSS Shape Generator

不思議の国のアリスのデモ

CSS Shapeを使ってテキストのレイアウトを変えているのがよくわかる。
Demo for Alice's Adventures in Wonderland, by Lewis Carroll

書き方

AdobeのAndyさんのブログを参考にした。これを見るのが一番早いと思う。
CSS Shapes デモと解説 | // andy hall

コード

<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

CSS Shapes Module Level 2

<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; 
}