画像編集ツールで領域を選択しているようなエフェクトをCSSとGIFアニメで実現する方法:phpspot開発日誌

前の記事 ≪：わんわん分析＆おもしろ画像分析
次の記事 ≫：サイトを印象付ける芸術的なfavicon集

画像編集ツールで領域を選択しているようなエフェクトをCSSとGIFアニメで実現する方法

2007年03月30日-

スポンサードリンク

画像編集ツールで領域を選択しているようなエフェクトをCSSとGIFアニメで実現する方法。

次のように、ブロック要素を目立たせたい場合に非常に効果的です。

作り方は簡単で、次のような4x4ピクセルのGIFアニメを用意します。

簡単な画像を組み合わせて、一般的なGIFアニメ作成ソフトで作れます。

次に、次のようなＨＴＭＬを作ります。

<html>

<style type="text/css">
body {
    background-color:orange;
}
div#selectblock {
    background-image:url("back.gif");
    padding:1px;
    width:300px;
}
div#innerblock {
    background-color:white;
   padding:8px;
}
</style>
<body>
<div id="selectblock">
   <div id="innerblock">
    aaaa
   </div>
</div>
</body>
</html>