21

Photoshop でこれを行う方法に関するチュートリアルがここにあります。

ここに画像の説明を入力

私はCSSのみでこれをやろうとしています。私が得ることができるのは、このfiddleにあります。 

hr.fancy-line { 
    border: 0; 
    height: 1px; 
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(215,215,215,0.75), rgba(0,0,0,0)); 
    background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(215,215,215,0.75), rgba(0,0,0,0)); 
    background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(215,215,215,0.75), rgba(0,0,0,0)); 
    background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(215,215,215,0.75), rgba(0,0,0,0)); 
    box-shadow: 0px -2px 4px rgba(136,136,136,0.75);
}

<hr class="fancy-line"></hr>

影にグラデーションをかけるのはかなり難しそうです。これを改善する方法はありますか？

4

3 に答える 3

52

radial-gradienta の代わりに疑似要素に a を使用しますbox-shadow。これは、エッジに向かって先細りになっているためです。

radial-gradient上<hr>を半分に切るように並べます。<hr>次に、グラデーションの残りをカバーするのに十分な高さで、背景と同じ色と高さのすぐ下に別の疑似要素を配置します。

更新された JSFiddle

CSS

hr.fancy-line { 
    border: 0; 
    height: 1px;

}
hr.fancy-line:before {
    top: -0.5em;
    height: 1em;
}
hr.fancy-line:after {
    content:'';
    height: 0.5em;
    top: 1px;
}

hr.fancy-line:before, hr.fancy-line:after {
    content: '';
    position: absolute;
    width: 100%;
}

hr.fancy-line, hr.fancy-line:before {
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 75%);
}

body, hr.fancy-line:after {
    background: #f4f4f4;
}
于 2013-03-05T04:58:35.317 に答える