タグ

backgroundとeffectに関するhoge_systemzのブックマーク (2)

  • [JS]背景やボーダーの不透明度をアニメーションで変更するスクリプト -Transify

    IE6にも対応した、指定したエレメントの背景やボーダーの不透明度をアニメーションで変更するjQueryのプラグインを紹介します。 IE6でのキャプチャ Transifyの特徴 あらゆるエレメントの背景とボーダーの不透明度を変更します。 設置は簡単で、軽量のスクリプト。 主要ブラウザの全てで動作します。 機能するのは、背景のカラー、背景の画像、ボーダーです。 マウスのホバーで、不透明度をアニメーションで変更します。 jQuery1.4.3でテスト済みです(前のバージョンでも動作します)。 [ad#ad-2] Transifyの実装 「jquery.js」と「transify-min.js」を外部ファイルとして指定し、下記のように記述します。 「#selector」は任意のエレメントを指定します。 $('#selector').transify(); デフォルトでの不透明度は60%に設定されて

  • テキストにグランジ風のエフェクトをつけるスタイルシート | コリス

    janko at warp speedのエントリーから、h1やp内のテキストデータに、グランジ風のエフェクトをつけるスタイルシートを紹介します。 Add grunge effect to text using simple CSS デモ 仕組みは、以前当サイトでも紹介した「テキストにグラデーション効果をつけるスタイルシート」と同じもので、背景画像を変更したものとなっています。 空spanを使用するため好みは分かれると思いますが、画像で作成することに比べて、テキストデータだと修正・更新が容易という利点もあります。 デモは、下記のようになっています。 HTML <textarea name="code" class="html" cols="60" rows="5"> <h1>This is one very long title with grunge effect<span></span>

  • 1