- 2005年8月25日 22:03
- XHTML CSS
IMG画像とかの周りがPhotoshopのあれみたいな効果にするスタイル。
img {
background-image: (bg_uneune.gif);
padding: 1px;
}
bg_uneune.gif→
paddingで隙間を空けて、後ろに敷かれているGIFアニメをちょっと見せるという仕掛け。
しかーし、WIN IE6ではDOCTYPEスイッチが標準準拠モードでないとIMG要素にpaddingが効かないので上のCSSではできない。
互換モードで、IE6にも同じように表示させようとすると、IMGの親要素のPやDIVに細工して
<p class="photo"><img src="inu.jpg"～/></p>
p.photo {
background-image: url(bg.gif);
padding: 1px;
display: inline;
_width: 100px; /*WIN IE6*/
}
/* MACIE \*/
p.photo {
display: table;
}
/* */
.photo img {
vertical-align: bottom;
}
ってhackを２個も使ってやるしかない!! 一応これでMACも含め、新しめのブラウザではちゃんと表示されるけど、そこまでしてチカチカさせたい人はいないかもしれない!!
GIFアニメとPaddingの値を少し変えてみたら
お、なんかおめでたい。
- Newer: Dreamweaver8
- Older: DT DDを横並び
