Liquid CSS
窓ガラスに張りつく水滴。コロコロ転がる水銀。
接近する液体同士が表面張力で引かれ合う様子。
これらは物理現象ですが、デザインにおいても液体表現は面白いですよね。
実は、 CSSだけでも 近い表現が可能です（※制限あり）。
まずは作り方、 簡単3ステップ で解説します。
下のサンプルをご覧ください。
See the Pen Demo: Liquid CSS by Yusuke Nakaya (@YusukeNakaya) on CodePen.
- 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
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 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/
よかったらフォローしてください！