CSSで作る素晴らしいアルバムのリスト集の作成方法[CSS]

Komodo Mediaより、CSSで作る素晴らしいアルバムのリスト集の作成方法の紹介です。

デモページはコチラから

mu0903191.jpg

設置方法は、下記の画像のどれかを背景画像として設置します。

mu0903192.jpg

CDアルバムのジャケットはそれぞれ用意します。

以下、マークアップ例です。

XHTML

<ul class="music">
<li>
<a href="...">Hungry Like the Wolf: Duran Duran</a>
<img src="albums/duran.jpg" alt="..." />
</li>
</ul>

CSS

ul.music li a{
display:block;
position:relative;
background:url(vinyl.png) 0 0 no-repeat;
float:left;
width:90px;
height:82px;
text-indent:-1000em;
overflow:hidden;
z-index:1;
}

コチラよりソースをダウンロードすることができます。

個人的に思うのは、わざわざテキストをtext-indentプロパティで飛ばす必要は無いかと思います。alt属性にアーティスト名やアルバム名を入れても効果は同じなので、text-indentプロパティは別に必要性は無いかと思います。