CSSだけでデザインできることが増えてきて、昔なら画像を使っていた場面でもCSS数行でできちゃうので手軽でいいですよね。
backgroundにグラデをかける手法は使わないサイトはないくらい多用してるんですが、borderにもかけられるので、その方法についてコピペで使えるソースコード付きでご紹介します。
ボーダーにグラデーションをかける方法
ボーダーにグラデーションをかけるには、下記の3行だけで実現できます。
「見出しにアンダーラインを引いて、その線をグラデーションにする」という例がこちらです。
.gradient {
border-bottom: 4px solid #c21500;
border-image: linear-gradient(to right, #c21500 0%, #ffc500 100%);
border-image-slice: 1;
}
実際の見た目はこちらのキャプチャー画像の「おすすめ記事」という見出しのようになります。テキストのサイズや太さはちょっといじってますが、下線のグラデについては上記の3行のみです。
グラデーションのボーダーで囲ったゴーストボタンも作れる
このグラデーションを生かして、ゴーストボタンの周りの線もグラデーションにすることができます。
こちらも先ほどの例とほぼ同じですが、borderをbottomではなく全方向かかるようにしてます。
.ghost-btn {
border: 4px solid #c21500;
border-image: linear-gradient(to right, #c21500 0%, #ffc500 100%);
border-image-slice: 1;
}
グラデーションで作ったゴーストボタンが仕上がりました。「おすすめキーワード」と書かれた上にあるボタンです。
border-imageとborder-image-sliceの対応状況
今回グラデーションをかけるために使ったborder-imageとborder-image-sliceの対応状況を確認したところ、ほぼ全てのブラウザで使えるため問題なさそうです。
仮に効かなかったとしても、borderに色をしておけばグラデーションにならないだけなので問題ありません。
border-imageはIE11もEdgeにも対応してました。
border-image-sliceも同じくIE11・Edgeに対応してますし、対応不明(グレーのところ)がちらっとありますが、気にするほどではないでしょう。
ちなみに、IE10以前についてはだいぶ前から対応する気がありません。切り捨ててます。今回の場合は特にグラデがかかるかどうかの違いなので致命的ではないですしね。
最後に
グラデーションをうまく使うと柔らかさとかきらびやかさとかスタイリッシュさとか、単色で塗りつぶした時とはまた違った表現ができます。
デザインのアクセントとしてぜひご活用ください。