2017年11月24日

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

中矢雄介／Creator

Liquid CSS

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

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

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

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

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

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

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

Only CSS: Slime

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

Only CSS: Mystery Oil

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

Only CSS: Virus

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

Only CSS: Cry Baby

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

Only CSS: Creamy Star

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

Only CSS: Creamy <3

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

Only CSS: Creamy Neon

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

Only CSS: Living Thing

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

Only CSS: Milky Loader

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

Only CSS: Sunset Beach

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

Only CSS: Fire

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

Only CSS: Solar Flare

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

まとめ

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

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

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

CODEPENで色々サンプル公開中

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