[CSS]テキストリンクなどインライン要素を目立たせるスタイルシート

CSSplayから、テキストリンクなどインライン要素にブロック要素のスタイルを適用して目立たせるスタイルシートを紹介します。

Inline links – block styling

動作確認ブラウザは、IE6, IE7, Fx3, Op9.6, Safari(PC3), Chrome Betaとなっています。

div.inlineLinkContainer p {line-height:27px;}
div.inlineLinkContainer a.blockLink {display:inline-block; padding:0 0 0 5px; line-height:26px; height:27px; background:url(block3.gif); text-decoration:none; color:#fc0; text-align:center; margin:1px 0 0 0;}
div.inlineLinkContainer a.blockLink b {display:inline-block; height:27px;  background:url(block3.gif) right top; padding:0 10px 0 5px; font-weight:normal; cursor:pointer;}
div.inlineLinkContainer a.blockLink:hover {color:#fff; background-position:left bottom;}
div.inlineLinkContainer a.blockLink:hover b {color:#fff; background-position:right bottom;}

Post on:2008年10月24日