CSSだけで煌めく、キラキラサファイア💎

2020年6月19日 00:20

CSS のグラデーションは background: linear-gradient() で描きます。しかし、linear-gradient はアニメーションに対応してないので、つまらない！そこで、無理やりアニメーションさせる方法を研究した作品 "Sapphire" の紹介です。

Only CSS: Codevember #4 Sapphire

この作品で使われている CSS テクニックの一部を紹介します。コードは一部抜粋し、簡素化しています。

背景グラデーションのアニメーション🙅‍♂️

まず、誰もが引っかかりそうな、NGパターンです。animation プロパティで linear-gradient() を指定したら、動きそうな気がしますが...。

<!-- HTML -->

<div class="sapphire">
  <div class="cut"></div>
</div>

/* CSS */

.cut {
  animation: sapphireBlue 1s linear infinite alternate;
}

@keyframes sapphireBlue {
  0% {
    background: linear-gradient(0deg, #eee 0%, #fff 50%, #000 100%);
  }

  100% {
    background: linear-gradient(0deg, #000 0%, #eee 50%, #fff 100%);
  }
}

残念ながら、これは動きません。linear-gradient() は、animation プロパティに対応していないのです。

linear-gradient() は、アニメーション可能な background-color プロパティではなく、background-image プロパティに含まれます。つまり、グラデーション描画は画像として処理されているため、アニメーションできないのかもしれませんね。ともかく、別のアプローチを研究しました。

背景位置のアニメーション🙆‍♂️

background-image はダメでも、background-position プロパティならanimation に対応しています。この作品のポイント、色は変えられないものの、グラデーションを移動してアニメーションさせるテクニックです。

<!-- HTML -->

<div class="sapphire">
  <div class="cut"></div>
</div>

/* CSS */

.cut {
  background-image: linear-gradient(0deg, #000 0%, #fff 50%, #000 100%);
  background-size: 100% 200%;
  animation: sapphireBlue 1s linear infinite alternate;
}

@keyframes sapphireBlue {
  0% {
    background-position: 0% 0%;
  }

  100% {
    background-position: 0% 100%;
  }
}

background-size で背景グラデーションの高さを2倍にしています。そして、background-position には上下にスライドするように指定することで、グラデーションをアニメーションさせています。

宝石のカット

宝石らしいデザインに仕上げるため、三角形で切り抜き、宝石のカットラインを表現しています。三角形は border プロパティでも表現できますが、それでは背景グラデーションが使えません。背景を維持したいときは、clip-path で切り抜くテクニックです。

<!-- HTML -->

<div class="sapphire">
  <div class="cut"></div>
  <div class="cut"></div>
  <div class="cut"></div>
</div>

/* CSS */

.sapphire {
  clip-path: polygon(0% 25%, 100% 0%, 50% 100%);
}

.cut:nth-child(1) {
  clip-path: polygon(10% 20%, 80% 10%, 30% 90%);
}

.cut:nth-child(2) {
  clip-path: polygon(30% 10%, 50% 0%, 80% 100%);
}

.cut:nth-child(3) {
  clip-path: polygon(0% 10%, 30% 70%, 10% 80%);
}

clip-path: polygon() を使って、ランダムな三角形に切り抜きます。作品ではこのカットを60枚、適当に重ねています。仕上げに、親要素も三角形で切り抜いてデザインを整え、綺麗な宝石を表現しています。

煌めきに、もうひと工夫

グラデーションには、透明度を持った青と白を使っています。この白い部分は、光の反射を表現しています。アニメーション中に白い部分が重るとき、より白が目立ち、まるで光の反射のように錯覚するテクニックです。

<!-- HTML -->

<div class="sapphire">
  <div class="cut"></div>
</div>

/* CSS */

.cut {
  mix-blend-mode: color-dodge;
}

mix-blend-mode プロパティで color-dodge（覆い焼き）効果を適用しています。この効果は、白いところほど描画の色を明るくする効果があります。しかしこれは言葉では伝わりにくいので、実際に試してみるとよいでしょう。覆い焼きのほかにも、スクリーンや白黒など、様々なパターンがあります。ちなみに、Photoshop 経験者であれば、馴染み深いかもしれません。

作品名にある Codevember とは

11月は Codevember 月間。 11月になると毎日1テーマ、全30テーマを指定して作品を募る、コーダー向けのイベントです。Code + November というわけですね。日本では12月に行われることで有名なアドベントカレンダーの一種です。CodePen では2016年に始まりました。本記事の作品は、2017年の Codevember Day4 のテーマ "Sapphire" リストに載せた作品です。CSS だけでキラッキラなブルーサファイアを作ってみたい。そう思ったのでした。

職人技

宝石は、カットが命と言われています。精巧にカットされた面に光が反射して、とても美しい表情を見せますよね。このカットを CSS でどのように表現するかについて、深く考察しました。色、カタチ、光。宝石が醸し出すオーラ。ダイヤモンドに次ぐ硬度を誇るという、鉱物としての質感。頭の中でイメージを膨らませながら、宝石彫刻師になりきって丁寧にチューニングしました。

Only CSS: Colorful Jewelry

こちらは "Sapphire" の派生作品、"Colorful Jewelry" です。翌日、カラフルな宝石も作りたくなったのです。色数を増やし、しかし現れる色域は計算して絞っています。そのほか、カットの露出面積を増やすため、外枠を三角形から矩形に変更しました。かなり派手なデザインに仕上がりましたが、本家の "Sapphire" よりも多くのハートを獲得しています。みなさん、こちらの方がお好きのようですね（笑）。作品はインパクトも大切ですよね。

おわりに

Codevember や技術系アドベントカレンダーなど、多くの人が一定のテーマに沿ってアウトプットしていくイベントに参加することは、とてもいい経験と思い出になります。気になるイベントがあれば、思い切って飛び込んでみましょう。とっても楽しいですよ！

ステータス

Only CSS: Codevember #4 Sapphire
https://codepen.io/YusukeNakaya/pen/RjQGzg

・作成日：2017年11月20日
・ハート：90 以上
・ページビュー：2,400 以上

Only CSS: Colorful Jewelry
https://codepen.io/YusukeNakaya/pen/BmYGON

・作成日：2017年11月20日
・ハート：140 以上
・ページビュー：3,600 以上