tips

dottedなどのborder要素をグラデーションさせる。

拙ウェブサイト内の画像をつかった装飾箇所をcss3とかwebfontとかに置き換えていたところ、表題の件に行き当たりました。今更画像を使うのも嫌なので擬似的な手段ですがcssで処理。ボーダーを引きたい要素に直接ボーダーを充ててもよいのですが、そうするとその要素のposition:relativeの位置がボーダーの内側になりますので、そのぶん修正が必要になります。親要素にrelativeを指定して、before疑似要素でボーダーを引き、その上にafter疑似要素で背景色と同じグラデーションを載せています。

 

参考にここで充てているCSSをそのまま書いておきます。

/*左横線*/
.bordered-left { 
    padding:0 0 0 40px;
    position:relative; 
    background:#fff
}
.bordered-left:before, .bordered-left:after {
    position:absolute; 
    left:0; 
    top:0; 
    bottom:0; 
    display:block; 
    content:' '; 
    width:2px;
}
.bordered-left:before { 
    border-left:2px dotted #000; 
}
.bordered-left:after { 
    background:-webkit-linear-gradient( top, white, rgba(255, 255, 255, 0)); 
    background:linear-gradient( to bottom, white, rgba(255, 255, 255, 0));
}

/*下線*/
.bordered-bottom { 
    padding:0 0 20px;
    position:relative; 
    background:#fff
}
.bordered-bottom:before, .bordered-bottom:after {
    position:absolute; 
    left:0; 
    right:0; 
    bottom:0; 
    display:block; 
    content:' '; 
    height:1px;
}
.bordered-bottom:before { 
    border-bottom:1px dashed #000; 
}
.bordered-bottom:after { 
    background:-webkit-linear-gradient( left, white, rgba(255, 255, 255, 0)); 
    background:linear-gradient( to right, white, rgba(255, 255, 255, 0));
}

IEでもフィルターかければ実現できると思うのですが、グラデーション系の設定は面倒くさかった記憶があるので無視する方向で。

Your Comment

コードの記述は<pre>または<code>タグで括って下さい。自動的にエスケープされます。

 

右の文字を入力して下さい captcha