CSS Shapes デモと解説 | fenomas.com
#circle { float: left; -webkit-shape-outside: circle(0, 0, 100px); -webkit-shape-margin: 5px; } これだけでOKです。shape-outside はそのdivの外縁となるシェイプを定義する。そしてshape-marginの設定はそのシェイプの周りのマージンを追加する。 ただしここで重要なポイント：float設定は必須です！なぜかというと、CSS Shapesはエレメントの「float area」を定義する仕様です。右か左にフロートしない限り、エレメントのfloat areaは無視されるのでShapesの設定が無効となる。 ちなみに、上記サンプルの circle(0, 0, 100px) の値はCSS Shapes仕様で定義される新しいものである。シェイプを定義する方法はいくつかあるけど、最も役に立
CSS Regions のデモと解説 | fenomas.com
何年か前からアドビがW3Cの標準化プロセスに参加して、より自由なウェブを作ろうとしているが、関わっている２つのCSS仕様「Regions」と「Shapes」が最近ブラウザに実装されてきているので軽く紹介したいと思います。 まずはデモだ！しかし本機能はまだ一般的なブラウザには実装されていないので、Chromeのベータ版カナリーを使ってください。また、本機能はまだ実験状態なので、カナリーのアドレスバーに「chrome://flags」を入力し、設定ページで「試験運用版の WebKit 機能を有効にする」という設定を有効にしてください。そうするとデモを見れるはず。 そしてCSSリージョンのデモはこちら。画面の横幅やズームをいじってみてください。エラーメッセージっぽいのが表示されるようならば、上記ステップのブラウザビルドと設定フラグを再度確認してください。 では機能の説明に入りましょう。 CSS
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
