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

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

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

サイトのキャプチャ

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


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

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

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

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

See the Pen Gradient with Wrapper by Chris Coyier (@chriscoyier) on CodePen.

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

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

See the Pen Gradient border + border-radius by Shaw (@shshaw) on CodePen.

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

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

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

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

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

See the Pen CSS Gradient Borders by Chris Coyier (@chriscoyier) on CodePen.

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

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

サイトのキャプチャ

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

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

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

sponsors

top of page

©2024 coliss