[CSS]テキストリンクなどインライン要素を目立たせるスタイルシート
Post on:2008年10月24日
sponsors
CSSplayから、テキストリンクなどインライン要素にブロック要素のスタイルを適用して目立たせるスタイルシートを紹介します。
動作確認ブラウザは、IE6, IE7, Fx3, Op9.6, Safari(PC3), Chrome Betaとなっています。
|
1 2 3 4 5 6 7 |
<textarea name="code" class="css" cols="60" rows="5"> 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;} </textarea> |
sponsors
