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

ここ一年でグラデーションの使い方がだいぶ進化してきました。使用するカラーだけでなく、使用する場所にも変化が見られます。

Webサイトやスマホアプリで最近増えてきたグラデーションのボーダーをCSSで実装するさまざまなテクニックを紹介します。

Gradient Borders in CSS
※CSS-TRICKSがリニューアルされ、グラデーションが随所に使用されていますね。

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

要素の周りにグラデーションのボーダーが必要な場合、どうしますか？

• グラデーションのボーダーを実装するCSSのAPIはありません。
• 線形グラデーションの背景を持つラッパー要素を作成し、少し小さい内側の要素に背景を定義してくり抜くようにボーダーを実装します。

これを実装すると、下記のようになります。

ラッパーを使用してボーダーを実装

ラッパー要素というアイデアを避ける場合は、マイナスのz-indexが問題なければ、疑似要素で実装できます。
下記はStephen Shawのデモで、border-radiusが加えられています。

疑似要素を使用してボーダーを実装

ボーダーの四辺すべてが必要でない場合は、個々の辺を擬似要素の長方形として実装することもできます。

しかし、border-imageプロパティの存在を忘れないでください。このプロパティで、個々の辺にグラデーションのボーダーを実装できます。

border-imageを使用してボーダーを実装

border-imageに加えてborder-image-sliceを使うと、グラデーションのボーダーはさらに簡単に実装できます。
注意点は、border-radiusと互換性がないことだけです。

border-image+border-image-sliceを使用してボーダーを実装

border-image-sliceプロパティのサポートブラウザは、下記の通りです。

border-imageのサポートブラウザ

• IE 11+
• Edge 12+
• Firefox 15+
• Chrome 15+
• Safari 6+
• Opera 15+

主要なブラウザすべてにサポートされています。