ビジュアル系 CSS Shapes の用例ギャラリー
この記事は、Web Platformチームブログに 2014/5/13 に投稿された記事 「Good-Looking Shapes Gallery」 を翻訳したものです。
でも、もう難しくはありません。
CSS Shapes はいまや標準化の最終ステージです。この機能は、コンテンツを幾何学的図形 （円や多角形など） や画像のアルファチャンネルの周囲にフローさせることができます。CSS Shapes は、オンラインメディアに柔軟性とパワーを与え、今日の印刷物に見られるようなレイアウトの作成を容易にします。Safari や Chrome のように WebKit か Blink ベースのブラウザの最新版では、既に CSS Shapes が利用可能です。
CSS Shapes の開発は約 2 年にわたり、その進捗はこちらにお伝えしてきました。殆どのレポートは仕様と実装の進化に焦点を当て、記事内のサンプルは見た目よりも基本に焦点を合わせたものでした。この記事では、バランスを見た目優先に振ってみようと思います。下のリストは、私たちがビジュアルが優れていると感じたシンプルな Shapes のデモです。アドビの CSS Shapes エンジニアリングチームの全員が少なくとも 1 つ以上のデモ制作に貢献しました。
それぞれのデモは CodePen.io に実際に確認できるバージョンが公開されています。スクリーンショットやリンクをクリックして、確認してみてください。デモを表示するには Shapes をサポートするブラウザー を使い、ブラウザの CSS Shapes 機能を有効に します。例えば、Safari の nightly build を使う、あるいは Chrome か Chrome Canary の Shapes 機能を以下の手順で有効にします。
- 以下をアドレスバーにコピーし、Enter キーを押す
chrome://flags/#enable-experimental-web-platform-features - 該当する箇所の ‘有効’ リンクをクリック
- ブラウザ下部の ‘再起動’ ボタンをクリック
いくつかのデモは Shapes Polyfill を利用していて、殆どのブラウザで動作します。
では、前口上はこのくらいで、ビジュアル系の Shapes のギャラリーをご覧ください。
Ozma of Oz
このデモは Ozma of Oz を含む L. Frank Baum の本から、章の扉のレイアウトを再現したものです。最初の頁はしばしば右または左にイラストが大きく配置されます。章のテキストはイラストに緩やかに沿っています。これらの本は 100 年以上前に出版されましたが、今でも素晴らしい印刷物です。CSS Shapes で Web 上でも素敵な見た目となりました。
見出し
伝統的な “文字見出し” は、章の最初の文字、単語、またはフレーズを大きな強調した文字で始めます。文字見出しの目的は、読み始めるべき場所を注目させることです。このデモは、最初の段落全体の上に文字を被せることで記事に注意をひきつけます。どちらの例も、そこで発生するのは、グラフィック要素からテキストへの滑らかな移行です。
妨害者
妨害者 （violator） は、角や辺の一部に侵入して矩形のレイアウトを妨害する小さな要素です。このレイアウトの手法は、短文の雑誌や製品のパッケージで良く見られます。”最新、さらに良くなって” のバナーが何千もの消費者向け製品 （実際に新しかったり改善されていないものも） の角に散りばめられているでしょう。
カラム分割
雑誌がコラムのレイアウトを少しロマンチックにしたい場合、この方法がしばしば用いられます。何らかの形状がコラムの間に割って入り、ページ興味深いビジュアル効果を作り出します。これが無ければ、テキストに注目せずページをめくるだけの反応に直面する羽目になるかもしれません。
キャプション
昔ながらの画像へのキャプションの付け方は、テキストを画像の下または横に置くというものです。キャプションを画像上に配置するのはより技巧を必要とします。テキストが重要な箇所を隠さず、しかもテキストの読みやすさは損なわないよう描画が求められるからです。その結果は大変魅力的になることがあります。
この画像は、Zoltan Horvath の式典用のワイン差しの写真と （日本茶についての） 引用文を組み合わせたものです。飲み物の境界を少しばかり破って申し訳ありません。デモですので。
ページ分割
このようなレイアウトでは、右側の物体の周囲にコンテンツを流し込み、その後通常の矩形に拡張させることが可能です。このデモでは、左右の矢印キーに応じて、コンテンツが段落ごとに表示されます。
注：実際、マテ壷は先のでもと全く同じ窓枠に置かれています。Zoltan も Pope Francis も、数多いイェルバ・マテ茶のファンの一人です。
代用の shape-inside
もともとの CSS Shapes の仕様には shape-outside だけでなく shape-inside も含まれていました。残念なことに shape-inside は Level 2 に先送りされ、現在の実装には含まれません。世界中の shape-inside 好きにとって幸運にも、場合によっては注意深く shape-outside を組み合わせることで、shape-inside を模造できます。オートミールのボウルの中に文字が配置されたこのデモはその良い例です。
アニメーション
これはアニメーション付きのデモです。ぜひ、まずライブバージョンを見てください。動きのある形状を使って特定のメッセージにユーザーの注意をひきつける例です。もちろん、この方法は自制心を持って使わなければなりません。Web ページ上で繰り返されるアニメーションは紳士的にユーザーの注意を引くわけではありません。トラクタービームのように引き付けます。
動作
広告はユーザーの注意をひきつけることを意図してつくられます。そして １～2 秒のアニメーションはその役に立ちます。このデモでは、一連のトランジションが繋がって、読者の注意を引く小さな動きとなります。この動作のハイライトは、もちろん最後にテキストがロボットの輪郭に張り付くところです。これに、動作を強調するサウンドトラックと、駆動音や金属音などの効果音が加わった場合を想像してください。さらに良くなることでしょう。