HTML,CSS,PHP,ワードプレスカスタマイズ 技術情報資料

BORDER で下線をグラデーション表示する

Borderをつかって下線をグラデーション表示する。

ちょいと粋な下線。
考え方は、グラデーションのボックスを書いて、文字の入る部分を背景色で塗りつぶして「消す」。
gradline
外側のブロックをH2、内側のブロックを span とした場合。(背景色 #fafafa)
下の例では、内側の padding で 下に1ドットの余白をもうけて、外側のボックス(グラデーション)の下1ドットを見せている感じ。
 
<h2 class="ubar"><span>タイトル</span></h2>
 
CSS
.ubar{
    font-size:20px;

    background: -webkit-linear-gradient(left, #27cda5, #fff);
    background:    -moz-linear-gradient(left, #27cda5, #fff);
    background:      -o-linear-gradient(left, #27cda5, #fff);
    background:         linear-gradient(to right, #27cda5, #fff);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#27cda5, endColorstr='#ffffff', GradientType=1)";
    padding: 0 0 1px 0; //ここが味噌(下にpadding を付けることで 1px分の隙間があけてグラデーションを見せる
}
/* 内側を塗る */
.ubar span{
    background: #fff;
    color: #000;
    text-decoration: none;
    display: block;
}
内側は、span でも a でも、とにかく要素BOXを作ればいい。
 

サンプル

.ubar { ~ padding:0 0 1px 0; }
タイトル
 
.ubar { ~ padding:1px 0 1px 0; }
タイトル

スポンサーリンク

スポンサーリンク

カテゴリー