1歩踏み込んでみる！ CSSグラデーションのマニアックな世界 - ICS MEDIA

CSSでグラデーションがかけられるようになって久しいですが、ただ2色をつないでいるだけの人も多いのではないでしょうか？ あるいはジェネレーターでコピペして終わりにしてはいないでしょうか？ 実は、値を細く設定することで、グラデーションに留まらない、より豊かな表現を実現できます。工夫すればこんな表現もCSSのみで行えます。 後半の応用例の実装は手入力のCSSでは困難な部分もあるので、SCSSを使って記述しています。SCSSを使うとCSSだけでは難しい処理もスムーズに行え、mixin機能を使えば、面倒な入力手間も省けるので便利です。記事内で紹介しているグラデーションの生成mixinも用意しました。 デモを別ウインドウで再生する 使われているmixinを確認する CSSグラデーションの種類 CSSグラデーションは色を扱うのでbackground-colorプロパティを使いたくなりますが、backg

[migi-straight]

linear-gradientのアニメーション

[lovely]

background-image:linear-gradientを使ってグラデーションしない指定にすれば見た目borderっぽい表現ができる

[syonx]

“クロソイド曲線”

[goldhead]

IllustratorのグラデをCSSに書き出せたらな、とか思ったら、とっくにそういう機能があったことを知った。

[tonkotsuboy_com]

私の知っているCSSグラデーションと違う。。。笑