borderをグラデーションにする方法

See the Pen border-image-gradient by Takashi Abe (@TakeshiAbe) on CodePen.


今回は、このようなグラデーションになったborderの作り方です。
グラデーションといえばgradient。線形のグラデーションをつくるプロパティといえば、linear-gradient、repeating-linear-gradinet。

グラデーションですし感覚的には”color”にまつわるプロパティなのですが、cssでは「image」として扱われます。

borderがグラデーションになっているのは、borderプロパティで色指定するのではなく、border-image-sourceにlinear-gradientを当てているからです。

というわけで今回の主題は「border-image」です。linear-gradientまでやってしまうと長くなるので詳しくはlinear-gradientへどうぞ。

border-imageプロパティ

好きな画像をborderとして使えるborder-image。最近あまり見なくなりましたが、以前はそこそこ使われていたような気がします。

border-imageプロパティはショートハンド型であり、1つずつ指定するには

  • border-image-source (画像urlやlinear-gradient)
  • border-image-width  (borderの幅)
  • border-image-slice  (画像の使用範囲)
  • border-image-outset (要素とborderの間隔)
  • border-image-repeat  (辺の処理)

を使用します。指定なければ初期値が適用されます。

なお重要なことですが、border-imageプロパティを使うときも「border」プロパティの指定をしないといけません
無いと表示されない場合もありますし、万一border-imageが読み込まれなかったときに代替表示されます。

では個別に説明していきますが、-source については特に説明いらないだろうと思うので省きます。

border-image-width

border-imageの表示幅です。指定がない場合は、borderに指定された幅が適用されます。
どちらの指定もない場合は表示されません。

値を空白区切りで2つ指定すると上下・左右、 3つ指定すると上・左右・下、 4つ指定すると上・右・下・左の辺をそれぞれ指定できます。

border-image-outset

要素とborderの位置関係を定義します。

初期値は「0」で、border-imageが要素の内側ピッタリになるよう配置されます。

borderで指定した幅、(borderが無い場合はborder-image-widthで指定した幅)を1として、数字が大きくなるほど要素の外側に広がります。(たとえばborder-image-outset:1; なら、要素の外側ピッタリになる)

「1」「1.2」などの数値のほか、px・em・remなどの指定も可。
0以下の指定をするとエラー。

ここまでは特に問題ないと思います。
では、ここまでのプロパティだけを指定してborder-imageを設定してみるとどうなるか、

↑(縦横100pxの画像)を使うパターンと、linear-gradientを使ったパターンの2種類やってみます。

.sample共通{
  background: #fff ;
  border-image-width: 10px ;
  border-image-outset: 1 ;    /* ( = 10px ) */
}

.sample1{
  border-image-source: url(sample.png) ;
}

.sample2{
  border-image-source: linear-gradient(navy,tomato) ;
}
SAMPLE 1
SAMPLE 2

なんとも残念な結果になってしまいました。
ここで大切になってくるのが残り2つのプロパティです。

border-image-slice

border-image-slice は、border-imageに対する画像の使用範囲を指定します。
初期値は「100%」。

ですので、先程のように画像は全体(100%)が使用され、border-image-width(10px)にあわせて縮小されています。

もしborder-image-slice:50%;と指定すると、上の辺には画像の上から50%、右の辺には画像の右から50%、、という具合に各々切り取られます。

%ではなく数値で指定した場合、px値で計算されます。(10と指定すれば10px)。(ただしベクター画像を利用した場合は数値指定 = %となります)

指定値が元の画像よりも大きくなった場合は100%に自動変換されるのでご注意。

ここから少し分かりにくくなるのですが、頑張って説明しますのでついてきてください。

border-imageをsliceで分割する場合、最初に四隅の角が決定され、角の間の辺は次に指定するborder-image-repeatによって調整されます。

文章では分かりにくいと思うので、先程の例にborder-image-slice:33%;を追加してみます。
上下左右から約3分の1ずつとるので、の模様が一列分ずつ適用されるはずです。

SAMPLE 3
SAMPLE 4
border-image-sliceの説明画像です

(見ての通り、グラデーションかけるだけならここまでで出来てしまうのですが、もう少しお付き合いください。)

説明画像と合わせて見てもらうと分かりますが、四隅の角には画像の33%分がぞれぞれ配置され、辺は引き伸ばされています。

この辺の部分をどうするか調節するのが、最後のborder-image-repeatです。

書き忘れていましたが、border-image-sliceも複数の値をセットできます。書き方はborder-image-widthと同じです。

また、border-image-sliceの値に「fill」を併用すると要素の内側まで背景が浸食します。

ついでなんでやっておきます。

SAMPLE 5
SAMPLE 6
.sample1{
  border-image-slice: 33% 16% ; /* 追加 */
}
.sample2{
  border-image-slice: 33% fill ; /* 追加 */
}

画像の方はsliceの左右を16%にしたので、四隅に使われる画像部分が小さくなり、上下の引き伸ばされる部分が増えました。

fillを指定した場合、backgroundより上に表示されますので、使用の際はご注意ください。

border-image-repeat

最後は辺の部分をどう処理するか指定するborder-image-repeatです。

「background-repeat」と一緒だろと思ったら失敗してしまうプロパティ

指定できる値は
「stretch(初期値)」「round」「space」「repeat」の4種類

先程までは指定していないのでstretch(引き伸ばし)となっていました。

これは見たほうが早いので一挙サンプルです。

round
space
stretch

stretch以外の3つはどれを指定しても辺を埋めるために繰り返されます。違いは半端部分の処理です。分かりにくいですが改めて見比べてみてください

round半端が出ないように引き伸ばして調整
space空白を設けて調整する
repeat単純に繰り返しで埋める(その結果隅っこが欠ける)

border-image-repeatに値を2つ指定すると上下・左右を調整できます。3つ以上の指定はエラーです。

stretch round

以上でborder-imageプロパティの説明終了ですがどうでしょう? 説明下手なのでかなり長丁場となってしまいましたが、「分かった!」と思ってくだっていれば幸いです。

タイトルとURLをコピーしました