[CSS]画像無しで、両端にいくにつれ薄くなるラインを描くテクニック

CSS3を使って、フェードするラインをつくるスタイルシートのテクニックを紹介します。

How to Create a Fading Dark Gradient on CSS3 without Images

[ad#ad-2]

• デモ
• 実装

デモ

デモではその美しいラインと、HTML/CSSのコードが掲載されています。

デモページ

[ad#ad-2]

実装

全コードはデモページに記載されているので、ここではラインのスタイルをピックアップします。

HTML

マークアップはシンプルなリストで、ul要素にclassを指定するだけです。

<ul class="container">
	<li>First list item</li>
	<li>Second list item</li>
	<li>Third list item, etc.</li>
</ul>

CSS

両端がフェードするラインはCSS3グラデーションで、linear-gradientを使います。
シンプルに書くと下記のようになります。

background–image: linear–gradient(rgba(0,0,0,0), rgba(0,0,0,0.1), rgba(0,0,0,0));

両端が「0」で、真ん中が「1」です。

また、このグラデーションをラインにするためには、background-sizeで幅を100%高さを1pxに設定します。

.container li{
    background-image: linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0.1) 50%, rgba(0,0,0,0));
    background-repeat: no-repeat;
    background-position: 50% 100%;
    background-size: 100% 1px;
}