ボーダーに画像を適用するには border-image-sourceプロパティで画像を読み込んで、border-image-sliceで幅を指定すればよい。
まずはとっておきのジャムでTea Timeにしようよ。。
CSS3のborder-imageではボーダーに画像を読み込むことができます。ボーダーに画像を適用すると簡単に表現力が向上します。
少し使い方がわかりにくいですが、理解すれば簡単に使用することができます。
例えば次のような表現です。画像の周りに額のような模様を付けています。
額の部分はイラストレーターのブラシに標準でセットされているゴールドリーフを使用して四角形を適当な大きさで描いたものを使用しています。
border-imageプロパティの使い方
矩形に画像ボーダーを適用する方法の説明です。
ボーダーに使いたい画像の準備
まずイラストレーターなどで使いたい画像のボーダーを矩形の形にして準備します。
作例ではイラストレーターで幅480px高さ335pxの長方形を作成して、線に対してブラシのゴールドリーフを適用しました。
ここで大事な作業は、今回のように各辺のデザインが均一に繰り替えさえれているものでは、長方形の幅と高さは適当でかまいません。
ただし、画像化しているボーダーの幅の値をイラストレーターのものさしツールなどで上下左右それぞれ記録しておきます。
今回の例では赤矢印部分の幅です。それぞれ均一な幅で45pxとなっています。
できあがった長方形はpng形式かgifにして保存しておきます。
border-imageプロパティを使ったコーディング
イラストレーターで作成したボーダーの画像をHTMLに適用してみます。
サンプルのHTMLは以下のとおりです。ダミーテキストをdivでグループ化して「.b-image」というクラス名を付けました。
通常のボーダーを付ける
まず、この div.b-image に通常のボーダーをつけます。
<div class="b-image"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel pulvinar justo. Donec pharetra iaculis justo sed vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel pulvinar justo. Donec pharetra iaculis justo sed vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel pulvinar justo. Donec pharetra iaculis justo sed vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel pulvinar justo. Donec pharetra iaculis justo sed vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel pulvinar justo. Donec pharetra iaculis justo sed vehicula. </div>
ボーダーは実線で5pxの黒色です。
.b-image{
border: 5px solid #000;
}
border-image-sourceで画像を読み込む
HTMLは先のものと同じです。CSSのみ追加していきます。
ここで、注意する点として先に設定した「border: 5px solid #000;」はそのまま残しておくことです。これを消去するとボーダーは引けません。
ボーダーに画像を読み込むためには border-image-source プロパティを使用します。
値にはurl(画像のパス)を使います。
border-image-sliceプロパティの使い方
続いて、border-image-sliceプロパティを使います。これが非常にわかりにくいものなのですが、ここではとりあえず画像を準備したときにボーダーの幅を記録したと思いますがその値を使用します。上下左右同一の幅ならそのときの値をいれます。
注意点として、単位を付けないで数値のみ記述します。
ボーダーに画像を表示させたサンプル
.b-image{
border: 5px solid #000;
border-image-slice: 45;
border-image-source: url(gold.png);
}
上のサンプルで確認するとわかるように、線が5pxで引かれるため画像が縮小された状態になります。
そこで border の線幅の値を5pxから45pxに変更します。
これで思い通りの表現になりました。
ここでの注意点はborderプロパティのsolidの指定と色の指定はそのままにしておきます。
ボーダーの幅を調整したサンプル
.b-image{
border: 45px solid #000;
border-image-slice: 45;
border-image-source: url(gold.png);
}
fillを指定してボーダーで囲まれた背景も同時に表示
border-image-sliceにfillのキーワードを使うと画像で作成したボーダーに囲まれた内側（背景）も表示することができます。
次のコードではfillを指定しています。
fillを使ったサンプル（絵の下の説明文がカーボンで描かれたボーダーでその内側の背景にはパターンが表示されています）
<div class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel pulvinar justo. Donec pharetra iaculis justo sed vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel pulvinar justo. Donec pharetra iaculis justo sed vehicula. </div>
border-image-sourceにはcarbon.pngを指定
ボーダー幅は５pxでborder-image-sliceにfillを指定
.description{
background-color: #fff;
width:30%;
margin: auto;
padding: 10px;
border: 5px solid #000;
border-image-slice: 5 fill;
border-image-source: url(carbon.png);
}
値が４つの場合は上辺の幅 右辺の幅 下辺の幅 左辺の幅となります。
値が１つの場合は全て同じ幅です。
値が2つの場合は1つ目が上下辺、2つ目が左右辺の幅です。
値が３つの場合は1つ目が上辺、2つ目が左右辺、3つ目が下辺の幅です。
また、border-image-sliceの値には単位をつけません。
長さをラスター画像の場合はピクセル数で、ベクター画像の場合は座標で表されます。
さらに、値にfillというキーワードを加えると上記サンプルの枠に囲まれた部分（fillと記述された部分）を表示することもできます。
つまりボーダー部分だけではなくそのボーダーに囲まれた中身の画像まで表示することができます。
border-image-widthの指定
border-image-widthの値にpx単位を付けて指定をするとボーダーの幅を指定することができます。
この指定を行う事でborder: 45px solid #000の指定を消去してもボーダーは表示されることになります。
この場合は仮想的なボーダーを作成しているためボックスモデルの計算に影響しません。
ただし、見た目がおかしくなります。つまりボーダーとコンテンツが重なってしまう場合があります。
border-image-widthを使用したサンプル
一方で先のサンプルのように border: 5px solid #000 のようにしてボーダーの指定をすることも可能です。この場合はボックスモデルの計算に影響がでますが、見た目の不具合はでません。どちらを選ぶかは状況に応じて検討してください。
また、一旦border: 5px solid #000で指定をしておいてから、別途border-image-widthプロパティで幅を指定する場合の特徴は値に単位を付けずにborderで指定した幅の何倍という形で指定することもできます。
border-image-width:2とするとborderで指定した幅の2倍になります。
border-image-widthを使ってボーダーとコンテンツが重なった場合、これを防ぐにはborder-image-outsetで必要な数値をpxで指定します。
ちょうどパディングを入れた状態になりボーダーと文字が重なることを防ぐことができます。
.b-image{
border: 45px solid #000;
border-image-slice: 45;
border-image-source: url(gold.png);
border-image-width:2;
border-image-outset:45px;
}
border-image-repeatの指定
border-image-repeatには3つの値があります。
1つ目はデフォルト値で stretch でボーダーの長さに合わせて伸び縮みします。
2つ目は repeat でボーダーの長さに合わせてリピートしながら表示されます。
3つ目は round で伸び縮みしながらリピートするものです。
コメントを投稿するにはログインしてください。