CSSは奥が深い！グラデーションとシャドウをこれまでより美しく実装するテクニック

WebサイトやスマホアプリのUIデザインでよく使用されるグラデーションとシャドウをより美しく実装するスタイルシートのテクニックを紹介します。 このテクニックを使用したプラグインやオンラインツールもリリースされているので、思い通りの美しいグラデーションとシャドウを簡単に利用できます。 Using easing for more than just CSS transitions by Kilian Valkhof 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに アニメーションとトランジションに組み込まれているイージング グラデーションをCSSでより美しく実装するテクニック シャドウをCSSでより美しく実装するテクニック 見栄えのよいWebサイトを制作する はじめに アニメーションの実装にイージング曲線を使用して、より繊細

[coliss]

グラデーションとシャドウをより美しく実装するスタイルシートのテクニック。

[tsuki-rs]

ツールを使わないと絶対めんどくさいやつ

[Katharine_15]

イージングってそういうことだったのか。

[otchy210]

どんどん変わるベストプラクティス。4〜5 年前でも "可能な" テクニックだったろうけど、その頃は特にモバイルでグラフィックが重くなるから現実的では無かったと思われる。

[Keisuke69]

イージングのグラデーションとシャドウの綺麗さよ. でもこれは自前で実装するの結構面倒そう. ジェネレータが求められる

[nismit]

めっちゃ綺麗やがジェネレーター無いとこれは作るのかなりキツい。今度試してみるか

[simochee]

単純な linear-gradient がなんであんな気持ち悪いのか理由がわかった

[seal2501]

これでNeumorphismいけそう。遊ぶか

[hate0211]

CSSでやると、かなり複雑になるのでこれはためになる。

[foo99]

“残念ながら、PostCSSのプラグインはまだないので”

[arapro]

よき

[wararyo]

使いたいけど面倒なのでプリプロセッサで対応してくれんかな