画像を使わずに、CSSだけでボーダー(線)の両端を徐々に透明にする方法は、CSSのグラデーションを使うことで簡単に表現することができます。

ありがちな表現ですけど、グラデーションの書き方でちょっと覚えておきたいこともあったので、備忘録をかねてやり方を記載しておきます。

CSSのグラデーションを利用する

まずはボーダーを作らなくてはいけませんが、ボーダーを作るのにCSSのborderプロパティは利用しません。borderプロパティでは、カラーにグラデーションの効果を与えることができないので、高さ1pxの要素を別で作り、それをボーダーに見立て、backgroundのlinear-gradient()関数を利用して要素の両端を透過させます。

ちなみに、両端を透明にしたボーダーとは、以下のようなやつです。

上下の青いボーダーがそれです

見出しとかでよく見るやつですね。

ブラウザはChrome、Safari、Firefoxのそれぞれ最新版、それとIE11で問題なく表示されていることを確認しています。

実装

HTML

HTMLは要素にクラスをあてるだけで、他は何でもいいです。例では、見出しを想定して、h2タグでマークアップしてます。

<h2 class="transparent-bothends">ここに見出し</h2>

CSS

CSSは段階に分けて記載します。まずは基本のスタイルから。

基本のスタイル

.transparent-bothends {
    position: relative;
    width: 100%;
    margin: 50px 0;
    padding: 20px 0;/*ボーダーとテキストに空間をあける為のpadding*/
    color: #3F7EFA;
    font-size: 18px;
    text-align: center;
}

この部分のスタイルはお好みに合わせてどうぞ。必要なのはposition: relative;だけです。

以下はデモ。まだボーダーはない状態です。

ここに見出し

ボーダーのスタイル(両端透過前)

.transparent-bothends::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 1px;
    margin: 0 auto;
    text-align: center;
    background: #3F7EFA; /*この部分は後にlinear-gradientへ*/
}

ボーダーを作る為にbefore疑似要素を利用しています。こうすることで無駄なHTMLタグを作らなくてすみます。

両端を透過させる為には、backgroundの部分をそっくり変更する必要がありますので、上記はまだ仮のものとなります。

以下はデモ。まだ両端は透過されていません。

ここに見出し

両端透過のスタイル

.transparent-bothends::before {
    background-image: -webkit-linear-gradient(left, transparent, #000 25%, #000 75%, transparent);
    background-image: linear-gradient(to right, transparent, #000 25%, #000 75%, transparent);
    background-position: center;
    background-repeat: no-repeat;
}

backgroundの部分を上記に置き換えます。2015年3月現在で、linear-gradient()を使用する場合、webkit系のブラウザにはベンダープレフィックスが必要になりますので、忘れずに付けておきましょう。

以下はデモ。両端が透過されているのが分かると思います。

ここに見出し

上下にボーダーを付けたい場合は、after疑似要素を追加し、位置(top:0;)だけ新たに設定して、あとはほぼ同じスタイルを指定すればOKです。

全CSSコード

一応、上記のCSSを全てまとめたものも掲載しておきます。

.transparent-bothends {
    position: relative;
    width: 100%;
    margin: 50px 0;
    padding: 20px 0;
    color: #3F7EFA;
    font-size: 18px;
    text-align: center;
}
.transparent-bothends::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 1px;
    margin: 0 auto;
    text-align: center;
    background-image: -webkit-linear-gradient(left, transparent, #000 25%, #000 75%, transparent);
    background-image: linear-gradient(to right, transparent, #000 25%, #000 75%, transparent);
    background-position: center;
    background-repeat: no-repeat;
}

グラデーションの部分について(余談)

グラデーションの位置を25%と75%で指定しているのは、透明の部分を少なくするためで、この値を変えることで、透明の部分を広くとったりすることができます。なお、この部分は以下のように書いても全く同じ表示となります(25%と75%の場合)。

linear-gradient(to right, transparent, #000, #000, #000, transparent);/*パーセントを削除し#000が１つ増えいている*/

※この部分(#000, #000, #000)はカラーストップと言い、パーセントがある場合にはその位置に、ない場合には、記載した色の数で按分され、自動的に割り振られる。ここが詳しい。

また、to rightは、左から右へという意味で、leftと同義だけど、Firefoxではleftとだけ書くとグラデーションを認識しなくなってしまいます。そのため、to rightのようにtoではじまるように書いた方が(現状では)いいようです。

おわり

ボーダーの両端を徐々に透過させていくだけですが、これだけでも印象が変わるので、もうちょっと何か欲しいなという時にでも使ってみてください。

グラデーションについて、まだちょっと理解が足りていないところがあるので、今度、複雑なグラデーションの使い方に挑戦してみたいと思っています。