2017月11月24日

Liquid CSS!まるで液体のようなデザインを実装するCSS技

Liquid CSS

窓ガラスに張りつく水滴。コロコロ転がる水銀。
接近する液体同士が表面張力で引かれ合う様子。

これらは物理現象ですが、デザインにおいても液体表現は面白いですよね。
実は、 CSSだけでも 近い表現が可能です(※制限あり)。

まずは作り方、 簡単3ステップ で解説します。
下のサンプルをご覧ください。

See the Pen Demo: Liquid CSS by Yusuke Nakaya (@YusukeNakaya) on CodePen.

  1. blur
    親要素に filter プロパティの blur() を指定します。
    全体の描画がボケます。
  2. contrast
    blur() と同時に contrast() も指定します。
    ボケた描画のコントラストを上げます。
  3. background
    ボケ感+高コントラストの要素にさらに background で背景色を指定します。
    すると、子要素(円)のボケた境界線と背景が合成されクッキリします。

この時、子要素の ボケた境界線が重なっている部分が、液体のような曲線 に変化します。

/* 上記サンプルのコード抜粋 */
selector {
  filter: blur(10px) contrast(10);
  background: rgba(0, 0, 0, 1);
}

このテクニックを応用して、CSSアニメーションのコンセプトを作りました。
Codepenで公開しているものを以下に紹介します。

Only CSS: Slime

See the Pen Only CSS: Slime by Yusuke Nakaya (@YusukeNakaya) on CodePen.

最初の練習作品。
色の溶け合い、曲線の生まれ方、見え方など、これでLiquid CSSを研究しました。

Only CSS: Mystery Oil

See the Pen Only CSS: Mystery Oil by Yusuke Nakaya (@YusukeNakaya) on CodePen.

シンプルに、でもちょっとした工夫を。
オイルがコロコロ転がり、くっついては離れる、を繰り返す。
Liquid CSS効果は背景色だけでなく border にも影響があるので、使いこなすと多彩な表現が可能です。

Only CSS: Virus

See the Pen Only CSS: Virus by Yusuke Nakaya (@YusukeNakaya) on CodePen.

先ほどのサンプルの、カラフルバージョン。
mix-blend-mode: screen; で色の溶け合いに独特な風味を出すと、まるでバイオハザードのようなウィルス感たっぷりの何かができました。

Only CSS: Cry Baby

See the Pen Only CSS: Cry Baby by Yusuke Nakaya (@YusukeNakaya) on CodePen.

液体が作れるんだから、涙だって、作れる。
ただし、女の子は泣かせちゃダメですよ。

Only CSS: Creamy Star

See the Pen Only CSS: Creamy Star by Yusuke Nakaya (@YusukeNakaya) on CodePen.

円だけとは、限りません。
clip-path プロパティで星型にくり抜き、接近する星同士が溶け合うようなデザインにしました。
また、マウスオーバーすると星が大きくなり、周囲の星をたくさん巻き込みます。

Only CSS: Creamy <3

See the Pen Only CSS: Creamy <3< a=""> by Yusuke Nakaya (@YusukeNakaya) on CodePen.

形状記憶。
触れるとアイスクリームのように溶けていき、中から文字が見えてきますが、やがて元の形に戻ります。
このようにインタラクティブ性を持たせると、より面白いですね。

Only CSS: Creamy Neon

See the Pen Only CSS: Creamy Neon by Yusuke Nakaya (@YusukeNakaya) on CodePen.

先に紹介したサンプルの、カラフルバージョン。
こちらは mix-blend-mode: screen; を使うことで、独特な色表現になっています。

Only CSS: Living Thing

See the Pen Only CSS: Living Thing by Yusuke Nakaya (@YusukeNakaya) on CodePen.

まるで生き物がウネウネ動いているような、あるいは書道の筆のような表現。
触れると、ウネウネの表情が変わっていきます。

Only CSS: Milky Loader

See the Pen Only CSS: Milky Loader by Yusuke Nakaya (@YusukeNakaya) on CodePen.

Liquid CSS効果は、テキストにもかける事ができます。
赤くすると、ホラー映画のWebサイトで使えそうなおどろおどろしい表現も可能です。

Only CSS: Sunset Beach

See the Pen Only CSS: Sunset Beach by Yusuke Nakaya (@YusukeNakaya) on CodePen.

沈む夕日、揺れる水面。
Liquid CSSを研究し始めた本当の目的は、この表現をCSSだけで作ってみたかったから。
少しだけ角度をつけるなど、ちょっとした工夫でリアリティが増します。

Only CSS: Fire

See the Pen Only CSS: Fire by Yusuke Nakaya (@YusukeNakaya) on CodePen.

Liquid CSS効果をうまく応用すれば、炎だって作れます。
背景に赤色、下から上に移動する要素に黒を指定する事で、炎がユラユラ揺れているように見えます。

Only CSS: Solar Flare

See the Pen Only CSS: Solar Flare by Yusuke Nakaya (@YusukeNakaya) on CodePen.

炎が作れるなら、太陽だって。
灼熱の太陽フレアをデザインしてみました。
子要素に背景色ではなく border を指定する事で、太陽表面から飛び出した火柱を表現しています。

まとめ

CSSのみで、液体表現も可能です。
ただし、制限もあります。

  • 狙った通りの色を使う事ができず、 コントロールが難しい
  • 親要素に background で背景色を指定しなければいけない都合上、 背景画像が使えない
  • 実は、SVGを使えば上記の問題点は解決 する(仕事で使う場合はSVGかcanvas推奨)
  • 色、かたち、塗る面積や場所など 工夫次第で様々な表現 が可能
  • mix-blend-mode と組み合わせると カラー合成で面白い表現 が可能

CSSの世界は、制限がありながらも非常に奥深く、まだ見ぬ可能性にあふれています。
できることと、できないことの境界線を見極め、ギリッギリを攻めていきましょう!

CODEPENで色々サンプル公開中

CODEPEN
https://codepen.io/YusukeNakaya/
よかったらフォローしてください!

RELATED POSTS