【CSS 3】border 要素にグラデーションを施す方法。

Ads by Google

通常これまでは、1px のボーダーのグラデーションを実現する際、背景画像を用意して[background-image]プロパティを利用するのが一般的な方法でした。

しかしレスポンシヴ・デザインやスマートフォン対応のWebサイトの構築などにより、この方法では相応しくないケースが多くなってきました。
何か他の方法を探して代替しなければなりません。
さて。ここでブレイクスルー。

今回は[CSS3]のテクニックの1つとして、ボーダーのグラデーションを、画像を使わずに CSS のみで表現する方法をご紹介します。

まずはサンプルをご覧ください。
綺麗なグラデーションになっていますね。

ボーダー・グラデーション:サンプル

HTML の記述は以下のように。

<div id="sample">
<p>このボックスの枠(border)を、CSS3 のテクニックを使ってグラデーション化させます。</p>
</div>

そして[CSS]での指定はこちらになります。

#sample {
width:100%;
height:100%;
border-left:1px solid #ff0000;
border-right:1px solid #0000ff;
}

#sample:before,
#sample:after {
content:"";
display:block;
height:1px;
width:100%;
	background:-webkit-gradient(linear, left top, right bottom, from(#f00), to(#00f));
	background:-moz-linear-gradient(left, #f00, #00f);
	background:linear-gradient(left, #f00, #00f);
}

今のところ、CSS で[border]というプロパティにグラデーションをかける方法はありませんから、実際には[background]プロパティを利用して実装することになります。

今回のケースでは、疑似要素[:before]と[:after]に、height:1px; を指定して、その背景としてグラデーションを施すことによってボーダーを実現しています。

ちょっとしたテクニックですが、この方法を駆使することでレスポンシブ・デザインでも対応できるうえ、画像を使わないのでよりパフォーマンスの高いサイトを作ることが可能になります。
余計なタグを挿入して HTML を汚すこともありませんし、応用すれば様々な表現も可能になります。

覚えておいて損はないですね。

ボーダー・グラデーション:サンプル

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google

Recent Commentsこの記事へのコメント

Leave a Replyコメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です