最近増えてきたグラデーションのボーダーをCSSで実装するさまざまなテクニック

ここ一年でグラデーションの使い方がだいぶ進化してきました。使用するカラーだけでなく、使用する場所にも変化が見られます。 Webサイトやスマホアプリで最近増えてきたグラデーションのボーダーをCSSで実装するさまざまなテクニックを紹介します。 Gradient Borders in CSS ※CSS-TRICKSがリニューアルされ、グラデーションが随所に使用されていますね。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 要素の周りにグラデーションのボーダーが必要な場合、どうしますか？ グラデーションのボーダーを実装するCSSのAPIはありません。 線形グラデーションの背景を持つラッパー要素を作成し、少し小さい内側の要素に背景を定義してくり抜くようにボーダーを実装します。 これを実装すると、下記のようになります。

[coliss]

グラデーションのボーダーをCSSで実装するさまざまなテクニックのまとめ

[haniworks]

“border-image-slice”