今更ながら、CSSテクニックまとめ。(1)

まぁ備忘録ですからね。CSSで使えるテクニックのまとめです。

Clearfix

[css]
.clearfix:after {
content: ".";
display: block;
height: 0px;
clear: both;
visibility: hidden;
}

/* Win IE7 */
*:first-child+html .clearfix
{
height: 1%;
}
/* End Win IE7 */

/* Win IE6 \*/
* html .clearfix
{
height: 1%;
}
/* End Win IE6 */

/* Mac IE\*//*/
.clearfix
{
display: inline-table;
}
/* End Mac IE */
[/css]
http://blog.d-spica.com/entry/070307clearfix.html

cssでのロールオーバー実装と背景画像によるテキスト置換。

XHTML
[xhtml]
<li id="bt1" class="menu_button"><a href="preview.php">preview</a></li>
[/xhtml]
CSS
[css]
.menu_button a {
overflow:hidden;
height:50px;
text-indent:-9999px;
display:block;
}
.menu_button:hover {
background-position:-230px;
}
#bt1 {
background-image:url(../images/menu_01.gif);
}
[/css]
Crude Music Web Site で使いますのでリニューアル後にでも見てください。)