CSS3を利用したデザイン小ネタ「グラデーションボーダー」

CSS3というとTransform3Dなどの派手なプロパティに目が行きがちですが、簡単なCSS3とCSS2.1だけでもちょっと”いかした”デザインを作成することができます。

今回は、CSS3のグラデーションとCSS2.1の:beforeと:afterを利用したグラデーションのかかったボーダーをご紹介します。

以下のサンプルの様にボーダーだけがグラデーションになっています。今までであればグラデーションに見えるところに画像をひいていましたが、その必要はありません。

（仕組み）
ボーダーにみえている部分は背景指定で実現しています。黒から白にかわる背景画像の上に白い背景を重ねているだけです。

HTMLソース

<div>
    いろはにほへと　ちりぬるを
わかよたれそ　　つねならむ
うゐのおくやま　けふこえて
あさきゆめみし　ゑひもせすん

色は匂へど　散りぬるを
我が世誰そ　常ならむ
有為の奥山　今日越えて
浅き夢見じ　酔ひもせず
    いろはにほへと　ちりぬるを
わかよたれそ　　つねならむ
うゐのおくやま　けふこえて
あさきゆめみし　ゑひもせすん

色は匂へど　散りぬるを
我が世誰そ　常ならむ
有為の奥山　今日越えて
浅き夢見じ　酔ひもせず
 </div>

CSSソース

div { 
      width: 400px;
      margin: 40px auto;
      position: relative;
      padding: 20px;
    }
    div:before {
      content: "";
      position: absolute;
      top: -1px;
      right: -1px;
      bottom: -1px;
      left: -1px;
      background-image: -moz-linear-gradient(top, black, white);
      background-image: -o-linear-gradient(top, black, white);
      background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, black),color-stop(1, white));
      background-image: -webkit-linear-gradient(black, white); 
      z-index: -2;
    }
    
    div:after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      background: white;
      z-index: -1; }

（コメント）
簡単なトリックなのですが、気の利いた知恵を利用したテクニックですね。
デザインの上でこだわりたいディデールですがどうしても画像になってしまいがちです。
今回のサンプルは他にも応用が効きそうなのでご紹介しました。ぜひ応用でいろいろなデザインにチャレンジしてください。