BORDER で下線をグラデーション表示する
Borderをつかって下線をグラデーション表示する。
ちょいと粋な下線。考え方は、グラデーションのボックスを書いて、文字の入る部分を背景色で塗りつぶして「消す」。
外側のブロックを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; }
スポンサーリンク